Move Content-Security-Policy to configs (#121)

1. Creates a separate configuration for CSP: `csp.config.js`
2. Removes `App.getIniaialProps()` to re-enable static optimisations
3. Adds the header via `next.config.js`' `header()` method
4. Renames `config.js` to `env.config.js` to make it more clear

csp.config.js

@@ -0,0 +1,40 @@
+/*!
+ * Content-Security-Policy
+ */
+const SELF = "'self'"
+const PRODUCION = '*.core.ac.uk'
+
+const config = {
+  'default-src': [SELF, PRODUCION],
+  'script-src': [SELF, '*.google-analytics.com'],
+  // TODO: Remove 'unsafe-inline' when the Next.js' bug is resolved
+  // See more: https://github.com/vercel/next.js/issues/17445
+  'style-src': [SELF, "'unsafe-inline'"],
+  'img-src': [
+    SELF,
+    PRODUCION,
+    'data:',
+    'maps.wikimedia.org',
+    // Google Analytics may transport data via image:
+    // https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport
+    '*.google-analytics.com',
+  ],
+  'connect-src': [SELF, PRODUCION, 'sentry.io', '*.google-analytics.com'],
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  // Allow hot module replacement using inlined scripts and styles
+  config['script-src'].push("'unsafe-inline'", "'unsafe-eval'")
+  config['style-src'].push("'unsafe-inline'")
+
+  // Allow connection to the local hosts in development:
+  // - local API is running on a different port
+  // - `localhost` and `127.0.0.1` are not the same domain technically
+  config['connect-src'].push('localhost:* 127.0.0.1:*')
+}
+
+const policy = Object.entries(config)
+  .map(([directive, value]) => `${directive} ${value.join(' ')}`)
+  .join(';')
+
+module.exports = policy

next.config.js

@@ -2,12 +2,23 @@ const path = require('path')
 
 const withSourceMaps = require('@zeit/next-source-maps')
 
-const envConfig = require('./config')
+const envConfig = require('./env.config')
+const cspConfig = require('./csp.config')
 const helpers = require('./utils/helpers')
 
 const nextConfig = {
   env: envConfig,
   assetPrefix: helpers.getAssetsPath(''),
+
+  async headers() {
+    return [
+      {
+        source: '/:path(.*)',
+        headers: [{ key: 'Content-Security-Policy', value: cspConfig }],
+      },
+    ]
+  },
+
   webpack(config) {
     const { rules } = config.module
 

pages/_app.jsx

@@ -52,27 +52,7 @@ let statistics = {
 
 // TODO: Replace with getStaticProps once this is solved
 //       https://github.com/vercel/next.js/discussions/10949
-App.getInitialProps = async ({ ctx: { res } }) => {
-  res.setHeader(
-    'Content-Security-Policy',
-    [
-      // consider everything from these two domains as a safe
-      "default-src 'self' *.core.ac.uk core.ac.uk",
-      // in development there are attached inline scripts
-      // (probably from hot reload or some Next.JS magic)
-      `script-src 'self' *.google-analytics.com ${
-        process.env.NODE_ENV !== 'production' ? "'unsafe-inline'" : ''
-      }`,
-      "style-src 'self' 'unsafe-inline'",
-      // google analytics may transport info via image
-      // https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport
-      "img-src 'self' *.core.ac.uk core.ac.uk data: 'self' *.google-analytics.com maps.wikimedia.org",
-      `connect-src 'self' *.core.ac.uk core.ac.uk sentry.io *.google-analytics.com ${
-        process.env.NODE_ENV !== 'production' ? 'localhost:* 127.0.0.1:*' : ''
-      }`,
-    ].join(';')
-  )
-
+App.getInitialProps = async () => {
   if (
     !statistics.data ||
     // fetch new stats if they are 1 day old