csp: improve docs (#12812)

ematipico · sarah11918 · web-flow · commit e7d1b49f3a80 · 2025-12-01T21:02:06.000Z
Co-authored-by: Sarah Rainsberger &lt;5098874+sarah11918@users.noreply.github.com&gt;
diff --git 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
 <Since v="5.9.0" />
 </p>
 
-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 `<meta>` element will instead apply your sources to the `st
 </head>
 ```
 
+### 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
+<head>
+  <meta
+    http-equiv="content-security-policy" 
+    content="
+      script-src 'unsafe-line'; 
+      style-src 'unsafe-line';
+    "
+  >
+</head>
+```
+
+
+
 #### `hashes`
 
 <p>
