CPX-632: add CSP in middleware

bigcommerce · Sep 5, 2024 · 2453d38 · 2453d38
1 parent 3adb3d1
commit 2453d38
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
   };
 
   const { storeHash } = useAppContext();
-  const allowedParents = () => [
+  const frameAncestors = [
     `https://store-${storeHash}.mybigcommerce.com`,
     `https://store-${storeHash}.my-staging.com`,
     `https://store-${storeHash}.my-integration.com`
@@ -42,7 +42,7 @@ export default function RootLayout({
       <head>
       <meta
         http-equiv="Content-Security-Policy"
-        frame-ancestors={allowedParents()} />
+        frame-ancestors={frameAncestors} />
         <link rel="icon" href="/favicon.svg" />
       </head>
       <body>

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -17,7 +17,34 @@ export async function middleware(request: NextRequest) {
         return new NextResponse('invalid csrf token', { status: 403 });
     }
 
-    return response;
+    const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
+    const cspHeader = `
+        script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+        frame-ancestors: 'https://store-*.mybigcommerce.com' 'https://store-*.my-integration.zone' 'https://store-*.my-staging.zone';
+    `;
+    const contentSecurityPolicyHeaderValue = cspHeader
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+
+    const requestHeaders = new Headers(request.headers)
+    requestHeaders.set('x-nonce', nonce)
+
+    requestHeaders.set(
+      'Content-Security-Policy',
+      contentSecurityPolicyHeaderValue
+    )
+
+    const newResponse = NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    })
+    newResponse.headers.set(
+      'Content-Security-Policy',
+      contentSecurityPolicyHeaderValue
+    )
+
+    return newResponse
 }
 
 export const config = {