Allow scripts to contain a style CSP-nonce

This follows on from e377515 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

@@ -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>`)

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/
+[Helmet]: https://helmetjs.github.io/