From 432a30ae3db9df1f52675dc705bd400395dfc0f6 Mon Sep 17 00:00:00 2001
From: pgjones <philip.graham.jones@googlemail.com>
Date: Fri, 29 May 2020 16:07:08 +0100
Subject: [PATCH] Allow scripts to contain a style CSP-nonce

This follows on from e377515867e4011dbc92556e9361ebce6e24deba which
introduced a script nonce. The same nonce is now used for the inline
styles, allowing a stronger CSP (nonce over unsafe-inline).

This also includes a test for the existing script nonce.
---
 .../src/server/middleware/get_page_handler.ts |  8 +-
 site/content/docs/12-security.md              |  6 +-
 test/apps/csp-nonce/rollup.config.js          | 58 +++++++++++++
 test/apps/csp-nonce/src/client.js             |  9 ++
 test/apps/csp-nonce/src/routes/_error.svelte  |  3 +
 test/apps/csp-nonce/src/routes/index.svelte   |  7 ++
 test/apps/csp-nonce/src/server.js             | 13 +++
 test/apps/csp-nonce/src/service-worker.js     | 82 +++++++++++++++++++
 test/apps/csp-nonce/src/template.html         | 14 ++++
 test/apps/csp-nonce/test.ts                   | 35 ++++++++
 10 files changed, 228 insertions(+), 7 deletions(-)
 create mode 100644 test/apps/csp-nonce/rollup.config.js
 create mode 100644 test/apps/csp-nonce/src/client.js
 create mode 100644 test/apps/csp-nonce/src/routes/_error.svelte
 create mode 100644 test/apps/csp-nonce/src/routes/index.svelte
 create mode 100644 test/apps/csp-nonce/src/server.js
 create mode 100644 test/apps/csp-nonce/src/service-worker.js
 create mode 100644 test/apps/csp-nonce/src/template.html
 create mode 100644 test/apps/csp-nonce/test.ts

diff --git a/runtime/src/server/middleware/get_page_handler.ts b/runtime/src/server/middleware/get_page_handler.ts
index 53f413640..16a0768ba 100644
--- a/runtime/src/server/middleware/get_page_handler.ts
+++ b/runtime/src/server/middleware/get_page_handler.ts
@@ -292,6 +292,9 @@ export function get_page_handler(
 				script += `</script><script src="${main}">`;
 			}
 
+			// users can set a CSP nonce using res.locals.nonce
+			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
+
 			let styles: string;
 
 			// TODO make this consistent across apps
@@ -314,12 +317,9 @@ export function get_page_handler(
 					.map(href => `<link rel="stylesheet" href="client/${href}">`)
 					.join('')
 			} else {
-				styles = (css && css.code ? `<style>${css.code}</style>` : '');
+				styles = (css && css.code ? `<style${nonce_attr}>${css.code}</style>` : '');
 			}
 
-			// users can set a CSP nonce using res.locals.nonce
-			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
-
 			const body = template()
 				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
 				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
diff --git a/site/content/docs/12-security.md b/site/content/docs/12-security.md
index 036568162..088d39510 100644
--- a/site/content/docs/12-security.md
+++ b/site/content/docs/12-security.md
@@ -6,9 +6,9 @@ By default, Sapper does not add security headers to your app, but you may add th
 
 ### Content Security Policy (CSP)
 
