fix(preload): add crossorigin attribute in CSS link tags #17930

fallemand · 2024-08-23T12:52:25Z

We noticed that after the migration to Vite5, in production, most CSS imports contain the crossorigin attribute (after #12991).
But in some cases, we noticed it was missing.
For example:

<!-- In most pages this asset is added with crossorigin -->
<link rel="stylesheet" crossorigin src="cdn.blabla.test/some-css-123123.css">

<!--In other pages is added without -->
<link rel="stylesheet" src="cdn.blabla.test/some-css-123123.css">

This PR: #12991, added to Vite 5 the crossorigin attribute to CSS tags.
But we are missing to add it here, ending with inconsistent tags.

Fixes: vitejs#17929

stackblitz · 2024-08-23T12:52:28Z

Run & review this pull request in StackBlitz Codeflow.

bluwy

Makes sense to me and aligns with #12991 👍

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.3 | ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.4 | ## [v5.4.4](https://github.com/vitejs/vite/releases/tag/v5.4.4) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.4/packages/vite/CHANGELOG.md) for details. ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.5 | ## [v5.4.5](https://github.com/vitejs/vite/releases/tag/v5.4.5) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.5/packages/vite/CHANGELOG.md) for details. ## [v5.4.4](https://github.com/vitejs/vite/releases/tag/v5.4.4) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.4/packages/vite/CHANGELOG.md) for details. ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.6 | ## [v5.4.6](https://github.com/vitejs/vite/releases/tag/v5.4.6) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.6/packages/vite/CHANGELOG.md) for details. ## [v5.4.5](https://github.com/vitejs/vite/releases/tag/v5.4.5) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.5/packages/vite/CHANGELOG.md) for details. ## [v5.4.4](https://github.com/vitejs/vite/releases/tag/v5.4.4) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.4/packages/vite/CHANGELOG.md) for details. ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.7 | ## [v5.4.7](https://github.com/vitejs/vite/releases/tag/v5.4.7) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.7/packages/vite/CHANGELOG.md) for details. ## [v5.4.6](https://github.com/vitejs/vite/releases/tag/v5.4.6) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.6/packages/vite/CHANGELOG.md) for details. ## [v5.4.5](https://github.com/vitejs/vite/releases/tag/v5.4.5) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.5/packages/vite/CHANGELOG.md) for details. ## [v5.4.4](https://github.com/vitejs/vite/releases/tag/v5.4.4) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.4/packages/vite/CHANGELOG.md) for details. ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

| datasource | package | from | to | | ---------- | ------- | ----- | ----- | | npm | vite | 5.4.2 | 5.4.8 | ## [v5.4.8](https://github.com/vitejs/vite/releases/tag/v5.4.8) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.8/packages/vite/CHANGELOG.md) for details. ## [v5.4.7](https://github.com/vitejs/vite/releases/tag/v5.4.7) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.7/packages/vite/CHANGELOG.md) for details. ## [v5.4.6](https://github.com/vitejs/vite/releases/tag/v5.4.6) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.6/packages/vite/CHANGELOG.md) for details. ## [v5.4.5](https://github.com/vitejs/vite/releases/tag/v5.4.5) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.5/packages/vite/CHANGELOG.md) for details. ## [v5.4.4](https://github.com/vitejs/vite/releases/tag/v5.4.4) Please refer to [CHANGELOG.md](https://github.com/vitejs/vite/blob/v5.4.4/packages/vite/CHANGELOG.md) for details. ## [v5.4.3](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small543-2024-09-03-small) - fix: allow getting URL of JS files in publicDir ([#17915](vitejs/vite#17915)) ([943ece1](vitejs/vite@943ece1)), closes [#17915](vitejs/vite#17915) - fix: cjs warning respect the logLevel flag ([#17993](vitejs/vite#17993)) ([dc3c14f](vitejs/vite@dc3c14f)), closes [#17993](vitejs/vite#17993) - fix: improve CJS warning trace information ([#17926](vitejs/vite#17926)) ([5c5f82c](vitejs/vite@5c5f82c)), closes [#17926](vitejs/vite#17926) - fix: only remove entry assets handled by Vite core ([#17916](vitejs/vite#17916)) ([ebfaa7e](vitejs/vite@ebfaa7e)), closes [#17916](vitejs/vite#17916) - fix: waitForRequestIdle locked ([#17982](vitejs/vite#17982)) ([ad13760](vitejs/vite@ad13760)), closes [#17982](vitejs/vite#17982) - fix(css): fix directory index import in sass modern api ([#17960](vitejs/vite#17960)) ([9b001ba](vitejs/vite@9b001ba)), closes [#17960](vitejs/vite#17960) - fix(css): fix sass `file://` reference ([#17909](vitejs/vite#17909)) ([561b940](vitejs/vite@561b940)), closes [#17909](vitejs/vite#17909) - fix(css): fix sass modern source map ([#17938](vitejs/vite#17938)) ([d428e7e](vitejs/vite@d428e7e)), closes [#17938](vitejs/vite#17938) - fix(deps): bump tsconfck ([#17990](vitejs/vite#17990)) ([8c661b2](vitejs/vite@8c661b2)), closes [#17990](vitejs/vite#17990) - fix(html): rewrite assets url in <template> ([#17988](vitejs/vite#17988)) ([413c86a](vitejs/vite@413c86a)), closes [#17988](vitejs/vite#17988) - fix(preload): add crossorigin attribute in CSS link tags ([#17930](vitejs/vite#17930)) ([15871c7](vitejs/vite@15871c7)), closes [#17930](vitejs/vite#17930) - chore: reduce diffs with v6 branch ([#17942](vitejs/vite#17942)) ([bf9065a](vitejs/vite@bf9065a)), closes [#17942](vitejs/vite#17942) - chore(deps): update all non-major dependencies ([#17945](vitejs/vite#17945)) ([cfb621e](vitejs/vite@cfb621e)), closes [#17945](vitejs/vite#17945) - chore(deps): update all non-major dependencies ([#17991](vitejs/vite#17991)) ([0ca53cf](vitejs/vite@0ca53cf)), closes [#17991](vitejs/vite#17991)

fix(): inconsistent crossorigin attribute in CSS tags

15828ff

Fixes: vitejs#17929

bluwy approved these changes Sep 1, 2024

View reviewed changes

bluwy added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) labels Sep 1, 2024

bluwy changed the title ~~fix(): inconsistent crossorigin attribute in CSS tags~~ fix(preload): add crossorigin attribute in CSS link tags Sep 1, 2024

patak-dev approved these changes Sep 2, 2024

View reviewed changes

patak-dev merged commit 15871c7 into vitejs:main Sep 2, 2024
18 checks passed

georgemincof mentioned this pull request Sep 5, 2024

5.4.3 production bug #18038

Open

7 tasks

vejja mentioned this pull request Sep 23, 2024

Entry CSS integrity issues on CDN Baroshem/nuxt-security#528

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(preload): add crossorigin attribute in CSS link tags #17930

fix(preload): add crossorigin attribute in CSS link tags #17930

fallemand commented Aug 23, 2024 •

edited

Loading

stackblitz bot commented Aug 23, 2024

bluwy left a comment

fix(preload): add crossorigin attribute in CSS link tags #17930

fix(preload): add crossorigin attribute in CSS link tags #17930

Conversation

fallemand commented Aug 23, 2024 • edited Loading

stackblitz bot commented Aug 23, 2024

bluwy left a comment

Choose a reason for hiding this comment

fallemand commented Aug 23, 2024 •

edited

Loading