psa-systems/mokosh-apps
Watch
9
0
Fork
You've already forked mokosh-apps
 0
Code Issues Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

fix(spa): clean up three CSP + manifest console errors on msp.a8n.systems #414

Merged
YousifShkara merged 1 commit from fix/MAPPS-356-console-errors into main 2026-07-03 13:40:48 +02:00
Conversation 0 Commits 1 Files changed 3 +48 -15
YousifShkara commented 2026-07-03 13:39:24 +02:00
Owner
Copy link

Every fresh page load logged three errors that were cosmetic (app rendered fine) but trained users to ignore the console and drowned any real error. All three are static-asset issues in this repo, no server-side change required.

  1. Drop the Google Fonts . assets/styles.css --font-sans / --font-mono already declare Inter / JetBrains Mono first with a system-font fallback chain (ui-sans-serif, system-ui, -apple-system, ...), so users have been seeing the system fallback anyway - the SPA's CSP style-src 'self' 'unsafe-inline' refuses fonts.googleapis.com, so the stylesheet load was blocked at runtime. Removing the two <link rel="preconnect"> lines and the stylesheet <link> deletes the console noise without changing the rendered look. If we want Inter shipped for real later, self-host under assets/fonts/ (out of scope).

  2. Extract the FOUC-prevention theme applier from an inline <script> block to assets/theme-init.js and reference it as <script src="/assets/theme-init.js"></script>. Same-origin external scripts satisfy script-src 'self' 'wasm-unsafe-eval'; the inline block was blocked at runtime, so the FOUC guard was doing nothing today. The extracted file also wraps its body in a try/catch so a localStorage refusal (private mode, ITP, third-party-cookie block) does not throw uncaught during head parse - falls back to prefers-color-scheme and gives up quietly if that also fails.

  3. Drop favicon.svg from assets/manifest.webmanifest's icons array. The file is a 409 KB <svg> wrapper around a base64 PNG, which browser manifest icon parsers reject as "not a valid image" (they want vector content, not embedded raster). The three PNG entries (192 / 512 / 512-maskable) remain and are what the PWA install actually uses. favicon.svg stays in place for the <link rel="icon" type="image/svg+xml" href="/favicon.svg"> in <head> because the tab-icon parser tolerates the embedded-raster shape; only the manifest parser refuses it.

#MAPPS-356

Every fresh page load logged three errors that were cosmetic (app rendered fine) but trained users to ignore the console and drowned any real error. All three are static-asset issues in this repo, no server-side change required. 1) Drop the Google Fonts <link>. `assets/styles.css` `--font-sans` / `--font-mono` already declare `Inter` / `JetBrains Mono` first with a system-font fallback chain (`ui-sans-serif, system-ui, -apple-system, ...`), so users have been seeing the system fallback anyway - the SPA's CSP `style-src 'self' 'unsafe-inline'` refuses `fonts.googleapis.com`, so the stylesheet load was blocked at runtime. Removing the two `<link rel="preconnect">` lines and the stylesheet `<link>` deletes the console noise without changing the rendered look. If we want Inter shipped for real later, self-host under `assets/fonts/` (out of scope). 2) Extract the FOUC-prevention theme applier from an inline `<script>` block to `assets/theme-init.js` and reference it as `<script src="/assets/theme-init.js"></script>`. Same-origin external scripts satisfy `script-src 'self' 'wasm-unsafe-eval'`; the inline block was blocked at runtime, so the FOUC guard was doing nothing today. The extracted file also wraps its body in a try/catch so a `localStorage` refusal (private mode, ITP, third-party-cookie block) does not throw uncaught during head parse - falls back to `prefers-color-scheme` and gives up quietly if that also fails. 3) Drop `favicon.svg` from `assets/manifest.webmanifest`'s `icons` array. The file is a 409 KB `<svg>` wrapper around a base64 PNG, which browser manifest icon parsers reject as "not a valid image" (they want vector content, not embedded raster). The three PNG entries (192 / 512 / 512-maskable) remain and are what the PWA install actually uses. `favicon.svg` stays in place for the `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` in `<head>` because the tab-icon parser tolerates the embedded-raster shape; only the manifest parser refuses it. #MAPPS-356
fix(spa): clean up three CSP + manifest console errors on msp.a8n.systems
All checks were successful
Check / fmt + clippy + tests (pull_request) Successful in 1m18s
Details
Create release / Create release from merged PR (pull_request) Has been skipped
Details
548064b12a 
Every fresh page load logged three errors that were cosmetic (app rendered fine) but trained users to ignore the console and drowned any real error. All three are static-asset issues in this repo, no server-side change required.

1) Drop the Google Fonts <link>. `assets/styles.css` `--font-sans` / `--font-mono` already declare `Inter` / `JetBrains Mono` first with a system-font fallback chain (`ui-sans-serif, system-ui, -apple-system, ...`), so users have been seeing the system fallback anyway - the SPA's CSP `style-src 'self' 'unsafe-inline'` refuses `fonts.googleapis.com`, so the stylesheet load was blocked at runtime. Removing the two `<link rel="preconnect">` lines and the stylesheet `<link>` deletes the console noise without changing the rendered look. If we want Inter shipped for real later, self-host under `assets/fonts/` (out of scope).

2) Extract the FOUC-prevention theme applier from an inline `<script>` block to `assets/theme-init.js` and reference it as `<script src="/assets/theme-init.js"></script>`. Same-origin external scripts satisfy `script-src 'self' 'wasm-unsafe-eval'`; the inline block was blocked at runtime, so the FOUC guard was doing nothing today. The extracted file also wraps its body in a try/catch so a `localStorage` refusal (private mode, ITP, third-party-cookie block) does not throw uncaught during head parse - falls back to `prefers-color-scheme` and gives up quietly if that also fails.

3) Drop `favicon.svg` from `assets/manifest.webmanifest`'s `icons` array. The file is a 409 KB `<svg>` wrapper around a base64 PNG, which browser manifest icon parsers reject as "not a valid image" (they want vector content, not embedded raster). The three PNG entries (192 / 512 / 512-maskable) remain and are what the PWA install actually uses. `favicon.svg` stays in place for the `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` in `<head>` because the tab-icon parser tolerates the embedded-raster shape; only the manifest parser refuses it.

#MAPPS-356
YousifShkara deleted branch fix/MAPPS-356-console-errors 2026-07-03 13:40:49 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
YousifShkara
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/mokosh-apps!414
No description provided.