Skip to content

fix: add font-src CSP directive and styled error page#22

Merged
tbjers merged 1 commit into
mainfrom
fix/font-csp-and-error-page
Jun 26, 2026
Merged

fix: add font-src CSP directive and styled error page#22
tbjers merged 1 commit into
mainfrom
fix/font-csp-and-error-page

Conversation

@tbjers

@tbjers tbjers commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Summary

  • CSP regression from feat: themed dashboard redesign with 6-family light/dark theme picker #21: the themed redesign introduced @fontsource self-hosted fonts via @font-face declarations. Without an explicit font-src directive, browsers fall back to default-src — and even though the woff2 files are served from 'self', some browsers block them with the error "font-src was not explicitly set, so default-src is used as a fallback. The action has been blocked." Adding font-src 'self' to dashboard/static/_headers unblocks them.
  • Bare error page: there was no +error.svelte, so any SvelteKit-level error (e.g. an API auth failure propagated through a load function) rendered on the browser's bare default error page — no layout, no padding, the status text touching the left edge. The new +error.svelte renders inside the root layout with the standard 24 px horizontal padding and uses the active theme's CSS tokens.

Root cause of the 401

The /api/projects 401 Unauthorized in the console is not caused by this PR or #21 — the auth middleware code is unchanged. It means the CF_Authorization cookie was absent or expired for that session. Re-authenticating through Cloudflare Access resolves it. The error page fix ensures that if it happens again the user sees a readable, on-brand message instead of the browser default.

Test plan

  • Hard-reload the deployed dashboard — verify no font CSP violations in the console
  • Verify Inter and JetBrains Mono render correctly in the header and cards
  • Trigger an error state (e.g. open the detail page for a non-existent repo) — verify the error page shows with correct padding and theme colours
  • Confirm npm run build still passes cleanly

🤖 Generated with Claude Code

The themed redesign added self-hosted @fontsource fonts via @font-face
declarations. Without an explicit font-src directive the browser falls
back to default-src and blocks the woff2 files even though they are
served from 'self'. Adding font-src 'self' to _headers unblocks them.

Also adds +error.svelte so SvelteKit error states (e.g. API auth
failures) render inside the root layout with the correct 24px horizontal
padding and theme-aware colours, rather than falling through to the bare
default error page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tbjers tbjers merged commit e40eb4a into main Jun 26, 2026
5 checks passed
@tbjers tbjers deleted the fix/font-csp-and-error-page branch June 26, 2026 22:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant