[WIP] Strong CSP Support

README.md

@@ -56,6 +56,7 @@ Next.js is a minimalistic framework for server-rendered React applications.
   - [Reusing the built-in error page](#reusing-the-built-in-error-page)
   - [Custom configuration](#custom-configuration)
     - [Setting a custom build directory](#setting-a-custom-build-directory)
+    - [Content Security Policy](#content-security-policy)
     - [Disabling etag generation](#disabling-etag-generation)
     - [Configuring the onDemandEntries](#configuring-the-ondemandentries)
     - [Configuring extensions looked for when resolving pages in `pages`](#configuring-extensions-looked-for-when-resolving-pages-in-pages)
@@ -1175,6 +1176,19 @@ module.exports = {
 }
 ```
 
+#### Content Security Policy
+
+Next.js supports [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). You can set your CSP Poliy in your Next.js configuration.
+
+```js
+// next.config.js
+module.exports = {
+  cspPolicy: "default-src 'self';"
+}
+```
+
+Node: In order to support dynamic styles nodejs uses a `nonce` for `style-src`. This is done automatically. If you use a different CSS-in-JS library, you can use the `cspNonce` document parameter to get the nonce set in the header.
+
 #### Disabling etag generation
 
 You can disable etag generation for HTML pages depending on your cache strategy. If no configuration is specified then Next will generate etags for every page.

build/webpack.js

@@ -17,8 +17,9 @@ import PagesManifestPlugin from './webpack/plugins/pages-manifest-plugin'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { ReactLoadablePlugin } from './webpack/plugins/react-loadable-plugin'
-import {SERVER_DIRECTORY, NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST, DEFAULT_PAGES_DIR, REACT_LOADABLE_MANIFEST, CLIENT_STATIC_FILES_RUNTIME_WEBPACK, CLIENT_STATIC_FILES_RUNTIME_MAIN} from '../lib/constants'
+import {SERVER_DIRECTORY, NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST, DEFAULT_PAGES_DIR, REACT_LOADABLE_MANIFEST, CLIENT_STATIC_FILES_RUNTIME_PATH, CLIENT_STATIC_FILES_RUNTIME_WEBPACK, CLIENT_STATIC_FILES_RUNTIME_MAIN} from '../lib/constants'
 import AutoDllPlugin from 'autodll-webpack-plugin'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
 
 // The externals config makes sure that
 // on the server side when modules are
@@ -254,7 +255,12 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
       !isServer && new BuildManifestPlugin(),
       !isServer && new PagesPlugin(),
       isServer && new NextJsSsrImportPlugin(),
-      isServer && new NextJsSSRModuleCachePlugin({outputPath})
+      isServer && new NextJsSSRModuleCachePlugin({outputPath}),
+      !isServer && new CopyWebpackPlugin([{
+        from: path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'bootstrap.js'),
+        to: CLIENT_STATIC_FILES_RUNTIME_PATH,
+        cache: true
+      }])
     ].filter(Boolean)
   }
 

client/bootstrap.js

@@ -0,0 +1,17 @@
+window.module = {}
+window.__NEXT_DATA__ = JSON.parse(
+  document
+    .getElementById('server-app-state')
+    .textContent.replace(/%3C\/script%3E/g, '</script>')
+)
+window.__NEXT_LOADED_PAGES__ = []
+window.__NEXT_REGISTER_PAGE = function (route, fn) {
+  window.__NEXT_LOADED_PAGES__.push({ route: route, fn: fn })
+}
+if (window.__NEXT_DATA__.page === '_error') {
+  window.__NEXT_REGISTER_PAGE(window.__NEXT_DATA__.cleanPathname, function () {
+    var error = new Error(`Page does not exist: ${window.__NEXT_DATA__.cleanPathname}`)
+    error.statusCode = 404
+    return { error: error }
+  })
+}

flow-typed/npm/copy-webpack-plugin_vx.x.x.js

@@ -0,0 +1,3 @@
+declare module 'copy-webpack-plugin' {
+  declare module.exports: any;
+}

package.json

@@ -80,6 +80,7 @@
     "babel-plugin-react-require": "3.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.13",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
+    "copy-webpack-plugin": "4.5.2",
     "cross-spawn": "5.1.0",
     "del": "3.0.0",
     "etag": "1.8.1",

server/config.js

@@ -13,6 +13,7 @@ export type NextConfig = {|
   distDir: string,
   assetPrefix: string,
   configOrigin: string,
+  cspPolicy: null | string,
   useFileSystemPublicRoutes: boolean,
   generateBuildId: () => string,
   generateEtags: boolean,
@@ -26,6 +27,7 @@ const defaultConfig: NextConfig = {
   distDir: '.next',
   assetPrefix: '',
   configOrigin: 'default',
+  cspPolicy: null,
   useFileSystemPublicRoutes: true,
   generateBuildId: () => {
     // nanoid is a small url-safe uuid generator