dimitar
59988a597e
The Phase 3 CSP was too strict for Clerk and blocked its browser-side runtime. Reported runtime error: ClerkRuntimeError: Failed to load Clerk JS, failed to load script: https://useful-louse-74.clerk.accounts.dev/npm/@clerk/clerk-js@6/ dist/clerk.browser.js (code='failed_to_load_clerk_js') Root cause: script-src allowed only 'self' 'unsafe-inline' 'unsafe- eval', so the browser blocked the Clerk JS bundle fetched from the per-instance frontend-API host. The connect-src allowlist of '*.clerk.accounts.dev' was also both too narrow (no production *.clerk.services host, no real FAPI host on the actual subdomain) and hard-coded — it didn't track changes in the publishable key. Fix: - next.config.ts now derives the active Clerk frontend-API host from NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY at build time: pk_test_<slug>-<suffix> -> <slug>.clerk.accounts.dev pk_live_<slug>-<suffix> -> <slug>.clerk.services The slug itself may contain digits and hyphens, so the suffix is captured as the final dash-group (regex: ^pk_(test|live)_(.+?)- ([a-z0-9]+)$). Verified against the user's actual key 'pk_test_useful-louse-74-O42m8W' -> 'useful-louse-74.clerk.accounts.dev'. - script-src now includes https://<fapiHost> so Clerk can pull its browser bundle from <fapiHost>/npm/@clerk/clerk-js@<v>/dist/... - connect-src now includes https://<fapiHost> + wss://<fapiHost> for Clerk's session/socket traffic. - img-src now whitelists https://img.clerk.com (Clerk-served user avatars) and keeps the open 'https:' for memorial images that we proxy through our own /api/image. - remotePatterns in next/image now lists img.clerk.com alongside the dynamic S3 host, so next/image (if/when adopted) will accept Clerk avatar URLs. - If the publishable key is absent, the FAPI host simply isn't added to either directive, so dev without Clerk configured stays functional. The build emits the exact right CSP for the active environment without any hand-editing when promoting test -> live.
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import type { NextConfig } from "next";
|
|
|
|
const s3Host = process.env.S3_ENDPOINT
|
|
? new URL(process.env.S3_ENDPOINT).hostname
|
|
: "";
|
|
|
|
// Derive the Clerk frontend API host from the publishable key so the
|
|
// CSP allowlist always matches the active environment.
|
|
// Clerk key format is:
|
|
// pk_test_<slug>-<randomSuffix> -> <slug>.clerk.accounts.dev
|
|
// pk_live_<slug>-<randomSuffix> -> <slug>.clerk.services
|
|
// The slug itself may contain hyphens and digits, so the suffix is
|
|
// only the final dash-group. The regex greedily captures the slug.
|
|
function clerkFrontendApiHost(): string | null {
|
|
const key = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
|
|
if (!key) return null;
|
|
const m = key.match(/^pk_(test|live)_(.+?)-([a-z0-9]+)$/i);
|
|
if (!m) return null;
|
|
const slug = m[2].toLowerCase();
|
|
return m[1].toLowerCase() === "test"
|
|
? `${slug}.clerk.accounts.dev`
|
|
: `${slug}.clerk.services`;
|
|
}
|
|
|
|
const clerkFapiHost = clerkFrontendApiHost();
|
|
|
|
const csp = [
|
|
"default-src 'self'",
|
|
// Clerk user avatars are served from img.clerk.com; S3 hosts are
|
|
// also allowed for memorial uploads. data:/blob: for in-app previews.
|
|
"img-src 'self' data: blob: https://img.clerk.com https:",
|
|
"font-src 'self' data:",
|
|
"style-src 'self' 'unsafe-inline'",
|
|
// script-src: must include the Clerk FAPI host because Clerk JS is
|
|
// loaded from <fapiHost>/npm/@clerk/clerk-js@<v>/dist/clerk.browser.js
|
|
"script-src 'self' 'unsafe-inline' 'unsafe-eval'" +
|
|
(clerkFapiHost ? ` https://${clerkFapiHost}` : ""),
|
|
// connect-src: Clerk JS talks to <fapiHost> for all session calls.
|
|
"connect-src 'self' https://api.clerk.com" +
|
|
(clerkFapiHost ? ` https://${clerkFapiHost} wss://${clerkFapiHost}` : ""),
|
|
"frame-ancestors 'self'",
|
|
].join("; ");
|
|
|
|
const securityHeaders = [
|
|
{ key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
|
|
{ key: "X-Frame-Options", value: "SAMEORIGIN" },
|
|
{ key: "X-Content-Type-Options", value: "nosniff" },
|
|
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
|
|
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
|
|
{ key: "Content-Security-Policy", value: csp },
|
|
];
|
|
|
|
const nextConfig: NextConfig = {
|
|
output: "standalone",
|
|
poweredByHeader: false,
|
|
compress: true,
|
|
images: {
|
|
remotePatterns: [
|
|
{ protocol: "https", hostname: "img.clerk.com" },
|
|
...(s3Host ? [{ protocol: "https", hostname: s3Host }] : []),
|
|
] as NonNullable<NonNullable<NextConfig["images"]>["remotePatterns"]>,
|
|
},
|
|
async headers() {
|
|
return [
|
|
{
|
|
source: "/:path*",
|
|
headers: securityHeaders,
|
|
},
|
|
];
|
|
},
|
|
};
|
|
|
|
export default nextConfig;
|
|
|