rework csp report header to work with inline script hashes and strict…

…-dynamic to allow those inline scripts to load further scripts
guardian · Jul 10, 2024 · 1c9eaa9 · 1c9eaa9
1 parent 2f27a0c
commit 1c9eaa9
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 89 deletions.
diff --git a/server/html.ts b/server/html.ts
@@ -1,5 +1,11 @@
+import { createHash } from 'crypto';
 import type { Globals } from '../shared/globals';
 
+interface HtmlAndScriptHashes {
+	body: string;
+	hashes: string[];
+}
+
 declare let WEBPACK_BUILD: string;
 
 /**
@@ -11,33 +17,40 @@ declare let WEBPACK_BUILD: string;
  */
 
 const insertGlobals = (globals: Globals) => {
-	return `<script>
-  window.guardian = ${JSON.stringify(globals)}
-  </script>`;
+	return `window.guardian = ${JSON.stringify(globals)}`;
 };
 
-const html: (_: {
+const htmlAndScriptHashes: (_: {
 	readonly title: string;
 	readonly src: string;
 	readonly globals: Globals;
-}) => string = ({ title, src, globals }) => `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1">
-      <title>${title}</title>
-
-      ${insertGlobals(globals)}
-
-      <link rel="shortcut icon" type="image/png" href="https://assets.guim.co.uk/images/favicons/46bd2faa1ab438684a6d4528a655a8bd/32x32.ico" />
-    </head>
-    <body style="margin:0">
-      <div id="app"></div>
-      </body>
-      <script src="${src}?release=${WEBPACK_BUILD}"></script>
-      
-  </html>
-`;
-
-export { html };
+}) => HtmlAndScriptHashes = ({ title, src, globals }) => {
+	const mainScriptBundleSrc = `var s = document.createElement("script"); s.src = "${src}?release=${WEBPACK_BUILD}";document.body.appendChild(s);`;
+	const setGuardianWindowSrc = insertGlobals(globals);
+	return {
+		body: `
+			<!DOCTYPE html>
+			<html lang="en">
+				<head>
+					<meta charset="utf-8">
+					<meta name="viewport" content="width=device-width, initial-scale=1">
+					<title>${title}</title>
+
+					<script>${setGuardianWindowSrc}</script>
+
+					<link rel="shortcut icon" type="image/png" href="https://assets.guim.co.uk/images/favicons/46bd2faa1ab438684a6d4528a655a8bd/32x32.ico" />
+				</head>
+				<body style="margin:0">
+					<div id="app"></div>
+				</body>
+				<script>${mainScriptBundleSrc}</script>
+			</html>
+		`,
+		hashes: [
+			createHash('sha256').update(mainScriptBundleSrc).digest('base64'),
+			createHash('sha256').update(setGuardianWindowSrc).digest('base64'),
+		],
+	};
+};
+
+export { htmlAndScriptHashes };
diff --git a/server/routes/api.ts b/server/routes/api.ts
@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/node';
 import { Router } from 'express';
