Difficulty: Advanced
Problem
1. frontend/nginx.conf CSP includes style-src 'self' 'unsafe-inline'
The Content-Security-Policy header at line 14 of frontend/nginx.conf allows inline styles: style-src 'self' 'unsafe-inline'. Tailwind CSS generates class-based styles — no inline style="..." attributes or <style> tags are needed in the built output. The 'unsafe-inline' directive is therefore unnecessary and weakens the CSP's defense against CSS injection attacks.
2. CSP script-src only allows 'self' — but Vite-built bundles may require sha256 hashes for inline initialization scripts
script-src 'self' blocks all inline scripts. Vite may emit a small inline initialization script in the built index.html for module preloading or environment variable injection. If this script runs and is blocked by CSP, the app will fail silently in production with no browser error displayed to users.
3. No CSP connect-src directive — fetch requests to the backend API are not explicitly allowed
The CSP has no connect-src directive, meaning fetch/XHR requests are governed by default-src 'self'. If the backend API runs on a different origin or port (e.g., http://localhost:4000 in development or https://api.lineproof.com in production), those requests will be blocked by the CSP in a production deployment.
Impact: 'unsafe-inline' in style-src provides no value and weakens XSS protection. Missing connect-src will silently break all API calls in production. A CSP violation during Vite script loading will crash the app.
Proposed Solution
- Remove
'unsafe-inline' from style-src (Tailwind does not need it in production builds).
- Add
connect-src 'self' ${API_URL} using an nginx environment variable or a build-time substitution.
- Run a Vite build and inspect the output for any inline scripts; if present, generate the correct
sha256 hash and add it to script-src.
- Test the CSP with
Report-Only mode before enforcing.
Acceptance Criteria
Contributor Note
If assigned, your PR must show the browser Network tab with the CSP header applied, and confirm no CSP violations in the browser console for the production build. Show any inline scripts found in the Vite build output.
Difficulty: Advanced
Problem
1.
frontend/nginx.confCSP includesstyle-src 'self' 'unsafe-inline'The
Content-Security-Policyheader at line 14 offrontend/nginx.confallows inline styles:style-src 'self' 'unsafe-inline'. Tailwind CSS generates class-based styles — no inlinestyle="..."attributes or<style>tags are needed in the built output. The'unsafe-inline'directive is therefore unnecessary and weakens the CSP's defense against CSS injection attacks.2. CSP
script-srconly allows'self'— but Vite-built bundles may requiresha256hashes for inline initialization scriptsscript-src 'self'blocks all inline scripts. Vite may emit a small inline initialization script in the builtindex.htmlfor module preloading or environment variable injection. If this script runs and is blocked by CSP, the app will fail silently in production with no browser error displayed to users.3. No CSP
connect-srcdirective — fetch requests to the backend API are not explicitly allowedThe CSP has no
connect-srcdirective, meaning fetch/XHR requests are governed bydefault-src 'self'. If the backend API runs on a different origin or port (e.g.,http://localhost:4000in development orhttps://api.lineproof.comin production), those requests will be blocked by the CSP in a production deployment.Impact:
'unsafe-inline'in style-src provides no value and weakens XSS protection. Missingconnect-srcwill silently break all API calls in production. A CSP violation during Vite script loading will crash the app.Proposed Solution
'unsafe-inline'fromstyle-src(Tailwind does not need it in production builds).connect-src 'self' ${API_URL}using an nginx environment variable or a build-time substitution.sha256hash and add it toscript-src.Report-Onlymode before enforcing.Acceptance Criteria
'unsafe-inline'removed fromstyle-srcinnginx.confconnect-srcdirective added allowing the backend API originreport-uriorreport-toendpoint for violation reportingdocs/deployment-strategy.mdupdated with CSP configuration guidanceContributor Note
If assigned, your PR must show the browser Network tab with the CSP header applied, and confirm no CSP violations in the browser console for the production build. Show any inline scripts found in the Vite build output.