title: Why can't a CSP be set with Firebase?
body: <p>I recently went through a pentest from a 3rd party company on my React.js web app, hosting on Firebase Hosting (+ Authentication, Functions, and Storage) and one of the vulnerabilities pointed out by the pentest was not having a Content Security Policy (CSP) set. I made a few attempts on setting a CSP, just as I set my others headers on <code>firebase.json</code>, but I can't seem to find a minimum setting that will actually show my app when deployed to Firebase Hosting. When I set any CSP setting, the Firebase hosted URL after a deploy is just a blank page with nothing on it. Any idea if it is possible to set a CSP without breaking my Firebase hosted app? Below are a few of my attempted settings with errors:</p>
  <ul>
  <li><code>{&quot;key&quot;: &quot;Content-Security-Policy&quot;, &quot;value&quot;: &quot;default-src * data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval';&quot;},</code></li>
  <li><code>{&quot;key&quot;: &quot;Content-Security-Policy&quot;, &quot;value&quot;: &quot;default-src *;&quot;},</code></li>
  <li><code>{&quot;key&quot;: &quot;Content-Security-Policy&quot;, &quot;value&quot;: &quot;default-src 'self'; script-src 'self' https://cdn.firebase.com https://*.firebaseio.com https://www.googletagmanager.com; object-src 'self'; connect-src  data: blob: 'unsafe-inline'; style-src:  data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline';  media-src *; font-src data: blob: 'unsafe-inline'; frame-ancestors * data: blob: 'unsafe-inline';&quot;</code></li>
  </ul>
  <p>Errors:</p>
  <pre><code>appname.web.app/:1 Refused to load the image 'https://appname.web.app/logo192.png' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.web.app/:1 Refused to load the image 'https://appname.web.app/favicon.ico' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.web.app/:1 Refused to load the script 'https://appname.web.app/static/js/main.abc.js' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.web.app/:1 Refused to load the stylesheet 'https://appname.web.app/static/css/main.abc.css' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.app/:1 Refused to execute inline script because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Either the 'unsafe-inline' keyword, a hash ('sha256-aaaaaaabbbbbbbbbcccccc='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.web.app/:1 Refused to load manifest from 'https://appname.web.app/manifest.json' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'manifest-src' was not explicitly set, so 'default-src' is used as a fallback.
  
  appname.web.app/:1 Refused to load the image 'https://appname.web.app/favicon.ico' because it violates the following Content Security Policy directive: &quot;default-src self&quot;. Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
  </code></pre>