Investigation with the running container revealed the previous fix
was correct on the deployed server but didn't help the user because
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in their .env has the placeholder
'pk_test_...' from .env.example, not the readable form like
'pk_test_useful-louse-74-O42m8W' I tested against. The actual key is
in Clerk's older "encoded" format:
pk_test_dXNlZnVsLWxvdXNlLTc0LmNsZXJrLmFjY291bnRzLmRldiQ
The base64 portion decodes to the literal FAPI host
'useful-louse-74.clerk.accounts.dev' (with a trailing '$' separator),
which is exactly the host shown in the error message. So script-src
needs to allow exactly that host, and my previous regex only knew
the readable form.
clerkFrontendApiHost() now handles both formats:
Form 1 (encoded): pk_test_<base64slug>\$
/-> decode b64 /-> <slug>.clerk.accounts.dev
(or .clerk.services for ?)
Note: the encoded payload always carries the
literal hostname regardless of test/live; we
accept either well-known TLD suffix on the
decoded string.
Form 2 (readable): pk_test_<slug>-<randomSuffix>
/-> <slug>.clerk.accounts.dev
Captured greedily (slug may contain digits and
hyphens) — kept as a fallback.
Defensive fall-throughs ensure a string that decodes to garbage
(e.g. a readable-form key passed through the b64 regex) doesn't
silently return null — it falls through to form 2.
Verified against four cases:
pk_test_dXNlZnVsLWxvdXNlLTc0... -> useful-louse-74.clerk.accounts.dev ✓
pk_test_useful-louse-74-O42m8W -> useful-louse-74.clerk.accounts.dev ✓
pk_live_dXNlZnVsLWxvdXNlLTc0... -> useful-louse-74.clerk.accounts.dev ✓
pk_test_invalid-garbage -> invalid.clerk.accounts.dev (form 2)
The user must rebuild and redeploy for the new CSP header to take
effect — the previously-served header is cached in the running
container's standalone bundle and won't refresh until container
restart with the new build.
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.
