vercel · dav-is · Aug 10, 2018 · Aug 10, 2018 · Aug 10, 2018 · Aug 10, 2018
diff --git a/examples/with-dynamic-csp/README.md b/examples/with-dynamic-csp/README.md
@@ -0,0 +1,48 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-dynamic-csp)
+
+# Strict CSP example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-dynamic-csp with-dynamic-csp-app
+# or
+yarn create next-app --example with-dynamic-csp with-dynamic-csp-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-dynamic-csp
+cd with-dynamic-csp
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+**If** you are having difficulty setting up a *standard* Content Security Policy, then you might need to use a [dynamic policy](https://csp.withgoogle.com/docs/strict-csp.html). This is less secure than effective whitelisting, but if your project cannot employ effective whitelisting, this can be a secure alternative. For it to work, we need to generate a nonce on every request, so this is limited to server rendered projects.
+
+Next.js supports generating nonces for our CSP out of the box.
+
+Note that when using `style-src 'nonce-{style-nonce}' 'unsafe-inline';` the nonce is automatically applied to your `styled-jsx` styles when using `<style jsx>`. This is the most secure way of using `styled-jsx`. Next.js adds a meta tag to support [Material UI's CSS in JSS](https://material-ui.com/css-in-js/advanced/#content-security-policy-csp) or when using [JSS](https://github.com/cssinjs/jss/blob/master/docs/csp.md) as well.
diff --git a/examples/with-dynamic-csp/next.config.js b/examples/with-dynamic-csp/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  contentSecurityPolicy: "base-uri 'none';object-src 'none';script-src: 'nonce-{script-nonce}' 'strict-dynamic' 'unsafe-inline' http: https:;style-src 'nonce-{style-nonce}' 'unsafe-inline';"
+}
diff --git a/examples/with-strict-csp-hash/package.json → examples/with-dynamic-csp/package.json b/examples/with-strict-csp-hash/package.json → examples/with-dynamic-csp/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "with-strict-csp-hash",
-  "version": "1.0.0",
+  "name": "with-dynamic-csp",
+  "version": "2.0.0",
   "scripts": {
     "dev": "next",
     "build": "next build",
@@ -10,6 +10,5 @@
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
-  },
-  "license": "ISC"
+  }
 }
diff --git a/examples/with-strict-csp/pages/_document.js → examples/with-dynamic-csp/pages/_document.js b/examples/with-strict-csp/pages/_document.js → examples/with-dynamic-csp/pages/_document.js
@@ -7,20 +7,26 @@ const inlineScript = (body, nonce) => (
 export default class MyDocument extends Document {
   static async getInitialProps (ctx) {
     const initialProps = await Document.getInitialProps(ctx)
-    const { nonce } = ctx.res.locals
-    return { ...initialProps, nonce }
+    const { scriptNonce, styleNonce } = ctx
+    return { ...initialProps, scriptNonce, styleNonce }
   }
 
   render () {
-    const { nonce } = this.props
+    const { scriptNonce, styleNonce } = this.props
     return (
       <html>
-        <Head nonce={nonce}>
-          {inlineScript(`console.log('Inline script with nonce')`, nonce)}
+        <Head>
+          <style nonce={styleNonce}>{`
+            body {
+              background: black;
+              color: white;
+            }
+          `}</style>
+          {inlineScript(`console.log('Inline script with nonce')`, scriptNonce)}
         </Head>
         <body>
           <Main />
-          <NextScript nonce={nonce} />
+          <NextScript />
         </body>
       </html>
     )

diff --git a/examples/with-dynamic-csp/pages/index.js b/examples/with-dynamic-csp/pages/index.js
@@ -0,0 +1,8 @@
+export default () => <div>
+  <h1>Hello World</h1>
+  <style jsx>{`
+    h1 {
+      font-size: 150px;
+    }
+  `}</style>
+</div>
diff --git a/examples/with-strict-csp-hash/README.md b/examples/with-strict-csp-hash/README.md
diff --git a/examples/with-strict-csp-hash/pages/_document.js b/examples/with-strict-csp-hash/pages/_document.js
diff --git a/examples/with-strict-csp-hash/pages/index.js b/examples/with-strict-csp-hash/pages/index.js
diff --git a/examples/with-strict-csp/README.md b/examples/with-strict-csp/README.md
diff --git a/examples/with-strict-csp/csp.js b/examples/with-strict-csp/csp.js
diff --git a/examples/with-strict-csp/package.json b/examples/with-strict-csp/package.json
diff --git a/examples/with-strict-csp/pages/index.js b/examples/with-strict-csp/pages/index.js
diff --git a/examples/with-strict-csp/server.js b/examples/with-strict-csp/server.js
diff --git a/packages/next-server/server/config.js b/packages/next-server/server/config.js
@@ -11,6 +11,7 @@ const defaultConfig = {
   useFileSystemPublicRoutes: true,
   generateBuildId: () => null,
   generateEtags: true,
+  contentSecurityPolicy: null,
   pageExtensions: ['jsx', 'js']
 }
 

diff --git a/packages/next-server/server/next-server.ts b/packages/next-server/server/next-server.ts
@@ -4,6 +4,7 @@ import { resolve, join, sep } from 'path'
 import { parse as parseUrl, UrlWithParsedQuery } from 'url'
 import { parse as parseQs, ParsedUrlQuery } from 'querystring'
 import fs from 'fs'
+import nanoid from 'nanoid'
 import {renderToHTML} from './render'
 import {sendHTML} from './send-html'
 import {serveStatic} from './serve-static'
@@ -31,6 +32,9 @@ export default class Server {
   buildId: string
   renderOpts: {
     staticMarkup: boolean,
+    csp?: string,
+    scriptNonce?: string,
+    styleNonce?: string,
     distDir: string,
     buildId: string,
     generateEtags: boolean,
@@ -203,6 +207,18 @@ export default class Server {
   }
 
   public async render (req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery = {}, parsedUrl?: UrlWithParsedQuery): Promise<void> {
+    if (this.nextConfig.contentSecurityPolicy) {
+      if (!this.renderOpts.staticMarkup) {
+        this.renderOpts.csp = this.nextConfig.contentSecurityPolicy
+          .replace(/{script-nonce}/gi, () => (this.renderOpts.scriptNonce = this.genNonce()))
+          .replace(/{style-nonce}/gi, () => (this.renderOpts.styleNonce = this.genNonce()))
+
+        this.renderOpts.csp && res.setHeader('Content-Security-Policy', this.renderOpts.csp)
+      } else {
+        this.renderOpts.csp = this.nextConfig.contentSecurityPolicy
+      }
+    }
+
     const url: any = req.url
     if (isInternalUrl(url)) {
       return this.handleRequest(req, res, parsedUrl)
@@ -304,4 +320,8 @@ export default class Server {
       throw err
     }
   }
+
+  genNonce () {
+    return Buffer.from(nanoid(32)).toString('base64')
+  }
 }