feat: CPX-632 add CSP with explicit frame-ancestors

src/middleware.ts

@@ -1,6 +1,7 @@
 import csrf from 'edge-csrf';
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
+import { authorize } from '~/lib/authorize';
 
 const csrfProtect = csrf({
     cookie: {
@@ -17,7 +18,25 @@ export async function middleware(request: NextRequest) {
         return new NextResponse('invalid csrf token', { status: 403 });
     }
 
-    return response;
+    const authorized = authorize(request.nextUrl.searchParams.get('authToken') ?? '');
+    if (!authorized) {
+      return new NextResponse('unauthorized', { status: 401 });
+    }
+
+    const storeHash = authorized.storeHash;
+    const cspHeader = `
+        frame-ancestors: 'self' 'https://store-${storeHash}.mybigcommerce.com' 'https://store-${storeHash}.my-integration.zone' 'https://store-${storeHash}.my-staging.zone';
+    `;
+    const contentSecurityPolicyHeaderValue = cspHeader
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+
+    response.headers.set(
+      'Content-Security-Policy',
+      contentSecurityPolicyHeaderValue
+    )
+
+    return response
 }
 
 export const config = {