fix: csp error (#48)

* fix: csp error

Dockerfile

@@ -22,7 +22,7 @@ ARG DEFAULT_CHAIN="1"
 ENV NEXT_TELEMETRY_DISABLED=1 \
   BASE_PATH=$BASE_PATH \
   SUPPORTED_CHAINS=$SUPPORTED_CHAINS \
-  DEFAULT_CHAIN=$DEFAULT_CHAIN
+ DEFAULT_CHAIN=$DEFAULT_CHAIN
 
 WORKDIR /app
 RUN apk add --no-cache curl=~8

next.config.mjs

@@ -1,6 +1,4 @@
 import NextBundleAnalyzer from '@next/bundle-analyzer';
-import { createSecureHeaders } from 'next-secure-headers';
-import createCSP from './scripts/create-csp.mjs';
 import buildDynamics from './scripts/build-dynamics.mjs';
 
 buildDynamics();
@@ -108,15 +106,6 @@ export default withBundleAnalyzer({
         // Apply these headers to all routes in your application.
         source: '/(.*)',
         headers: [
-          ...createSecureHeaders({
-            contentSecurityPolicy: createCSP(
-              cspTrustedHosts,
-              cspReportUri,
-              cspReportOnly,
-            ),
-            frameGuard: false,
-            referrerPolicy: 'same-origin',
-          }),
           {
             key: 'X-DNS-Prefetch-Control',
             value: 'on',

package.json

@@ -7,7 +7,7 @@
     "dev": "node server.mjs",
     "build": "next build",
     "build:analyze": "ANALYZE_BUNDLE=true next build",
-    "start": "NODE_OPTIONS='-r next-logger' NODE_ENV=production node scripts/server.mjs",
+    "start": "NODE_OPTIONS='-r next-logger' NODE_ENV=production node server.mjs",
     "lint": "eslint --ext ts,tsx,js,mjs .",
     "lint:fix": "yarn lint --fix",
     "types": "tsc --noEmit",

pages/_app.tsx

@@ -11,6 +11,7 @@ import 'nprogress/nprogress.css';
 import Providers from 'providers';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
+import { withCsp } from 'utilsApi/withCSP';
 
 // Migrations old theme cookies to new cross domain cookies
 migrationThemeCookiesToCrossDomainCookiesClientSide();
@@ -46,4 +47,6 @@ const AppWrapper = (props: AppProps): JSX.Element => {
   );
 };
 
-export default AppWrapper;
+export default process.env.NODE_ENV === 'development'
+  ? AppWrapper
+  : withCsp(AppWrapper);

scripts/server.mjs → server.mjs

@@ -1,14 +1,15 @@
 import { createServer } from 'http';
 import { parse } from 'url';
 import next from 'next';
-import { CACHE_CONTROL_HEADER } from '../next.config.mjs';
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = 'localhost';
 const port = Number(process.env.PORT) || 3000;
 // when using middleware `hostname` and `port` must be provided below
 const app = next({ dev, hostname, port });
 const handle = app.getRequestHandler();
+// cannot import from next.config.mjs because this will break env load
+const CACHE_CONTROL_HEADER = 'x-cache-control';
 
 // allows us to override cache-control header
 const overrideSetHeader = (res) => {
@@ -28,7 +29,8 @@ const overrideSetHeader = (res) => {
   };
 };
 
-void app.prepare().then(() => {
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+app.prepare().then(() => {
   createServer(async (req, res) => {
     // Be sure to pass `true` as the second argument to `url.parse`.
     // This tells it to parse the query portion of the URL.

utilsApi/withCSP.ts

@@ -0,0 +1,64 @@
+import { withSecureHeaders } from 'next-secure-headers';
+import getConfig from 'next/config';
+import { FC } from 'react';
+import { CustomApp } from 'types';
+
+const { serverRuntimeConfig } = getConfig();
+const { cspTrustedHosts, cspReportOnly, cspReportUri } = serverRuntimeConfig;
+
+const trustedHosts = cspTrustedHosts ? cspTrustedHosts.split(',') : [];
+
+const reportOnly = cspReportOnly == 'true';
+
+export const contentSecurityPolicy = {
+  directives: {
+    styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"],
+    fontSrc: ["'self'", 'https://fonts.gstatic.com', ...trustedHosts],
+    imgSrc: [
+      "'self'",
+      'data:',
+      'https://*.walletconnect.org',
+      'https://*.walletconnect.com',
+      ...trustedHosts,
+    ],
+    scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'", ...trustedHosts],
+    connectSrc: [
+      "'self'",
+      'wss://*.walletconnect.org',
+      'https://*.walletconnect.org',
+      'wss://*.walletconnect.com',
+      'https://*.walletconnect.com',
+      'https://*.coinbase.com',
+      'wss://*.walletlink.org/',
+      'https://cloudflare-eth.com/',
+      'https://rpc.ankr.com',
+      'https://cdn.live.ledger.com/',
+      'https://api-lido.1inch.io',
+      'https://apiv5.paraswap.io/',
+      'https://api.cow.fi/',
+      ...trustedHosts,
+    ],
+    formAction: ["'self'", ...trustedHosts],
+    frameAncestors: ['*'],
+    manifestSrc: ["'self'", ...trustedHosts],
+    mediaSrc: ["'self'", ...trustedHosts],
+    childSrc: [
+      "'self'",
+      'https://*.walletconnect.org',
+      'https://*.walletconnect.com',
+      ...trustedHosts,
+    ],
+    objectSrc: ["'self'", ...trustedHosts],
+    defaultSrc: ["'self'", ...trustedHosts],
+    baseUri: ["'none'"],
+    reportURI: cspReportUri,
+  },
+  reportOnly,
+};
+
+export const withCsp = (app: CustomApp): FC =>
+  withSecureHeaders({
+    contentSecurityPolicy,
+    frameGuard: false,
+    referrerPolicy: 'same-origin',
+  })(app);