feat: update CSP headers

Author: ev-d

config/csp/index.ts

@@ -23,12 +23,15 @@ export const contentSecurityPolicy: ContentSecurityPolicyOption = {
     imgSrc: [
       "'self'",
       'data:',
+      'blob:',
       'https://*.walletconnect.org',
       'https://*.walletconnect.com',
     ],
     scriptSrc: [
       "'self'",
-      "'unsafe-inline'",
+      // light/dark theme on pageload apply script
+      // if script changes, new hash must be checked against CSP error and updated
+      "'sha256-wTvVT3oJ2rMAqNUILvSYccTn53N47S3NIZbPE0ql0No='",
       ...(config.developmentMode ? ["'unsafe-eval'"] : []), // for HMR
       ...trustedHosts,
     ],
@@ -40,27 +43,51 @@ export const contentSecurityPolicy: ContentSecurityPolicyOption = {
       'wss:',
       ...(config.developmentMode ? ['ws:'] : []), // for HMR
     ],
-
+    // These directives are ignored when delivered via a <meta> element (IPFS mode).
     ...(!config.ipfsMode && {
-      // CSP directive 'frame-ancestors' is ignored when delivered via a <meta> element.
-      // CSP directive 'report-uri' is ignored when delivered via a <meta> element.
+      // Widget can be integrated into may wallets as iframe e.g Ledger Live, Safe Wallet
       frameAncestors: ['*'],
+      // Modern way - References the group declared in the Reporting-Endpoints response header
+      // Unavailable due to next.js and docker environment limitations
+      // ...(secretConfig.cspReportUri && { reportTo: 'csp-endpoint' }),
+      // Legacy way
       reportURI: secretConfig.cspReportUri,
     }),
+    // frame-src takes precedence over child-src for iframes in modern browsers
+    frameSrc: [
+      "'self'",
+      'https://*.walletconnect.org',
+      'https://*.walletconnect.com',
+    ],
+    // child-src kept as fallback for older browsers
     childSrc: [
       "'self'",
       'https://*.walletconnect.org',
       'https://*.walletconnect.com',
     ],
     workerSrc: ["'none'"],
+    objectSrc: ["'none'"], // Block plugins (Flash etc.)
+    mediaSrc: ["'none'"], // No audio/video sources needed
+    manifestSrc: ["'self'"],
+    formAction: ["'self'"], // Prevent form hijacking via XSS
+    // Block inline event handlers (onclick="...", onerror="..." etc.)
+    'script-src-attr': ["'none'"],
     'base-uri': config.ipfsMode ? undefined : ["'none'"],
   },
   reportOnly: secretConfig.cspReportOnly,
 };
 
+// TODO: remove this HOC for better control over CSP headers when next/runtime-envs situation is fixed
 export const withCsp = (app: FC<AppProps>): FC =>
   withSecureHeaders({
     contentSecurityPolicy,
+    // applied manually in next.config.mjs for better control
     frameGuard: false,
-    referrerPolicy: 'same-origin',
+    forceHTTPSRedirect: false,
+    noopen: false,
+    expectCT: false,
+    nosniff: false,
+    // there is no way to avoid setting it, so align with next.config.mjs value
+    xssProtection: 'block-rendering',
+    referrerPolicy: false,
   })(app);