Firebase Hosting with CSP Foundry
This opens on the Firebase preset with the firebase.json export selected. Firebase Hosting sends the same header on every request, which decides how inline scripts must be handled.
- Start from the static-site preset and add the Firebase client SDK preset if your pages use Auth, Firestore or the Realtime Database.
- Keep Report-Only ticked and copy the firebase.json export into your hosting.headers section.
- Deploy, browse the site, and paste any console errors into the Decode tab for the exact fix.
- Move inline scripts into files, or add their hashes, then switch the header name to Content-Security-Policy.
What to know
Firebase Hosting lets you set response headers in firebase.json under hosting.headers, matched by a source pattern. The value is a fixed string: every request for those paths gets the same header. A nonce has to be different on every response, so nonce-based policies cannot be served by Hosting alone.
With a static header the practical choices are to move inline scripts into external files (best), or to allow each inline block by its sha256 hash. The browser prints the exact hash in the console error for a blocked inline script, and the Decode tab extracts it. Remember that a hash only matches that exact text, so changing one character of the script changes the hash.
Pages that Firebase serves through a Cloud Function or Cloud Run rewrite can set headers per request, so nonces are possible there. For the static part of the site, start in Report-Only and read the reports before enforcing, especially if you use Firebase Auth popups or Analytics, which load extra origins.
Updated · Cosmovex
Questions
How do I add a Content-Security-Policy header in Firebase Hosting?
Add an entry under hosting.headers in firebase.json with a source pattern such as ** and a headers array containing key Content-Security-Policy and your policy as the value. The Build tab generates this block for you.
Can I use nonces with Firebase Hosting?
Not for files served directly by Hosting, because the header is static. Use external script files or sha256 hashes instead. Responses generated by Cloud Functions or Cloud Run can set a fresh nonce on each request.
Does Firebase add its own CSP?
No. Hosting does not add a Content-Security-Policy on its own, so the one in firebase.json is the only one unless something else in front of the site adds a policy.
Why does my Firebase Auth login popup break after adding CSP?
The Auth flow loads scripts and frames from Google and Firebase origins your policy does not allow yet. Deploy as Report-Only, trigger the login, and use the reports or the console errors to see which origins to add.
The free plan covers everything on this page. CSP Foundry Pro ($9/mo, billed monthly) is described on the CSP Foundry page.
