Fix CSP headers due to Next.JS incompetence (#1)

celo-org · Dec 26, 2023 · 7bb7b1a · 7bb7b1a
1 parent 4e79a7f
commit 7bb7b1a
Showing 1 changed file with 43 additions and 11 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,8 +1,39 @@
 /** @type {import('next').NextConfig} */
 
-const { version } = require('./package.json')
+const { version } = require('./package.json');
 
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production';
+
+// Sometimes useful to disable this during development
+const ENABLE_CSP_HEADER = true;
+const CONNECT_SRC_HOSTS = [
+  'https://*.celo.org',
+  'https://*.celoscan.io',
+  'https://*.walletconnect.com',
+  'wss://*.walletconnect.com',
+  'wss://*.walletconnect.org',
+  'https://raw.githubusercontent.com',
+  'https://celo-mainnet.infura.io',
+];
+const FRAME_SRC_HOSTS = ['https://*.walletconnect.com', 'https://*.walletconnect.org'];
+const IMG_SRC_HOSTS = ['https://raw.githubusercontent.com', 'https://*.walletconnect.com'];
+
+const cspHeader = `
+  default-src 'self';
+  script-src 'self'${isDev ? " 'unsafe-eval'" : ''};
+  script-src-elem 'self' 'unsafe-inline';
+  style-src 'self' 'unsafe-inline';
+  connect-src 'self' ${CONNECT_SRC_HOSTS.join(' ')};
+  img-src 'self' blob: data: ${IMG_SRC_HOSTS.join(' ')};
+  font-src 'self' data:;
+  object-src 'none';
+  base-uri 'self';
+  form-action 'self';
+  frame-src 'self' ${FRAME_SRC_HOSTS.join(' ')};
+  frame-ancestors 'none';
+  ${!isDev ? 'block-all-mixed-content;' : ''}
+  ${!isDev ? 'upgrade-insecure-requests;' : ''}
+`.replace(/\s{2,}/g, ' ').trim();
 
 const securityHeaders = [
   {
@@ -21,14 +52,15 @@ const securityHeaders = [
     key: 'Referrer-Policy',
     value: 'strict-origin-when-cross-origin',
   },
-  // Note, causes a problem for firefox: https://github.com/MetaMask/metamask-extension/issues/3133
-  {
-    key: 'Content-Security-Policy',
-    value: `default-src 'self'; script-src 'self'${
-      isDev ? " 'unsafe-eval' 'unsafe-inline'" : ''
-    }; connect-src 'self' https://*.celo.org https://*.celoscan.io https://*.walletconnect.com wss://walletconnect.celo.org wss://*.walletconnect.com wss://*.walletconnect.org https://raw.githubusercontent.com https://celo-mainnet.infura.io; img-src 'self' data: https://raw.githubusercontent.com https://*.walletconnect.com; style-src 'self' 'unsafe-inline' https://*.googleapis.com; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.walletconnect.com https://*.walletconnect.org;`,
-  },
-]
+  ...(ENABLE_CSP_HEADER
+    ? [
+        {
+          key: 'Content-Security-Policy',
+          value: cspHeader,
+        },
+      ]
+    : [])
+];
 
 module.exports = {
   webpack: (config) => {
@@ -59,4 +91,4 @@ module.exports = {
   },
 
   reactStrictMode: true,
-}
+};