Skip to content

Commit

Permalink
feat: write cspNonce to style tags (#16419)
Browse files Browse the repository at this point in the history
  • Loading branch information
thebanjomatic authored Apr 18, 2024
1 parent af72eab commit 8e54bbd
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,7 @@ To deploy CSP, certain directives or configs must be set due to Vite's internals

### [`'nonce-{RANDOM}'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#nonce-base64-value)

When [`html.cspNonce`](/config/shared-options#html-cspnonce) is set, Vite adds a nonce attribute with the specified value to the output script tag and link tag for stylesheets. Note that Vite will not add a nonce attribute to other tags, such as `<style>`. Additionally, when this option is set, Vite will inject a meta tag (`<meta property="csp-nonce" nonce="PLACEHOLDER" />`).
When [`html.cspNonce`](/config/shared-options#html-cspnonce) is set, Vite adds a nonce attribute with the specified value to any `<script>` and `<style>` tags, as well as `<link>` tags for stylesheets and module preloading. Additionally, when this option is set, Vite will inject a meta tag (`<meta property="csp-nonce" nonce="PLACEHOLDER" />`).

The nonce value of a meta tag with `property="csp-nonce"` will be used by Vite whenever necessary during both dev and after build.

Expand Down
1 change: 1 addition & 0 deletions packages/vite/src/node/plugins/html.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1184,6 +1184,7 @@ export function injectNonceAttributeTagHook(

if (
nodeName === 'script' ||
nodeName === 'style' ||
(nodeName === 'link' &&
attrs.some(
(attr) =>
Expand Down
2 changes: 1 addition & 1 deletion playground/csp/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<link rel="stylesheet" href="./linked.css" />
<style nonce="#$NONCE$#">
<style>
.inline {
color: green;
}
Expand Down

0 comments on commit 8e54bbd

Please sign in to comment.