-Sapper generates inline `<script>`s, which can fail to execute if [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers disallow arbitrary script execution (`unsafe-inline`).
+Sapper generates inline `<script>`s and `<style>`s, which can fail to execute if [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers disallow arbitrary script execution (`unsafe-inline`) or style parsing (`unsafe-inline`).
 
-To work around this, Sapper can inject a [nonce](https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/) which can be configured with middleware to emit the proper CSP headers. Here is an example using [Express][] and [Helmet][]:
+To work around this, Sapper can inject a [nonce](https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/) which can be configured with middleware to emit the proper CSP headers. The nonce will be applied to the inline `<script>`s and `<style>`s. Here is an example using [Express][] and [Helmet][]:
 
 ```js
 // server.js
@@ -36,4 +36,4 @@ Using `res.locals.nonce` in this way follows the convention set by
 [Helmet's CSP docs](https://helmetjs.github.io/docs/csp/#generating-nonces).
 
 [Express]: https://expressjs.com/
-[Helmet]: https://helmetjs.github.io/
\ No newline at end of file
+[Helmet]: https://helmetjs.github.io/
diff --git a/test/apps/csp-nonce/rollup.config.js b/test/apps/csp-nonce/rollup.config.js
new file mode 100644
index 000000000..d2664b538
--- /dev/null
+++ b/test/apps/csp-nonce/rollup.config.js
@@ -0,0 +1,58 @@
+import resolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import svelte from 'rollup-plugin-svelte';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+
+const config = require('../../../config/rollup.js');
+
+export default {
+	client: {
+		input: config.client.input(),
+		output: config.client.output(),
+		plugins: [
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				dev,
+				hydratable: true,
+				emitCss: false
+			}),
+			resolve()
+		]
+	},
+
+	server: {
+		input: config.server.input(),
+		output: config.server.output(),
+		plugins: [
+			replace({
+				'process.browser': false,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				generate: 'ssr',
+				dev
+			}),
+			resolve({
+				preferBuiltins: true
+			})
+		],
+		external: ['sirv', 'polka']
+	},
+
+	serviceworker: {
+		input: config.serviceworker.input(),
+		output: config.serviceworker.output(),
+		plugins: [
+			resolve(),
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			})
+		]
+	}
+};
diff --git a/test/apps/csp-nonce/src/client.js b/test/apps/csp-nonce/src/client.js
new file mode 100644
index 000000000..6cce7e658
--- /dev/null
+++ b/test/apps/csp-nonce/src/client.js
@@ -0,0 +1,9 @@
+import * as sapper from '@sapper/app';
+
+window.start = () => sapper.start({
+	target: document.querySelector('#sapper')
+});
+
+window.prefetchRoutes = () => sapper.prefetchRoutes();
+window.prefetch = href => sapper.prefetch(href);
+window.goto = href => sapper.goto(href);
\ No newline at end of file
diff --git a/test/apps/csp-nonce/src/routes/_error.svelte b/test/apps/csp-nonce/src/routes/_error.svelte
new file mode 100644
index 000000000..4cd55d28d
--- /dev/null
+++ b/test/apps/csp-nonce/src/routes/_error.svelte
@@ -0,0 +1,3 @@
+<h1>{status}</h1>
+
+<p>{error.message}</p>
\ No newline at end of file
diff --git a/test/apps/csp-nonce/src/routes/index.svelte b/test/apps/csp-nonce/src/routes/index.svelte
new file mode 100644
index 000000000..c49878c37
--- /dev/null
+++ b/test/apps/csp-nonce/src/routes/index.svelte
@@ -0,0 +1,7 @@
+<style>
+	h1 {
+		color: red;
+	}
+</style>
+
+<h1>Great success!</h1>
diff --git a/test/apps/csp-nonce/src/server.js b/test/apps/csp-nonce/src/server.js
new file mode 100644
index 000000000..0b9c9d0b9
--- /dev/null
+++ b/test/apps/csp-nonce/src/server.js
@@ -0,0 +1,13 @@
+import polka from 'polka';
+import * as sapper from '@sapper/server';
+
+import { start } from '../../common.js';
+
+const app = polka()
+	.use((req, res, next) => {
+		res.locals = { nonce: "nonce"};
+		next();
+	})
+	.use(sapper.middleware());
+
+start(app);
diff --git a/test/apps/csp-nonce/src/service-worker.js b/test/apps/csp-nonce/src/service-worker.js
new file mode 100644
index 000000000..8adb97a43
--- /dev/null
+++ b/test/apps/csp-nonce/src/service-worker.js
@@ -0,0 +1,82 @@
+import * as sapper from '@sapper/service-worker';
+
+const ASSETS = `cache${sapper.timestamp}`;
+
+// `shell` is an array of all the files generated by webpack,
+// `files` is an array of everything in the `static` directory
+const to_cache = sapper.shell.concat(sapper.files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET') return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve assets and webpack-generated files from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${sapper.timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});
diff --git a/test/apps/csp-nonce/src/template.html b/test/apps/csp-nonce/src/template.html
new file mode 100644
index 000000000..0eb1f3ba4
--- /dev/null
+++ b/test/apps/csp-nonce/src/template.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+
+	%sapper.base%
+	%sapper.styles%
+	%sapper.head%
+</head>
+<body>
+	<div id='sapper'>%sapper.html%</div>
+	%sapper.scripts%
+</body>
+</html>
diff --git a/test/apps/csp-nonce/test.ts b/test/apps/csp-nonce/test.ts
new file mode 100644
index 000000000..06c1f2593
--- /dev/null
+++ b/test/apps/csp-nonce/test.ts
@@ -0,0 +1,35 @@
+import * as assert from 'assert';
+import { build } from '../../../api';
+import { AppRunner } from '../AppRunner';
+
+describe('csp-nonce', function() {
+	this.timeout(10000);
+
+	let r: AppRunner;
+
+	// hooks
+	before('build app', () => build({ cwd: __dirname }));
+	before('start runner', async () => {
+		r = await new AppRunner().start(__dirname);
+	});
+
+	after(() => r && r.end());
+
+	it('includes a script nonce', async () => {
+		await r.load('/');
+
+		assert.equal(
+			await r.page.$eval('script:not([src])', node => node.getAttribute('nonce')),
+			'nonce'
+        );
+	});
+
+	it('includes a style nonce', async () => {
+		await r.load('/');
+
+		assert.equal(
+			await r.page.$eval('style', node => node.getAttribute('nonce')),
+			'nonce'
+        );
+	});
+});