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.
Performance and transport-layer hardening.
ImageUploader.tsx:
- Replaced sequential for-loop uploads with Promise.allSettled, so
multiple files upload concurrently. Partial failures no longer abort
the whole batch — successful uploads are kept, failed ones surface
a concatenated error (and a subsequent retry is still possible).
- Order indices are pre-computed from the existing images.length so
the parallel results stay correctly ordered.
next.config.ts:
- PoweredByHeader: false (no longer advertises Next.js).
- compress: true explicitly (default, but documented).
- Added Strict-Transport-Security, X-Frame-Options, X-Content-Type-
Options, Referrer-Policy, Permissions-Policy and a defensive CSP
(script-src allows 'unsafe-eval' for Next.js dev/HMR invariants,
connect-src whitelists Clerk endpoints).
- remotePatterns is now only populated when S3_ENDPOINT is set, and
parsed with URL() so a trailing path no longer produces a phantom
hostname. Still effectively unused because the app uses raw <img>;
the migration to next/image is deferred.
