[WIP] Strong CSP Support

README.md

@@ -60,6 +60,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)
@@ -1196,6 +1197,21 @@ 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 = {
+  contentSecurityPolicy: "default-src 'self';"
+}
+```
+
+Interestingly, due to the way error handling works in Next.js, you will have to use [custom error handling](#custom-error-handling) to avoid an inline style violation, but this is very easy to do.
+
+Note: In order to support dynamic styles Next.js uses a `nonce` for `style-src`. This is done automatically. If you use a different CSS-in-JS library, you can use the `csp.nonce` document parameter to get the nonce set in the header. `csp.policy` is the CSP policy before nonce is added. `csp.isDisabled` is what you can use to see if CSP is enabled.
+
 #### 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/plugins/pages-plugin.js

@@ -10,7 +10,7 @@ export default class PagesPlugin {
     compiler.hooks.compilation.tap('PagesPlugin', (compilation) => {
       // This hook is triggered right before a module gets wrapped into it's initializing function,
       // For example when you look at the source of a bundle you'll see an object holding `'pages/_app.js': function(module, etc, etc)`
-      // This hook triggers right before that code is added and wraps the module into `__NEXT_REGISTER_PAGE` when the module is a page
+      // This hook triggers right before that code is added and wraps the module into `window._routes.push` when the module is a page
       // The reason we're doing this is that we don't want to execute the page code which has potential side effects before switching to a route
       compilation.moduleTemplates.javascript.hooks.render.tap('PagesPluginRenderPageRegister', (moduleSourcePostModule, module, options) => {
         const {chunk} = options
@@ -41,10 +41,10 @@ export default class PagesPlugin {
         routeName = `/${routeName.replace(/(^|\/)index$/, '')}`
 
         const source = new ConcatSource(
-          `__NEXT_REGISTER_PAGE('${routeName}', function() {\n`,
+          `( window._routes || (window._routes = {}) )["${routeName}"] = function () {\n`,
           moduleSourcePostModule,
-          '\nreturn { page: module.exports.default }',
-          '});'
+          '\nreturn { page: module.exports.default }\n',
+          '};'
         )
 
         return source

client/index.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import htmlescape from 'htmlescape'
 import HeadManager from './head-manager'
 import { createRouter } from '../lib/router'
 import EventEmitter from '../lib/EventEmitter'
-import { loadGetInitialProps, getURL } from '../lib/utils'
+import { loadGetInitialProps, getURL, getNextData } from '../lib/utils'
 import PageLoader from '../lib/page-loader'
 import * as asset from '../lib/asset'
 import * as envConfig from '../lib/runtime-config'
@@ -20,19 +21,17 @@ if (!window.Promise) {
 }
 
 const {
-  __NEXT_DATA__: {
-    props,
-    err,
-    page,
-    pathname,
-    query,
-    buildId,
-    assetPrefix,
-    runtimeConfig,
-    dynamicIds
-  },
-  location
-} = window
+  props,
+  err,
+  page,
+  pathname,
+  query,
+  buildId,
+  assetPrefix,
+  runtimeConfig,
+  dynamicIds
+} = getNextData()
+const { location } = window
 
 const prefix = assetPrefix || ''
 
@@ -50,11 +49,31 @@ envConfig.setConfig({
 const asPath = getURL()
 
 const pageLoader = new PageLoader(buildId, prefix)
-window.__NEXT_LOADED_PAGES__.forEach(([r, f]) => {
-  pageLoader.registerPage(r, f)
+if (page === '_error') {
+  pageLoader.registerPage(htmlescape(pathname), () => {
+    const e = new Error(`Page does not exist: ${htmlescape(pathname)}`)
+    e.statusCode = 404
+    return { error: e }
+  })
+}
+
+window._routes = new Proxy(window._routes, {
+  set: (obj, prop, value) => {
+    if (prop !== 'string' || value !== 'function') return
+
+    pageLoader.registerPage(prop, value)
+    delete obj[prop]
+
+    return false
+  }
 })
-delete window.__NEXT_LOADED_PAGES__
-window.__NEXT_REGISTER_PAGE = pageLoader.registerPage.bind(pageLoader)
+
+const deleteIndexes = []
+for (let [name, fn] of Object.entries(window._routes)) {
+  pageLoader.registerPage(name, fn)
+  deleteIndexes.push(name)
+}
+deleteIndexes.forEach(name => delete window._routes[name])
 
 const headManager = new HeadManager()
 const appContainer = document.getElementById('__next')

client/next-dev.js

@@ -1,6 +1,7 @@
 import initNext, * as next from './'
 import initOnDemandEntries from './on-demand-entries-client'
 import initWebpackHMR from './webpack-hot-middleware-client'
+import { getNextData } from '../lib/utils'
 
 // Temporary workaround for the issue described here:
 // https://github.com/zeit/next.js/issues/3775#issuecomment-407438123
@@ -9,10 +10,8 @@ import initWebpackHMR from './webpack-hot-middleware-client'
 import('./noop')
 
 const {
-  __NEXT_DATA__: {
-    assetPrefix
-  }
-} = window
+  assetPrefix
+} = getNextData()
 
 const prefix = assetPrefix || ''
 const webpackHMR = initWebpackHMR({assetPrefix: prefix})