rewrite

configs/nextjs/headers.js

-const getCspPolicy = require('./getCspPolicy');
-
 async function headers() {
   return [
     {
       source: '/:path*',
       headers: [
+        // security headers from here - https://nextjs.org/docs/advanced-features/security-headers
+        {
+          key: 'X-Frame-Options',
+          value: 'SAMEORIGIN',
+        },
         {
-          key: 'Content-Security-Policy',
-          value: getCspPolicy(),
+          key: 'X-Content-Type-Options',
+          value: 'nosniff',
         },
       ],
     },

configs/nextjs/getCspPolicy.js → lib/csp/getCspPolicy.ts

-const CONSTS = {
-  BLOB: 'blob:',
-  DATA: 'data:',
-  NONE: '\'none\'',
-  REPORT_SAMPLE: `'report-sample'`,
-  SELF: '\'self\'',
-  STRICT_DYNAMIC: `'strict-dynamic'`,
-  UNSAFE_INLINE: '\'unsafe-inline\'',
-  UNSAFE_EVAL: '\'unsafe-eval\'',
-};
+import isDev from 'lib/isDev';
+
+enum KEY_WORDS {
+  BLOB = 'blob:',
+  DATA = 'data:',
+  NONE = '\'none\'',
+  REPORT_SAMPLE = `'report-sample'`,
+  SELF = '\'self\'',
+  STRICT_DYNAMIC = `'strict-dynamic'`,
+  UNSAFE_INLINE = '\'unsafe-inline\'',
+  UNSAFE_EVAL = '\'unsafe-eval\'',
+}
 
 const MAIN_DOMAINS = [ '*.blockscout.com', 'blockscout.com' ];
 
 function makePolicyMap() {
   return {
     'default-src': [
-      CONSTS.NONE,
+      KEY_WORDS.NONE,
     ],
 
     'connect-src': [
-      CONSTS.SELF,
-      'sentry.io', '*.sentry.io', // client error monitoring
+      KEY_WORDS.SELF,
+
+      // webpack hmr in safari doesn't recognize localhost 'self' for some reason
+      isDev() ? 'ws://localhost:3000/_next/webpack-hmr' : '',
+
+      // client error monitoring
+      'sentry.io', '*.sentry.io',
     ],
 
     'script-src': [
-      CONSTS.SELF,
+      KEY_WORDS.SELF,
+
+      // next.js generates and rebuilds source maps in dev using eval()
+      // https://github.com/vercel/next.js/issues/14221#issuecomment-657258278
+      isDev() ? KEY_WORDS.UNSAFE_EVAL : '',
+
       ...MAIN_DOMAINS,
 
-      CONSTS.UNSAFE_INLINE,
-      CONSTS.UNSAFE_EVAL,
+      // hash of ColorModeScript
+      '\'sha256-e7MRMmTzLsLQvIy1iizO1lXf7VWYoQ6ysj5fuUzvRwE=\'',
     ],
 
     'style-src': [
-      CONSTS.SELF,
+      KEY_WORDS.SELF,
       ...MAIN_DOMAINS,
+
+      // google fonts
       'fonts.googleapis.com',
 
-      CONSTS.UNSAFE_INLINE,
+      // yes, it is unsafe as it stands, but
+      // - we cannot use hashes because all styles are generated dynamically
+      // - we cannot use nonces since we are not following along SSR path
+      // - and still there is very small damage that can be cause by CSS-based XSS-attacks
+      // so we hope we are fine here till the first major incident :)
+      KEY_WORDS.UNSAFE_INLINE,
     ],
 
     'img-src': [
-      CONSTS.SELF,
-      CONSTS.DATA,
+      KEY_WORDS.SELF,
+      KEY_WORDS.DATA,
+
       ...MAIN_DOMAINS,
+
       // github avatars
       'avatars.githubusercontent.com',
     ],
 
     'font-src': [
-      CONSTS.SELF,
-      CONSTS.DATA,
+      KEY_WORDS.DATA,
+
       // google fonts
       '*.gstatic.com',
       'fonts.googleapis.com',
     ],
+
+    'object-src': [
+      KEY_WORDS.NONE,
+    ],
+
+    'base-uri': [
+      KEY_WORDS.NONE,
+    ],
   };
 }
 
-function getCspPolicy() {
+export default function getCspPolicy() {
   const policyMap = makePolicyMap();
 
   const policyHeader = Object.entries(policyMap)
@@ -72,5 +101,3 @@ function getCspPolicy() {
 
   return policyHeader;
 }
-
-module.exports = getCspPolicy;

lib/isDev.ts

+export default function isDev() {
+  return process.env.NODE_ENV === 'development';
+}

pages/_document.tsx

@@ -2,6 +2,7 @@ import { ColorModeScript } from '@chakra-ui/react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import React from 'react';
 
+import getCspPolicy from 'lib/csp/getCspPolicy';
 import theme from 'theme';
 
 class MyDocument extends Document {
@@ -13,9 +14,9 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;1,400&display=swap"
-            rel="stylesheet"
+          <meta
+            httpEquiv="Content-Security-Policy"
+            content={ getCspPolicy() }
           />
         </Head>
         <body>