diff --git a/src/content/docs/en/reference/experimental-flags/csp.mdx b/src/content/docs/en/reference/experimental-flags/csp.mdx index 51ab5a43eb0ba..940a9fbf19118 100644 --- a/src/content/docs/en/reference/experimental-flags/csp.mdx +++ b/src/content/docs/en/reference/experimental-flags/csp.mdx @@ -142,7 +142,7 @@ These properties are added to all pages and **completely override Astro's defaul

**Type:** `string[]`
-**Default:** `[]`
+**Default:** `["'self'"]`

@@ -265,6 +265,51 @@ export default defineConfig({ }); ``` +### `fontDirectiveResources` + +

+ +**Type:** `string[]`
+**Default:** `[]`
+ +

+ +A list of valid sources for the `font-src` directive. + +The `font-src` directive is handled by Astro by default, and uses the `'self'` resource. This means that fonts can only be downloaded by the current host (usually the current website). + +To override the default source, you can provide a list of resources instead. This will not include `'self'` by default, and must be included in this list if you wish to keep it. These resources are added to all pages. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + experimental: { + csp: { + fontDirectiveResources: [ + "'self'", + "https://fonts.cdn.example.com" + ] + } + } +}); +``` + +After the build, the `` element will apply your sources to the `font-src` directive: + +```html + + + +``` + +When using [the experimental Fonts API](/en/reference/experimental-flags/fonts/), font resources will be injected by Astro (based on [`build.assetsPrefix`](/en/reference/configuration-reference/#buildassetsprefix)) as well as style [hashes](#hashes). + ## Runtime APIs You can customize the `` element per page via runtime APIs available from the `Astro` global inside `.astro` components, or the `APIContext` type in endpoints and middleware. @@ -411,3 +456,30 @@ After the build, the `` element for this individual page will add your has " > ``` + +### `insertFontResource` + +

+ +**Type:** `(resource: string) => void`
+ +

+ +Inserts a new resource to be used for the `font-src` directive. + +```astro +--- +Astro.insertFontResource("https://fonts.cdn.example.com"); +--- +``` + +After the build, the `` element for this individual page will add your source to the default `font-src` directive: + +```html + +```