Observed behaviour
Expected behaviour
Either:
- The CSP should include
https://fluxerstatic.cominstyleSrc,imgSrc, andfontSrcdirectives for monolith mode, or - The HTML template should serve fonts/icons from the same origin in monolith mode instead of referencing the CDN
Reproduction steps
- Build and deploy Fluxer in monolith mode from the
refactorbranch - Open the web app in a browser
- Open browser DevTools > Console
- Observe CSP violation errors for
fluxerstatic.comresources - Note that fonts are not the expected IBM Plex typeface
Details
Description
I used Claude to find and track all of its fixes, but I do not want to push AI generated code into a public repo, and felt it would be better to solve the issues in the way the project owners want to. Hell these may be by design I dont know, but I think it points to valuable details to get the self-hosting side up and running faster. When running Fluxer in self-hosted monolith mode, the IBM Plex fonts and favicon don't load. The browser console shows Content-Security-Policy violation errors forfluxerstatic.com.
Environment
- Branch:
refactor - Deployment: Docker Compose, monolith mode, built from source
- Browser: Chrome/Firefox (any modern browser)
Symptoms
Browser console shows CSP violation errors like:Refused to load the stylesheet 'https://fluxerstatic.com/fonts/ibm-plex.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'"
Refused to load the image 'https://fluxerstatic.com/web/favicon.png' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: ..."
Refused to load the font 'https://fluxerstatic.com/fonts/...' because it violates the following Content Security Policy directive: "font-src 'self'"
Root Cause
The HTML template (fluxer_app/index.html) has hardcoded references to https://fluxerstatic.com for:
- IBM Plex font stylesheet (
<link>tag) - Favicon (
<link rel="icon">) - Apple touch icon (
<link rel="apple-touch-icon">)
fluxer_server/src/ServiceInitializer.tsx in the cspDirectives object within createAppServerInitializer) only allows 'self' for styleSrc, imgSrc, and fontSrc. The fluxerstatic.com domain is not included.
This is likely not an issue in the hosted SaaS deployment (where assets may be served from fluxerstatic.com directly or the CSP is configured differently), but in monolith/self-hosted mode the CSP blocks these external references.
1 comment
Comment by Rex