feat(fonts): csp 2 (#14275)

florian-lefebvre · web-flow · commit 3e2f20d07e92 · 2025-08-27T19:58:09.000+02:00
* feat(fonts): csp

* feat: unit test

* feat: fixture test

* chore: changeset

* fix

* feat: wip

* feat: runtime api

* feat: jsdocs

* feat: tests

* feat: changeset

* chore: add error msg

* fix: update hash

* chore: 2 changesets

* feat: update getOrigins to getCspResources

* feat: deduplication stuff

* fix: test

* feat: feedback

* fix: types

* fix: netlify context type

* feat(netlify): dev context

* Discard changes to packages/integrations/netlify/src/index.ts

* wip

* wip

* wip

* wip

* fix: test

* feat: add unit test

* chore: clean
diff --git a/.changeset/legal-trees-retire.md b/.changeset/legal-trees-retire.md
@@ -0,0 +1,9 @@
+---
+'astro': patch
+---
+
+Adds support for experimental CSP when using experimental fonts
+
+Experimental fonts now integrate well with experimental CSP by injecting hashes for the styles it generates, as well as `font-src` directives.
+
+No action is required to benefit from it.
diff --git a/packages/astro/src/assets/fonts/definitions.ts b/packages/astro/src/assets/fonts/definitions.ts
@@ -63,6 +63,7 @@ export interface UrlProxy {
 
 export interface UrlResolver {
 	resolve: (hash: string) => string;
+	getCspResources: () => Array<string>;
 }
 
 export interface UrlProxyContentResolver {
diff --git a/packages/astro/src/assets/fonts/implementations/url-resolver.ts b/packages/astro/src/assets/fonts/implementations/url-resolver.ts
@@ -4,10 +4,15 @@ import { getAssetsPrefix } from '../../utils/getAssetsPrefix.js';
 import type { UrlResolver } from '../definitions.js';
 
 export function createDevUrlResolver({ base }: { base: string }): UrlResolver {
+	let resolved = false;
 	return {
 		resolve(hash) {
+			resolved ||= true;
 			return prependForwardSlash(joinPaths(base, hash));
 		},
+		getCspResources() {
+			return resolved ? ["'self'"] : [];
+		},
 	};
 }
 
@@ -18,13 +23,19 @@ export function createBuildUrlResolver({
 	base: string;
 	assetsPrefix: AssetsPrefix;
 }): UrlResolver {
+	const resources = new Set<string>();
 	return {
 		resolve(hash) {
 			const prefix = assetsPrefix ? getAssetsPrefix(fileExtension(hash), assetsPrefix) : undefined;
 			if (prefix) {
+				resources.add(prefix);
 				return joinPaths(prefix, base, hash);
 			}
+			resources.add("'self'");
 			return prependForwardSlash(joinPaths(base, hash));
 		},
+		getCspResources() {
+			return Array.from(resources);
+		},
 	};
 }
diff --git a/packages/astro/src/assets/fonts/vite-plugin-fonts.ts b/packages/astro/src/assets/fonts/vite-plugin-fonts.ts
@@ -3,6 +3,8 @@ import { readFile } from 'node:fs/promises';
 import { isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { Plugin } from 'vite';
+import { getAlgorithm, shouldTrackCspHashes } from '../../core/csp/common.js';
+import { generateCspDigest } from '../../core/encryption.js';
 import { collectErrorMetadata } from '../../core/errors/dev/utils.js';
 import { AstroError, AstroErrorData, isAstroError } from '../../core/errors/index.js';
 import type { Logger } from '../../core/logger/core.js';
@@ -56,7 +58,7 @@ interface Options {
 }
 
 export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
-	if (!settings.config.experimental.fonts) {
+	if (sync || !settings.config.experimental.fonts) {
 		// This is required because the virtual module may be imported as
 		// a side effect
 		// TODO: remove once fonts are stabilized
@@ -171,6 +173,20 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 		// to avoid locking memory
 		fontFileDataMap = res.fontFileDataMap;
 		consumableMap = res.consumableMap;
+
+		// Handle CSP
+		if (shouldTrackCspHashes(settings.config.experimental.csp)) {
+			const algorithm = getAlgorithm(settings.config.experimental.csp);
+
+			// Generate a hash for each style we generate
+			for (const { css } of consumableMap.values()) {
+				settings.injectedCsp.styleHashes.push(await generateCspDigest(css, algorithm));
+			}
+			const resources = urlResolver.getCspResources();
+			for (const resource of resources) {
+				settings.injectedCsp.fontResources.add(resource);
+			}
+		}
 	}
 
 	return {
@@ -271,7 +287,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 			}
 		},
 		async buildEnd() {
-			if (sync || settings.config.experimental.fonts!.length === 0) {
+			if (settings.config.experimental.fonts!.length === 0) {
 				cleanup();
 				return;
 			}
diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts
@@ -691,6 +691,7 @@ async function createBuildManifest(
 		];
 		const styleHashes = [
 			...getStyleHashes(settings.config.experimental.csp),
+			...settings.injectedCsp.styleHashes,
 			...(await trackStyleHashes(internals, settings, algorithm)),
 		];
 
@@ -703,7 +704,7 @@ async function createBuildManifest(
 			scriptHashes,
 			scriptResources: getScriptResources(settings.config.experimental.csp),
 			algorithm,
-			directives: getDirectives(settings.config.experimental.csp),
+			directives: getDirectives(settings),
 			isStrictDynamic: getStrictDynamic(settings.config.experimental.csp),
 		};
 	}
diff --git a/packages/astro/src/core/build/plugins/plugin-manifest.ts b/packages/astro/src/core/build/plugins/plugin-manifest.ts
@@ -323,6 +323,7 @@ async function buildManifest(
 		];
 		const styleHashes = [
 			...getStyleHashes(settings.config.experimental.csp),
+			...settings.injectedCsp.styleHashes,
 			...(await trackStyleHashes(internals, settings, algorithm)),
 		];
 
@@ -335,7 +336,7 @@ async function buildManifest(
 			styleHashes,
 			styleResources: getStyleResources(settings.config.experimental.csp),
 			algorithm,
-			directives: getDirectives(settings.config.experimental.csp),
+			directives: getDirectives(settings),
 			isStrictDynamic: getStrictDynamic(settings.config.experimental.csp),
 		};
 	}
diff --git a/packages/astro/src/core/config/settings.ts b/packages/astro/src/core/config/settings.ts
@@ -150,6 +150,10 @@ export function createBaseSettings(config: AstroConfig): AstroSettings {
 		latestAstroVersion: undefined, // Will be set later if applicable when the dev server starts
 		injectedTypes: [],
 		buildOutput: undefined,
+		injectedCsp: {
+			fontResources: new Set(),
+			styleHashes: [],
+		},
 	};
 }
 
diff --git a/packages/astro/src/core/csp/common.ts b/packages/astro/src/core/csp/common.ts
@@ -51,11 +51,39 @@ export function getStyleResources(csp: EnabledCsp): string[] {
 	return csp.styleDirective?.resources ?? [];
 }
 
-export function getDirectives(csp: EnabledCsp): CspDirective[] {
-	if (csp === true) {
+// Unlike other helpers like getStyleResources, getDirectives has more logic
+// because it has to collect and deduplicate font resources from both the user
+// config and the vite plugin for fonts
+export function getDirectives(settings: AstroSettings): CspDirective[] {
+	const { csp } = settings.config.experimental;
+	if (!shouldTrackCspHashes(csp)) {
 		return [];
 	}
-	return csp.directives ?? [];
+	const userDirectives = csp === true ? [] : [...(csp.directives ?? [])];
+	const fontResources = Array.from(settings.injectedCsp.fontResources.values());
+
+	if (fontResources.length === 0) {
+		// If no font resources, just return user directives
+		return userDirectives;
+	}
+
+	const fontSrcIndex = userDirectives.findIndex((e) => e.startsWith('font-src'));
+	if (fontSrcIndex === -1) {
+		// Add new font-src directive
+		return [...userDirectives, `font-src ${fontResources.join(' ')}`];
+	}
+
+	// Merge and deduplicate font-src resources
+	const existing = userDirectives[fontSrcIndex]
+		// split spaces
+		.split(/\s+/)
+		// ignore first match as it's the directive name
+		.slice(1)
+		// Avoid duplicated spaces
+		.filter(Boolean);
+	const merged = Array.from(new Set([...existing, ...fontResources]));
+	userDirectives[fontSrcIndex] = `font-src ${merged.join(' ')}`;
+	return userDirectives;
 }
 
 export function getStrictDynamic(csp: EnabledCsp): boolean {
diff --git a/packages/astro/src/core/render-context.ts b/packages/astro/src/core/render-context.ts
@@ -445,7 +445,7 @@ export class RenderContext {
 				renderContext.result?.styleHashes.push(hash);
 			},
 			insertScriptHash(hash) {
-				if (!!pipeline.manifest.csp === false) {
+				if (!pipeline.manifest.csp) {
 					throw new AstroError(CspNotEnabled);
 				}
 				renderContext.result?.scriptHashes.push(hash);
@@ -710,7 +710,7 @@ export class RenderContext {
 				renderContext.result?.styleHashes.push(hash);
 			},
 			insertScriptHash(hash) {
-				if (!!pipeline.manifest.csp === false) {
+				if (!pipeline.manifest.csp) {
 					throw new AstroError(CspNotEnabled);
 				}
 				renderContext.result?.scriptHashes.push(hash);
diff --git a/packages/astro/src/runtime/server/render/csp.ts b/packages/astro/src/runtime/server/render/csp.ts
@@ -20,7 +20,7 @@ export function renderCspContent(result: SSRResult): string {
 		finalScriptHashes.add(`'${scriptHash}'`);
 	}
 
-	let directives = '';
+	let directives;
 	if (result.directives.length > 0) {
 		directives = result.directives.join(';') + ';';
 	}
@@ -38,5 +38,5 @@ export function renderCspContent(result: SSRResult): string {
 	const strictDynamic = result.isStrictDynamic ? ` 'strict-dynamic'` : '';
 	const scriptSrc = `script-src ${scriptResources} ${Array.from(finalScriptHashes).join(' ')}${strictDynamic};`;
 	const styleSrc = `style-src ${styleResources} ${Array.from(finalStyleHashes).join(' ')};`;
-	return `${directives} ${scriptSrc} ${styleSrc}`;
+	return [directives, scriptSrc, styleSrc].filter(Boolean).join(' ');
 }
diff --git a/packages/astro/src/types/astro.ts b/packages/astro/src/types/astro.ts
@@ -29,6 +29,8 @@ export type SerializedRouteData = Omit<
 	};
 };
 
+type CspObject = Required<Exclude<AstroConfig['experimental']['csp'], boolean>>;
+
 export interface AstroSettings {
 	config: AstroConfig;
 	adapter: AstroAdapter | undefined;
@@ -71,6 +73,10 @@ export interface AstroSettings {
 	 * undefined when unknown
 	 */
 	buildOutput: undefined | 'static' | 'server';
+	injectedCsp: {
+		fontResources: Set<string>;
+		styleHashes: Required<CspObject['styleDirective']>['hashes'];
+	};
 }
 
 /** Generic interface for a component (Astro, Svelte, React, etc.) */
diff --git a/packages/astro/src/vite-plugin-astro-server/plugin.ts b/packages/astro/src/vite-plugin-astro-server/plugin.ts
@@ -232,16 +232,21 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest
 	}
 
 	if (shouldTrackCspHashes(settings.config.experimental.csp)) {
+		const styleHashes = [
+			...getStyleHashes(settings.config.experimental.csp),
+			...settings.injectedCsp.styleHashes,
+		];
+
 		csp = {
 			cspDestination: settings.adapter?.adapterFeatures?.experimentalStaticHeaders
 				? 'adapter'
 				: undefined,
 			scriptHashes: getScriptHashes(settings.config.experimental.csp),
 			scriptResources: getScriptResources(settings.config.experimental.csp),
-			styleHashes: getStyleHashes(settings.config.experimental.csp),
+			styleHashes,
 			styleResources: getStyleResources(settings.config.experimental.csp),
 			algorithm: getAlgorithm(settings.config.experimental.csp),
-			directives: getDirectives(settings.config.experimental.csp),
+			directives: getDirectives(settings),
 			isStrictDynamic: getStrictDynamic(settings.config.experimental.csp),
 		};
 	}
diff --git a/packages/astro/test/csp.test.js b/packages/astro/test/csp.test.js
@@ -272,9 +272,8 @@ describe('CSP', () => {
 
 		const header = response.headers.get('content-security-policy');
 
-		assert.ok(header.includes('style-src https://styles.cdn.example.com'));
-
 		// correctness for resources
+		assert.ok(header.includes('style-src https://styles.cdn.example.com'));
 		assert.ok(header.includes("script-src 'self'"));
 		// correctness for hashes
 		assert.ok(header.includes("default-src 'self';"));
@@ -304,6 +303,57 @@ describe('CSP', () => {
 		);
 	});
 
+	it('should generate hashes and directives for fonts', async () => {
+		fixture = await loadFixture({
+			root: './fixtures/csp-fonts/',
+		});
+		await fixture.build();
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+
+		/**
+		 *
+		 * @param {string} csp
+		 * @returns {Array<{ directive: string; resources: Array<string> }>}
+		 */
+		function parseCsp(csp) {
+			return csp
+				.split(';')
+				.map((part) => part.trim())
+				.filter((part) => part.length > 0)
+				.map((part) => {
+					const [directive, ...resources] = part.split(/\s+/);
+					return {
+						directive,
+						resources,
+					};
+				});
+		}
+
+		const meta = $('meta[http-equiv="Content-Security-Policy"]');
+		const parsed = parseCsp(meta.attr('content').toString());
+		assert.ok(
+			parsed.find((e) => e.directive === 'style-src')?.resources.length === 2,
+			'Style hash is not injected by vite-plugin-fonts',
+		);
+		assert.deepStrictEqual(parsed.find((e) => e.directive === 'font-src')?.resources, [
+			"'self'",
+			'https://fonts.cdn.test.com',
+		]);
+	});
+
+	it('should not inject self by default if fonts are not used', async () => {
+		fixture = await loadFixture({
+			root: './fixtures/csp/',
+		});
+		await fixture.build();
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+
+		const meta = $('meta[http-equiv="Content-Security-Policy"]');
+		assert.equal(meta.attr('content').toString().includes('font-src'), false);
+	});
+
 	it('should return CSP header inside a hook', async () => {
 		let routeToHeaders;
 		fixture = await loadFixture({
diff --git a/packages/astro/test/fixtures/csp-fonts/astro.config.mjs b/packages/astro/test/fixtures/csp-fonts/astro.config.mjs
@@ -0,0 +1,25 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	experimental: {
+		csp: {
+			directives: ["font-src 'self' https://fonts.cdn.test.com"]
+		},
+		fonts: [
+			{
+				name: 'Roboto',
+				cssVariable: '--font-roboto',
+				provider: 'local',
+				variants: [
+					{
+						weight: 400,
+						style: 'normal',
+						src: ['./src/fonts/roboto-normal-400.woff2'],
+					},
+				],
+				optimizedFallbacks: false,
+			},
+		],
+	},
+});
diff --git a/packages/astro/test/fixtures/csp-fonts/package.json b/packages/astro/test/fixtures/csp-fonts/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/csp-fonts",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/csp-fonts/src/fonts/roboto-normal-400.woff2 b/packages/astro/test/fixtures/csp-fonts/src/fonts/roboto-normal-400.woff2
diff --git a/packages/astro/test/fixtures/csp-fonts/src/pages/index.astro b/packages/astro/test/fixtures/csp-fonts/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import { Font } from 'astro:assets'
+---
+
+<html lang="en">
+<head>
+	<meta charset="utf-8"/>
+	<meta name="viewport" content="width=device-width"/>
+	<title>Index</title>
+	<Font cssVariable='--font-roboto' />
+</head>
+<body>
+<main>
+	<h1>Index</h1>
+</main>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/csp/astro.config.mjs b/packages/astro/test/fixtures/csp/astro.config.mjs
diff --git a/packages/astro/test/fixtures/fonts/src/pages/index.astro b/packages/astro/test/fixtures/fonts/src/pages/index.astro
diff --git a/packages/astro/test/fixtures/fonts/src/pages/preload.astro b/packages/astro/test/fixtures/fonts/src/pages/preload.astro
diff --git a/packages/astro/test/fonts.test.js b/packages/astro/test/fonts.test.js
diff --git a/packages/astro/test/units/assets/fonts/implementations.test.js b/packages/astro/test/units/assets/fonts/implementations.test.js
diff --git a/packages/astro/test/units/csp/common.test.js b/packages/astro/test/units/csp/common.test.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export interface UrlProxy {`
`63`	`63`
`64`	`64`	`export interface UrlResolver {`
`65`	`65`	`resolve: (hash: string) => string;`
	`66`	`+ getCspResources: () => Array<string>;`
`66`	`67`	`}`
`67`	`68`
`68`	`69`	`export interface UrlProxyContentResolver {`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export function renderCspContent(result: SSRResult): string {`
`20`	`20`	finalScriptHashes.add(`'${scriptHash}'`);
`21`	`21`	`}`
`22`	`22`
`23`		`- let directives = '';`
	`23`	`+ let directives;`
`24`	`24`	`if (result.directives.length > 0) {`
`25`	`25`	`directives = result.directives.join(';') + ';';`
`26`	`26`	`}`
`@@ -38,5 +38,5 @@ export function renderCspContent(result: SSRResult): string {`
`38`	`38`	const strictDynamic = result.isStrictDynamic ? ` 'strict-dynamic'` : '';
`39`	`39`	const scriptSrc = `script-src ${scriptResources} ${Array.from(finalScriptHashes).join(' ')}${strictDynamic};`;
`40`	`40`	const styleSrc = `style-src ${styleResources} ${Array.from(finalStyleHashes).join(' ')};`;
`41`		- return `${directives} ${scriptSrc} ${styleSrc}`;
	`41`	`+ return [directives, scriptSrc, styleSrc].filter(Boolean).join(' ');`
`42`	`42`	`}`