refactor(csp): change CSP behaviour (#13923)

Co-authored-by: Sarah Rainsberger <[email protected]>


Co-authored-by: florian-lefebvre <[email protected]>
Co-authored-by: sarah11918 <[email protected]>

Author: 3 people

.changeset/cold-beans-grow.md

@@ -0,0 +1,17 @@
+---
+'astro': patch
+---
+
+
+**BREAKING CHANGE to the experimental Content Security Policy (CSP) only**
+
+Changes the behavior of experimental Content Security Policy (CSP) to now serve hashes differently depending on whether or not a page is prerendered: 
+
+- Via the `<meta>` element for static pages.
+- Via the `Response` header `content-security-policy` for on-demand rendered pages.
+
+This new strategy allows you to add CSP content that is not supported in a `<meta>` element (e.g. `report-uri`, `frame-ancestors`, and sandbox directives) to on-demand rendered pages.
+
+No change to your project code is required as this is an implementation detail. However, this will result in a different HTML output for pages that are rendered on demand. Please check your production site to verify that CSP is working as intended.
+
+To keep up to date with this developing feature, or to leave feedback, visit the [CSP Roadmap proposal](https://github.com/withastro/roadmap/blob/feat/rfc-csp/proposals/0055-csp.md).

packages/astro/src/core/csp/config.ts

@@ -63,7 +63,7 @@ const ALLOWED_DIRECTIVES = [
 	'upgrade-insecure-requests',
 	'worker-src',
 ] as const;
-
+type AllowedDirectives = (typeof ALLOWED_DIRECTIVES)[number];
 export type CspDirective = `${AllowedDirectives} ${string}`;
 
 export const allowedDirectivesSchema = z.custom<CspDirective>((value) => {
@@ -74,5 +74,3 @@ export const allowedDirectivesSchema = z.custom<CspDirective>((value) => {
 		return value.startsWith(allowedValue);
 	});
 });
-
-type AllowedDirectives = (typeof ALLOWED_DIRECTIVES)[number];

packages/astro/src/core/render-context.ts

@@ -454,6 +454,11 @@ export class RenderContext {
 			},
 		} satisfies AstroGlobal['response'];
 
+		let cspDestination: 'meta' | 'header' = 'meta';
+		if (!routeData.prerender) {
+			cspDestination = 'header';
+		}
+
 		// Create the result object that will be passed into the renderPage function.
 		// This object starts here as an empty shell (not yet the result) but then
 		// calling the render() function will populate the object with scripts, styles, etc.
@@ -496,6 +501,7 @@ export class RenderContext {
 				extraScriptHashes: [],
 				propagators: new Set(),
 			},
+			cspDestination,
 			shouldInjectCspMetaTags: !!manifest.csp,
 			cspAlgorithm: manifest.csp?.algorithm ?? 'SHA-256',
 			// The following arrays must be cloned, otherwise they become mutable across routes.

packages/astro/src/integrations/features-validation.ts

@@ -5,6 +5,7 @@ import type {
 	AdapterSupportsKind,
 	AstroAdapterFeatureMap,
 } from '../types/public/integrations.js';
+import { shouldTrackCspHashes } from '../core/csp/common.js';
 
 export const AdapterFeatureStability = {
 	STABLE: 'stable',
@@ -38,6 +39,7 @@ export function validateSupportedFeatures(
 		i18nDomains = AdapterFeatureStability.UNSUPPORTED,
 		envGetSecret = AdapterFeatureStability.UNSUPPORTED,
 		sharpImageService = AdapterFeatureStability.UNSUPPORTED,
+		cspHeader = AdapterFeatureStability.UNSUPPORTED,
 	} = featureMap;
 	const validationResult: ValidationResult = {};
 
@@ -93,6 +95,17 @@ export function validateSupportedFeatures(
 		() => settings.config?.image?.service?.entrypoint === 'astro/assets/services/sharp',
 	);
 
+	validationResult.cspHeader = validateSupportKind(
+		cspHeader,
+		adapterName,
+		logger,
+		'cspHeader',
+		() =>
+			settings?.config?.experimental?.csp
+				? shouldTrackCspHashes(settings.config.experimental.csp)
+				: false,
+	);
+
 	return validationResult;
 }
 

packages/astro/src/runtime/server/render/head.ts

@@ -52,7 +52,7 @@ export function renderAllHeadContent(result: SSRResult) {
 		}
 	}
 
