workers-sdk icon indicating copy to clipboard operation
workers-sdk copied to clipboard

🐛 BUG: Automatic Early Hints should automatically HTML-decode link

Open marcelgerber opened this issue 1 year ago • 0 comments

Which Cloudflare product(s) does this pertain to?

Pages

What version(s) of the tool(s) are you using?

3.72.0 [Wrangler]

What version of Node are you using?

No response

What operating system and version are you using?

macOS 14.6.1

Describe the Bug

Observed behavior

On our way, we have a preload tag containing query params, like so:

<link rel="preload" href="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&amp;features=es2019" as="script"/>

Note the &amp; to escape & in there, which is both valid HTML, and the way ReactDOM will output this during server-side rendering.

However, when the "Early Hints" parser picks these up, it then emits the header

link:
<https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&amp;features=es2019>; rel="preload"; as=script

... which seemingly is not valid like so, seeing that the browser fetches the resource under that exact URL, and then cannot reuse it.

Expected behavior

The URL should be decoded first - and then possibly percent-encoded.

Steps to reproduce

Go to https://cf-pages-early-hints.pages.dev/ and observe both the DevTools console output and the network tab. Notice that there are two preload tags (and two script tags matching exactly), but three requests going out.

The source code used can be found here:

Please provide a link to a minimal reproduction

https://cf-pages-early-hints.pages.dev/

https://gist.github.com/marcelgerber/1bbccbde4710a83fa8adbe421a40bfed

Please provide any relevant error logs

No response

marcelgerber avatar Aug 19 '24 17:08 marcelgerber