From d98265ad9d41d3e186d1fecd41a9e013e3e30208 Mon Sep 17 00:00:00 2001
From: pgjones <philip.graham.jones@googlemail.com>
Date: Tue, 26 May 2020 11:19:54 +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).
---
 runtime/src/server/middleware/get_page_handler.ts | 8 ++++----
 site/content/docs/12-security.md                  | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

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/