From f2192e5629a6a94646c08c9e62998d16de88a200 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Mon, 1 Dec 2025 11:59:27 +0000 Subject: [PATCH 1/4] csp: improve docs --- .../en/reference/experimental-flags/csp.mdx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index 902eccfa13dfa..90f09dbfd6b05 100644 --- a/src/content/docs/en/reference/experimental-flags/csp.mdx +++ b/src/content/docs/en/reference/experimental-flags/csp.mdx @@ -188,6 +188,47 @@ After the build, the `` element will instead apply your sources to the `st ``` +You can use this field to add valid values that belong to [`script-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-attr), [`script-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-elem), [`style-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-attr) and [`style-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-elem), such as `unsafe-hashes` and `unsafe-inline`. + +For example, you have an external library that adds inline styles to some HTML elements of the page. You can use `unsafe-inline` to tell the browser that those styles are safe to render. + +The same analogy is valid for scripts that are added by other libraries. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + csp: { + styleDirective: { + resources: [ + "'unsafe-inline'" + ] + }, + scriptDirective: { + resources: [ + "'unsafe-inline'" + ] + } + } + } +}); +``` + +```html + + + +``` + + + #### `hashes`

From 890c5c14a25901b36456efb0e90ad309ca02ed50 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Mon, 1 Dec 2025 12:54:22 +0000 Subject: [PATCH 2/4] feedback --- src/content/docs/en/reference/experimental-flags/csp.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index 90f09dbfd6b05..97a413cceffa6 100644 --- a/src/content/docs/en/reference/experimental-flags/csp.mdx +++ b/src/content/docs/en/reference/experimental-flags/csp.mdx @@ -215,6 +215,8 @@ export default defineConfig({ }); ``` +After the build, `style-src` and `script-src` directives will contain the `'unsafe-line'` resource: + ```html Date: Mon, 1 Dec 2025 14:30:22 +0000 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- src/content/docs/en/reference/experimental-flags/csp.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index 97a413cceffa6..f8d13370a0fab 100644 --- a/src/content/docs/en/reference/experimental-flags/csp.mdx +++ b/src/content/docs/en/reference/experimental-flags/csp.mdx @@ -188,11 +188,9 @@ After the build, the `` element will instead apply your sources to the `st ``` -You can use this field to add valid values that belong to [`script-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-attr), [`script-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-elem), [`style-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-attr) and [`style-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-elem), such as `unsafe-hashes` and `unsafe-inline`. +You can also use this field to add valid values that belong to [`script-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-attr), [`script-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-elem), [`style-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-attr) and [`style-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-elem), such as `unsafe-hashes` and `unsafe-inline`. -For example, you have an external library that adds inline styles to some HTML elements of the page. You can use `unsafe-inline` to tell the browser that those styles are safe to render. - -The same analogy is valid for scripts that are added by other libraries. +For example, if you have an external library that adds scripts or inline styles to some HTML elements of the page, you can add `unsafe-inline` to tell the browser that they are safe to render. ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; From 70b575ee86fc96b58c0c8f5721d6b4627eb3e591 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Mon, 1 Dec 2025 15:50:39 +0000 Subject: [PATCH 4/4] apply suggestion --- src/content/docs/en/reference/experimental-flags/csp.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index f8d13370a0fab..05867feab670f 100644 --- a/src/content/docs/en/reference/experimental-flags/csp.mdx +++ b/src/content/docs/en/reference/experimental-flags/csp.mdx @@ -146,7 +146,7 @@ These properties are added to all pages and **completely override Astro's defaul

-A list of valid sources for the `script-src` and `style-src` directives. +A list of valid sources for the `script-src` and `style-src` directives, including [values for subclasses](#adding-values-for-subclasses). The `script-src` and `style-src` directives are handled by Astro by default, and use the `'self'` resource. This means that scripts and styles can only be downloaded by the current host (usually the current website). @@ -188,6 +188,8 @@ After the build, the `` element will instead apply your sources to the `st ``` +### Adding values for subclasses + You can also use this field to add valid values that belong to [`script-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-attr), [`script-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-elem), [`style-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-attr) and [`style-src-elem`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-elem), such as `unsafe-hashes` and `unsafe-inline`. For example, if you have an external library that adds scripts or inline styles to some HTML elements of the page, you can add `unsafe-inline` to tell the browser that they are safe to render.