diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index 902eccfa13dfa..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,49 @@ 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. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + csp: { + styleDirective: { + resources: [ + "'unsafe-inline'" + ] + }, + scriptDirective: { + resources: [ + "'unsafe-inline'" + ] + } + } + } +}); +``` + +After the build, `style-src` and `script-src` directives will contain the `'unsafe-line'` resource: + +```html + + + +``` + + + #### `hashes`