fix(nextjs): allow Clerk protection hosts on all ports in connect-src (#9458)

Author: mwickett

.changeset/dull-donkeys-warn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Allow Clerk's abuse and fraud protection hosts on all ports in the generated `connect-src` directive. The `contentSecurityPolicy` option previously emitted `https://*.protect.clerk.com`, which matches port 443 only, so requests to those hosts on other ports were blocked by the resulting policy.

packages/nextjs/src/server/__tests__/content-security-policy.test.ts

@@ -31,7 +31,7 @@ describe('CSP Header Utils', () => {
 
       expect(directives).toContainEqual("default-src 'self'");
       expect(directives).toContainEqual(
-        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com",
+        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com",
       );
       expect(directives).toContainEqual("form-action 'self'");
       expect(directives).toContainEqual(
@@ -83,9 +83,14 @@ describe('CSP Header Utils', () => {
         const result = createContentSecurityPolicyHeaders(testHost, { strict });
         const directives = result.headers[0][1].split('; ');
 
-        for (const directiveName of ['script-src', 'connect-src', 'frame-src']) {
+        // connect-src carries the port wildcard: those hosts are also requested on non-443 ports.
+        for (const [directiveName, expectedSource] of [
+          ['script-src', 'https://*.protect.clerk.com'],
+          ['connect-src', 'https://*.protect.clerk.com:*'],
+          ['frame-src', 'https://*.protect.clerk.com'],
+        ]) {
           const directiveSources = directives.find(d => d.startsWith(directiveName))?.split(' ');
-          expect(directiveSources).toContain('https://*.protect.clerk.com');
+          expect(directiveSources).toContain(expectedSource);
           expect(directiveSources).not.toContain('https://*.clerk.com');
           expect(directiveSources).not.toContain('https://*.client.protect.clerk.com');
         }
@@ -111,7 +116,7 @@ describe('CSP Header Utils', () => {
       const directives = headerValue.split('; ');
       expect(directives).toContainEqual("default-src 'self'");
       expect(directives).toContainEqual(
-        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com",
+        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com",
       );
       expect(directives).toContainEqual("form-action 'self'");
       expect(directives).toContainEqual(
@@ -260,7 +265,7 @@ describe('CSP Header Utils', () => {
 
       const directives = result.headers[0][1].split('; ');
       expect(directives).toContainEqual(
-        `connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com https://api.example.com`,
+        `connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com https://api.example.com`,
       );
 
       const imgSrcDirective = directives.find(d => d.startsWith('img-src')) || '';
@@ -280,7 +285,7 @@ describe('CSP Header Utils', () => {
       const directives = result.headers[0][1].split('; ');
 
       expect(directives).toContainEqual(
-        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com",
+        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com",
       );
       expect(directives).toContainEqual("default-src 'self'");
       expect(directives).toContainEqual("form-action 'self'");
@@ -326,7 +331,7 @@ describe('CSP Header Utils', () => {
       const directives = result.headers[0][1].split('; ');
 
       expect(directives).toContainEqual(
-        `connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com`,
+        `connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com`,
       );
       expect(directives).toContainEqual(`img-src 'self' https://img.clerk.com`);
       expect(directives).toContainEqual(
@@ -392,7 +397,7 @@ describe('CSP Header Utils', () => {
       const directives = result.headers[0][1].split('; ');
 
       expect(directives).toContainEqual(
-        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com clerk.example.com",
+        "connect-src 'self' https://clerk-telemetry.com https://*.clerk-telemetry.com https://api.stripe.com https://maps.googleapis.com https://img.clerk.com https://images.clerkstage.dev https://*.protect.clerk.com:* clerk.example.com",
       );
       expect(directives).toContainEqual("default-src 'self'");
       expect(directives).toContainEqual("form-action 'self'");

packages/nextjs/src/server/content-security-policy.ts

@@ -1,6 +1,8 @@
 import { constants } from '@clerk/backend/internal';
 
 const clerkProtectionOrigin = 'https://*.protect.clerk.com';
+// A source with no port matches port 443 only, and these hosts are also requested on other ports.
+const clerkProtectionConnectOrigin = `${clerkProtectionOrigin}:*`;
 
 /**
  * Valid CSP directives according to the CSP Level 3 specification
@@ -105,7 +107,7 @@ class ContentSecurityPolicyDirectiveManager {
       'https://maps.googleapis.com',
       'https://img.clerk.com',
       'https://images.clerkstage.dev',
-      clerkProtectionOrigin,
+      clerkProtectionConnectOrigin,
     ],
     'default-src': ['self'],
     'form-action': ['self'],