-	if (result.shouldInjectCspMetaTags) {
+	if (result.cspDestination === 'meta') {
 		content += renderElement(
 			'meta',
 			{

packages/astro/src/runtime/server/render/page.ts

@@ -5,6 +5,7 @@ import { encoder } from './common.js';
 import { type NonAstroPageComponent, renderComponentToString } from './component.js';
 import type { AstroComponentFactory } from './index.js';
 import { isDeno, isNode } from './util.js';
+import { renderCspContent } from './csp.js';
 
 export async function renderPage(
 	result: SSRResult,
@@ -31,12 +32,15 @@ export async function renderPage(
 		);
 
 		const bytes = encoder.encode(str);
-
+		const headers = new Headers([
+			['Content-Type', 'text/html'],
+			['Content-Length', bytes.byteLength.toString()],
+		]);
+		if (result.cspDestination === 'header') {
+			headers.set('content-security-policy', renderCspContent(result));
+		}
 		return new Response(bytes, {
-			headers: new Headers([
-				['Content-Type', 'text/html'],
-				['Content-Length', bytes.byteLength.toString()],
-			]),
+			headers,
 		});
 	}
 
@@ -74,6 +78,9 @@ export async function renderPage(
 	// Create final response from body
 	const init = result.response;
 	const headers = new Headers(init.headers);
+	if (result.shouldInjectCspMetaTags && result.cspDestination === 'header') {
+		headers.set('content-security-policy', renderCspContent(result));
+	}
 	// For non-streaming, convert string to byte array to calculate Content-Length
 	if (!streaming && typeof body === 'string') {
 		body = encoder.encode(body);

packages/astro/src/runtime/server/render/server-islands.ts

@@ -136,7 +136,7 @@ let response = await fetch('${serverIslandUrl}', {
 
 		const content = `${method}replaceServerIsland('${hostId}', response);`;
 
-		if (this.result.shouldInjectCspMetaTags) {
+		if (this.result.cspDestination) {
 			this.result._metadata.extraScriptHashes.push(
 				await generateCspDigest(SERVER_ISLAND_REPLACER, this.result.cspAlgorithm),
 			);

packages/astro/src/types/public/integrations.ts

@@ -108,7 +108,7 @@ export interface AstroAdapter {
 
 export type AstroAdapterFeatureMap = {
 	/**
-	 * The adapter is able serve static pages
+	 * The adapter is able to serve static pages
 	 */
 	staticOutput?: AdapterSupport;
 
@@ -136,6 +136,12 @@ export type AstroAdapterFeatureMap = {
 	 * The adapter supports image transformation using the built-in Sharp image service
 	 */
 	sharpImageService?: AdapterSupport;
+
+	/**
+	 * The adapter is able to provide CSP hashes using the Response header `Content-Security-Policy`. Either via hosting configuration
+	 * for static pages or at runtime using `Response` headers for dynamic pages.
+	 */
+	cspHeader?: AdapterSupport;
 };
 
 /**
@@ -197,21 +203,26 @@ export interface BaseIntegrationHooks {
 		address: AddressInfo;
 		logger: AstroIntegrationLogger;
 	}) => void | Promise<void>;
-	'astro:server:done': (options: { logger: AstroIntegrationLogger }) => void | Promise<void>;
+	'astro:server:done': (options: {
+		logger: AstroIntegrationLogger;
+	}) => void | Promise<void>;
 	'astro:build:ssr': (options: {
 		manifest: SerializedSSRManifest;
 		/**
 		 * This maps a {@link RouteData} to an {@link URL}, this URL represents
 		 * the physical file you should import.
 		 */
+		// TODO: Change in Astro 6.0
 		entryPoints: Map<IntegrationRouteData, URL>;
 		/**
 		 * File path of the emitted middleware
 		 */
 		middlewareEntryPoint: URL | undefined;
 		logger: AstroIntegrationLogger;
 	}) => void | Promise<void>;
-	'astro:build:start': (options: { logger: AstroIntegrationLogger }) => void | Promise<void>;
+	'astro:build:start': (options: {
+		logger: AstroIntegrationLogger;
+	}) => void | Promise<void>;
 	'astro:build:setup': (options: {
 		vite: ViteInlineConfig;
 		pages: Map<string, PageBuildData>;

packages/astro/src/types/public/internal.ts

@@ -250,6 +250,7 @@ export interface SSRResult {
 	/**
 	 * Whether Astro should inject the CSP <meta> tag into the head of the component.
 	 */
+	cspDestination: 'header' | 'meta';
 	shouldInjectCspMetaTags: boolean;
 	cspAlgorithm: SSRManifestCSP['algorithm'];
 	scriptHashes: SSRManifestCSP['scriptHashes'];

packages/astro/test/csp.test.js

@@ -268,4 +268,34 @@ describe('CSP', () => {
 		const meta = $('meta[http-equiv="Content-Security-Policy"]');
 		assert.ok(meta.attr('content').toString().includes('strict-dynamic;'));
 	});
+
+	it('should serve hashes via headers for dynamic pages, when the strategy is "auto"', async () => {
+		fixture = await loadFixture({
+			root: './fixtures/csp/',
+			adapter: testAdapter(),
+			experimental: {
+				csp: true,
+			},
+		});
+		await fixture.build();
+		app = await fixture.loadTestAdapterApp();
+
+		const request = new Request('http://example.com/ssr');
+		const response = await app.render(request);
+
+		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("script-src 'self'"));
+		// correctness for hashes
+		assert.ok(header.includes("default-src 'self';"));
+
+		const html = await response.text();
+		const $ = cheerio.load(html);
+
+		const meta = $('meta[http-equiv="Content-Security-Policy"]');
+		assert.equal(meta.attr('content'), undefined, 'meta tag should not be present');
+	});
 });

packages/astro/test/fixtures/csp/src/pages/ssr.astro

@@ -0,0 +1,20 @@
+---
+export const prerender = false;
+
+Astro.insertStyleResource("https://styles.cdn.example.com");
+Astro.insertStyleHash('sha256-customHash');
+Astro.insertDirective("default-src 'self'");
+---
+
+<html lang="en">
+<head>
+	<meta charset="utf-8"/>
+	<meta name="viewport" content="width=device-width"/>
+	<title>Styles</title>
+</head>
+<body>
+<main>
+	<h1>Styles</h1>
+</main>
+</body>
+</html>

packages/astro/test/test-adapter.js

@@ -1,4 +1,4 @@
-import { viteID } from '../dist/core/util.js';
+import { viteID } from "../dist/core/util.js";
 
 /**
  * @typedef {import('../src/types/public/integrations.js').AstroAdapter} AstroAdapter
@@ -30,23 +30,25 @@ export default function ({
 	env,
 } = {}) {
 	return {
-		name: 'my-ssr-adapter',
+		name: "my-ssr-adapter",
 		hooks: {
-			'astro:config:setup': ({ updateConfig }) => {
+			"astro:config:setup": ({ updateConfig }) => {
 				updateConfig({
 					vite: {
 						plugins: [
 							{
 								resolveId(id) {
-									if (id === '@my-ssr') {
+									if (id === "@my-ssr") {
 										return id;
-									} else if (id === 'astro/app') {
-										const viteId = viteID(new URL('../dist/core/app/index.js', import.meta.url));
+									} else if (id === "astro/app") {
+										const viteId = viteID(
+											new URL("../dist/core/app/index.js", import.meta.url),
+										);
 										return viteId;
 									}
 								},
 								load(id) {
-									if (id === '@my-ssr') {
+									if (id === "@my-ssr") {
 										return {
 											code: `
 											import { App } from 'astro/app';
@@ -61,7 +63,7 @@ export default function ({
 													return data[key];
 												}))
 												.catch(() => {});`
-													: ''
+													: ""
 											}
 
 											class MyApp extends App {
@@ -82,7 +84,7 @@ export default function ({
 													${
 														provideAddress
 															? `request[Symbol.for('astro.clientAddress')] = clientAddress ?? '0.0.0.0';`
-															: ''
+															: ""
 													}
 													return super.render(request, { routeData, locals, addCookieHeader, prerenderedErrorPageFetch });
 												}
@@ -103,26 +105,27 @@ export default function ({
 					},
 				});
 			},
-			'astro:config:done': ({ setAdapter }) => {
+			"astro:config:done": ({ setAdapter }) => {
 				setAdapter({
-					name: 'my-ssr-adapter',
-					serverEntrypoint: '@my-ssr',
-					exports: ['manifest', 'createApp'],
+					name: "my-ssr-adapter",
+					serverEntrypoint: "@my-ssr",
+					exports: ["manifest", "createApp"],
 					supportedAstroFeatures: {
-						serverOutput: 'stable',
-						envGetSecret: 'stable',
-						staticOutput: 'stable',
-						hybridOutput: 'stable',
-						assets: 'stable',
-						i18nDomains: 'stable',
+						serverOutput: "stable",
+						envGetSecret: "stable",
+						staticOutput: "stable",
+						hybridOutput: "stable",
+						assets: "stable",
+						i18nDomains: "stable",
+						cspHeader: "stable",
 					},
 					adapterFeatures: {
-						buildOutput: 'server',
+						buildOutput: "server",
 					},
 					...extendAdapter,
 				});
 			},
-			'astro:build:ssr': ({ entryPoints, middlewareEntryPoint, manifest }) => {
+			"astro:build:ssr": ({ entryPoints, middlewareEntryPoint, manifest }) => {
 				if (setEntryPoints) {
 					setEntryPoints(entryPoints);
 				}
@@ -133,7 +136,7 @@ export default function ({
 					setManifest(manifest);
 				}
 			},
-			'astro:build:done': ({ routes }) => {
+			"astro:build:done": ({ routes }) => {
 				if (setRoutes) {
 					setRoutes(routes);
 				}