Intent to Ship: Use specific fetch destination for JSON/CSS modules

[Nicolò Ribaudo]

Contact emails

nrib...@igalia.com

Explainer

None

Specification

https://html.spec.whatwg.org/#fetch-a-single-module-script

Summary

CSS and JSON modules will be fetched using a specific fetch destination (either "css" or "json") rather than a generic "script", that is normally used for JavaScript modules. This has the following effects: - the `Accept` HTTP header in the request will describe the expected mime type (`text/css,*/*;q=0.1` or `application/json,*/*;q=0.5`) - those modules will respect the style-src or connect-src Content Security Policies, rather than using JavaScript's script-src - When inspecting the request's destination (either through a service worker or through the `Sec-Fetch-Destination` HTTP header) it will be reported as `"css"` or `"json"`, rather than empty.

Blink component

Blink>HTML>Modules

Search tags

CSS modules, JSON modules, imports, CSP, fetch destination

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: Positive (https://github.com/WebKit/standards-positions/issues/128) Webkit was supportive of the import attributes proposal conditional on these changes to how JSON/CSS modules are fetched

Web developers: No signals

Other signals:

Security

This feature better aligns usage of CSP directives to user expectations (e.g. using style-src for CSS)

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

No

Is this feature fully tested by web-platform-tests?

Yes

- https://wpt.fyi/results/fetch/api/request/destination/fetch-destination.https.html - https://wpt.fyi/results/content-security-policy/connect-src/connect-src-json-import-allowed.sub.html - https://wpt.fyi/results/content-security-policy/connect-src/connect-src-json-import-blocked.sub.html - https://wpt.fyi/results/content-security-policy/style-src/import-style-allowed.sub.html - https://wpt.fyi/results/content-security-policy/style-src/import-style-blocked.sub.html

Flag name on chrome://flags

None

Finch feature name

kFetchDestinationJsonCssModules

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1491336

Estimated milestones

No milestones specified

Anticipated spec changes

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4839834432831488

This intent message was generated by Chrome Platform Status.

[Nicolò Ribaudo]

Hello,

For those looking for the spec diff relative to this change, you can find it in the HTML and Fetch PRs that introduced it: https://github.com/whatwg/html/pull/9486, https://github.com/whatwg/fetch/pull/1691

---

Nicolò Ribaudo

[Yoav Weiss]

On Monday, January 8, 2024 at 7:59:23 PM UTC+1 nrib...@igalia.com wrote:

Hello,

For those looking for the spec diff relative to this change, you can find it in the HTML and Fetch PRs that introduced it: https://github.com/whatwg/html/pull/9486, https://github.com/whatwg/fetch/pull/1691

---

Nicolò Ribaudo

On Monday, January 8, 2024 at 2:20:43 PM UTC+1 Nicolò Ribaudo wrote:

Contact emails nrib...@igalia.com

Explainer None

Specification https://html.spec.whatwg.org/#fetch-a-single-module-script

Summary

CSS and JSON modules will be fetched using a specific fetch destination (either "css" or "json") rather than a generic "script", that is normally used for JavaScript modules. This has the following effects: - the `Accept` HTTP header in the request will describe the expected mime type (`text/css,*/*;q=0.1` or `application/json,*/*;q=0.5`) - those modules will respect the style-src or connect-src Content Security Policies, rather than using JavaScript's script-src - When inspecting the request's destination (either through a service worker or through the `Sec-Fetch-Destination` HTTP header) it will be reported as `"css"` or `"json"`, rather than empty.

Can you confirm that you meant "style" destination for CSS modules, rather than "css"?

That's what seemed to be defined in the spec PR, and it also makes more sense IMO. (as it aligns with <link rel=stylesheet>, and doesn't a new destination for CSS modules)

[Yoav Weiss]

LGTM1

On Wed, Jan 10, 2024 at 4:58 PM Nicolò Ribaudo <nicolo....@gmail.com> wrote:

Yes I made a mistake in the description. The destination for CSS modules is indeed "style", and not "css". Thanks for catching it!

Thanks for confirming!! :)

[Philip Jägenstedt]

LGTM2, thanks for fixing this!

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOmohSKQe-EffvK%2BT82kJTCezVayDOjKN02f7e_f74NbujWCjQ%40mail.gmail.com.

[Daniel Bratell]

LGTM3

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYf4H_Nixn1CcCN7cGaU3oXsp9re_pP%2Bsdzq%3Diwk0GRsSg%40mail.gmail.com.

[Nicolò Ribaudo]

Yes I made a mistake in the description. The destination for CSS modules is indeed "style", and not "css". Thanks for catching it!

On Wednesday, January 10, 2024 at 3:55:29 PM UTC+1 Yoav Weiss wrote: