use header instead of meta tag

.env.example

@@ -4,6 +4,8 @@ NEXT_PUBLIC_SENTRY_DSN=xxx
 SENTRY_ORG=block-scout
 SENTRY_PROJECT=new-ui
 SENTRY_AUTH_TOKEN=xxx
+SENTRY_IGNORE_API_RESOLUTION_ERROR=1
+SENTRY_CSP_REPORT_URI=xxx
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=xxx
 NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom

configs/nextjs/headers.js

+const getCspPolicy = require('../../lib/csp/getCspPolicy');
+
 async function headers() {
   return [
     {
@@ -12,6 +14,10 @@ async function headers() {
           key: 'X-Content-Type-Options',
           value: 'nosniff',
         },
+        {
+          key: 'Content-Security-Policy-Report-Only',
+          value: getCspPolicy(),
+        },
       ],
     },
   ];

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

-import isDev from 'lib/isDev';
-import { NETWORKS } from 'lib/networks';
-
-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 getSupportedNetworks = require('../networks/getSupportedNetworks');
+
+const 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' ];
 
+const isDev = process.env.NODE_ENV === 'development';
+
 function getNetworksExternalAssets() {
-  const icons = NETWORKS
+  const icons = getSupportedNetworks()
     .filter(({ icon }) => typeof icon === 'string')
-    .map(({ icon }) => new URL(icon as string));
+    .map(({ icon }) => new URL(icon));
 
   return icons;
 }
@@ -34,7 +35,7 @@ function makePolicyMap() {
       KEY_WORDS.SELF,
 
       // webpack hmr in safari doesn't recognize localhost as 'self' for some reason
-      isDev() ? 'ws://localhost:3000/_next/webpack-hmr' : '',
+      isDev ? 'ws://localhost:3000/_next/webpack-hmr' : '',
 
       // client error monitoring
       'sentry.io', '*.sentry.io',
@@ -45,7 +46,7 @@ function makePolicyMap() {
 
       // 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 : '',
+      isDev ? KEY_WORDS.UNSAFE_EVAL : '',
 
       ...MAIN_DOMAINS,
 
@@ -96,10 +97,14 @@ function makePolicyMap() {
     'base-uri': [
       KEY_WORDS.NONE,
     ],
+
+    'report-uri': [
+      process.env.SENTRY_CSP_REPORT_URI,
+    ],
   };
 }
 
-export default function getCspPolicy() {
+function getCspPolicy() {
   const policyMap = makePolicyMap();
 
   const policyString = Object.entries(policyMap)
@@ -115,3 +120,5 @@ export default function getCspPolicy() {
 
   return policyString;
 }
+
+module.exports = getCspPolicy;

lib/isDev.ts

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

lib/networks.ts

@@ -9,6 +9,7 @@ import optimismIcon from 'icons/networks/optimism.svg';
 import poaSokolIcon from 'icons/networks/poa-sokol.svg';
 import poaIcon from 'icons/networks/poa.svg';
 import rskIcon from 'icons/networks/rsk.svg';
+import getSupportedNetworks from 'lib/networks/getSupportedNetworks';
 
 // will change later when we agree how to host network icons
 const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>>> = {
@@ -25,12 +26,8 @@ const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGEleme
 };
 
 export const NETWORKS: Array<Network> = (() => {
-  try {
-    const networksFromConfig: Array<Network> = JSON.parse(process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS || '[]');
-    return networksFromConfig.map((network) => ({ ...network, icon: network.icon || ICONS[`${ network.type }/${ network.subType }`] }));
-  } catch (error) {
-    return [];
-  }
+  const networksFromConfig: Array<Network> = getSupportedNetworks();
+  return networksFromConfig.map((network) => ({ ...network, icon: network.icon || ICONS[`${ network.type }/${ network.subType }`] }));
 })();
 
 // for easy env creation

lib/networks/getSupportedNetworks.js

+function getSupportedNetworks() {
+  try {
+    return JSON.parse(process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS || '[]');
+  } catch (error) {
+    return [];
+  }
+}
+
+module.exports = getSupportedNetworks;

pages/_document.tsx

@@ -2,7 +2,6 @@ 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 {
@@ -14,10 +13,6 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
-          <meta
-            httpEquiv="Content-Security-Policy"
-            content={ getCspPolicy() }
-          />
         </Head>
         <body>
           <ColorModeScript initialColorMode={ theme.config.initialColorMode }/>