-import { featureSwitches } from '@/shared/featureSwitches';
 import type { MembersDataApiResponse } from '@/shared/productResponse';
 import { isProduct, MDA_TEST_USER_HEADER } from '@/shared/productResponse';
 import {
@@ -354,12 +353,10 @@ router.get(
 router.post('/reminders/cancel', cancelReminderHandler);
 router.post('/reminders/reactivate', reactivateReminderHandler);
 
-if (featureSwitches.cspSecurityAudit) {
-	router.post('/csp-audit-report-endpoint', (req, res) => {
-		const parsedBody = JSON.parse(req.body.toString());
-		log.warn(JSON.stringify(parsedBody));
-		res.status(204).end();
-	});
-}
+router.post('/csp-audit-report-endpoint', (req, res) => {
+	const parsedBody = JSON.parse(req.body.toString());
+	log.warn(JSON.stringify(parsedBody));
+	res.status(204).end();
+});
 
 export { router };
diff --git a/server/routes/helpCentreFrontend.ts b/server/routes/helpCentreFrontend.ts
@@ -2,8 +2,9 @@ import { Router } from 'express';
 import type { Request, Response } from 'express';
 import { DEFAULT_PAGE_TITLE } from '../../shared/helpCentreConfig';
 import { conf } from '../config';
-import { html } from '../html';
+import { htmlAndScriptHashes } from '../html';
 import { withIdentity } from '../middleware/identityMiddleware';
+import { createCsp } from '../server';
 import {
 	clientDSN,
 	getRecaptchaPublicKey,
@@ -12,25 +13,31 @@ import {
 
 const router = Router();
 
-router.use(withIdentity());
-
-router.use(async (_: Request, res: Response) => {
+router.use(withIdentity(), async (_: Request, res: Response) => {
 	const title = DEFAULT_PAGE_TITLE;
 	const src = '/static/help-centre.js';
 
-	res.send(
-		html({
-			title,
-			src,
-			globals: {
-				domain: conf.DOMAIN,
-				dsn: clientDSN,
-				identityDetails: res.locals.identity,
-				recaptchaPublicKey: await getRecaptchaPublicKey(),
-				...(await getStripePublicKeys()),
-			},
-		}),
-	);
+	const htmlStrAndScriptHashes = htmlAndScriptHashes({
+		title,
+		src,
+		globals: {
+			domain: conf.DOMAIN,
+			dsn: clientDSN,
+			identityDetails: res.locals.identity,
+			recaptchaPublicKey: await getRecaptchaPublicKey(),
+			...(await getStripePublicKeys()),
+		},
+	});
+
+	res.set({
+		'Report-To':
+			'{ "group": "csp-endpoint", "endpoints": [ { "url": "/api/csp-audit-report-endpoint" } ] }',
+		'Content-Security-Policy-Report-Only': createCsp(
+			htmlStrAndScriptHashes.hashes,
+		),
+	});
+
+	res.send(htmlStrAndScriptHashes);
 });
 
 export { router };
diff --git a/server/routes/mmaFrontend.ts b/server/routes/mmaFrontend.ts
@@ -1,8 +1,9 @@
 import type { Request, Response } from 'express';
 import { Router } from 'express';
 import { conf } from '../config';
-import { html } from '../html';
+import { htmlAndScriptHashes } from '../html';
 import { withIdentity } from '../middleware/identityMiddleware';
+import { createCsp } from '../server';
 import { csrfValidateMiddleware } from '../util';
 import {
 	clientDSN,
@@ -23,19 +24,27 @@ router.use(withIdentity(), async (req: Request, res: Response) => {
 		sameSite: 'strict',
 	});
 
-	res.send(
-		html({
-			title,
-			src,
-			globals: {
-				domain: conf.DOMAIN,
-				dsn: clientDSN,
-				identityDetails: res.locals.identity,
-				recaptchaPublicKey: await getRecaptchaPublicKey(),
-				...(await getStripePublicKeys()),
-			},
-		}),
-	);
+	const htmlStrAndScriptHashes = htmlAndScriptHashes({
+		title,
+		src,
+		globals: {
+			domain: conf.DOMAIN,
+			dsn: clientDSN,
+			identityDetails: res.locals.identity,
+			recaptchaPublicKey: await getRecaptchaPublicKey(),
+			...(await getStripePublicKeys()),
+		},
+	});
+
+	res.set({
+		'Report-To':
+			'{ "group": "csp-endpoint", "endpoints": [ { "url": "/api/csp-audit-report-endpoint" } ] }',
+		'Content-Security-Policy-Report-Only': createCsp(
+			htmlStrAndScriptHashes.hashes,
+		),
+	});
+
+	res.send(htmlStrAndScriptHashes.body);
 });
 
 export { router };
diff --git a/server/server.ts b/server/server.ts
@@ -4,7 +4,6 @@ import cookieParser from 'cookie-parser';
 import type { NextFunction, Request, RequestHandler, Response } from 'express';
 import { default as express } from 'express';
 import helmet from 'helmet';
-import { featureSwitches } from '../shared/featureSwitches';
 import { MAX_FILE_ATTACHMENT_SIZE_KB } from '../shared/fileUploadUtils';
 import { conf } from './config';
 import { log } from './log';
@@ -18,6 +17,7 @@ const server = express();
 const oktaConfig = await getConfig();
 
 declare let WEBPACK_BUILD: string;
+
 if (conf.SERVER_DSN) {
 	Sentry.init({
 		dsn: conf.SERVER_DSN,
@@ -40,29 +40,31 @@ if (conf.DOMAIN === 'thegulocal.com') {
 
 server.use(helmet());
 
-if (featureSwitches.cspSecurityAudit) {
-	const cspDefaultSrcAllowList = [
-		"'self'",
-		'https://sourcepoint.theguardian.com',
-		'https://gnm-app.quantummetric.com',
-		'https://assets.guim.co.uk',
-		'https://ophan.theguardian.com',
-	].join(' ');
-	const csp = [
-		'report-uri /api/csp-audit-report-endpoint',
-		'report-to csp-endpoint',
-		`default-src ${cspDefaultSrcAllowList}`,
-		`style-src 'unsafe-inline'`, // this is unsafe but needed for now for emotion
-	];
-	server.use(function (_: Request, res: Response, next: NextFunction) {
-		res.set({
-			'Report-To':
-				'{ "group": "csp-endpoint", "endpoints": [ { "url": "/api/csp-audit-report-endpoint" } ] }',
-			'Content-Security-Policy-Report-Only': `${csp.join('; ')};`,
-		});
-		next();
+export const createCsp = (hashes: string[]) => {
+	return `
+		script-src ${hashes
+			.map((hash) => `'sha256-${hash}'`)
+			.join(' ')} 'strict-dynamic';
+		style-src 'unsafe-inline';
+		object-src 'none';
+		base-uri 'none';
+	`;
+};
+
+server.use(function (_: Request, res: Response, next: NextFunction) {
+	/*
+	 * This sets a default csp header, this is overriden in:
+	 * - mmaFrontend.ts
+	 * - helpcentreFrontend.ts
+	 * Where a more specific policy with script hashes can be added
+	 */
+	res.set({
+		'Report-To':
+			'{ "group": "csp-endpoint", "endpoints": [ { "url": "/api/csp-audit-report-endpoint" } ] }',
+		'Content-Security-Policy-Report-Only': createCsp([]),
 	});
-}
+	next();
+});
 
 const serveStaticAssets: RequestHandler = express.static(__dirname + '/static');
 

diff --git a/shared/featureSwitches.ts b/shared/featureSwitches.ts
@@ -28,14 +28,12 @@ type FeatureSwitchName =
 	| 'appSubscriptions'
 	| 'supporterPlusUpdateAmount'
 	| 'digisubSave'
-	| 'cspSecurityAudit'
 	| 'supporterplusCancellationOffer';
 
 export const featureSwitches: Record<FeatureSwitchName, boolean> = {
 	exampleFeature: false,
 	appSubscriptions: true,
 	supporterPlusUpdateAmount: true,
 	digisubSave: true,
-	cspSecurityAudit: true,
 	supporterplusCancellationOffer: true,
 };