title: Content Security Policy blocking script-src - React app
body: <p>My <code>create-react-app</code> was working fine and after no modification my console displayed <code>Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).</code> (mozilla browser, no error on Chrome).<br />
  On both browsers the display is white : I can't see my app content anymore.</p>
  <ul>
  <li><code>./public/index.html</code> file :
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;!-- commented out to solve issue : &lt;script id=&quot;Cookiebot&quot; src=&quot;https://consent.cookiebot.com/uc.js&quot; data-cbid=string_of_my_key data-blockingmode=&quot;auto&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; --&gt;
  
      &lt;!-- the &lt;meta&gt; I tried to solve my problem : --&gt;
      &lt;meta
          http-equiv=&quot;Content-Security-Policy&quot;
          content=&quot;script-src 
              'self' 
              'unsafe-inline' 
              'unsafe-eval' 
              https://otherurl.com/ 
              https://*.otherurl2.com/
              &quot;
      /&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico?v=2&quot; /&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;%PUBLIC_URL%/apple-icon.png&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons&quot; /&gt;
      &lt;link href=&quot;https://use.fontawesome.com/releases/v5.0.10/css/all.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;title&gt;My title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;noscript&gt; You need to enable JavaScript to run this app. &lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;!-- also commented out for when I'll solve the problem &lt;script id=&quot;CookieDeclaration&quot; src=&quot;https://consent.cookiebot.com/string_of_my_key/cd.js&quot; type=&quot;text/javascript&quot; async&gt;&lt;/script&gt; --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  With the help of <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" rel="nofollow noreferrer">the MDN doc</a>.
  <ul>
  <li>First I did add the <code>'self'</code> keyword, which made me get an error for each services using something other than <code>http://localhost:3000</code>.</li>
  <li>So I did add the corresponding foreign URLs one by one after each error appearing.</li>
  <li>After seeing <code>Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).</code> I added <code>'unsafe-eval'</code>. It stops showing this error.</li>
  <li>Then I have the error I show you in my first sentence. I add <code>'unsafe-inline'</code> to test but nothing changes.</li>
  </ul>
  </li>
  <li>I did make a new branch, and removed commits one by one to see when the error appears. For each <code>git reset --hard HEAD~1</code> I see the same error in the browser console.</li>
  <li>I tried to compile the <code>/public</code> folder.</li>
  <li>No Google result or Sackoverflow helped me for now (searching yesterday afternoon to today right now. I hope I'm just bad at searching)</li>
  </ul>
  <p>I never had to deal with this before in my react applications.</p>
  <p><strong>UPDATES</strong></p>
  <ul>
  <li>I'm using Material-UI, maybe it could influence</li>
  <li>I tried to add <code>INLINE_RUNTIME_CHUNK=false</code> to <code>.env</code> file <a href="https://stackoverflow.com/a/63622155/11033369">like this</a>, then rebuild and deploy. It didn't change anything</li>
  <li>I commented out all recent <code>&lt;a&gt;</code>, and <code>&lt;img required(&quot;...&quot;) /&gt;</code> tags to make sure I'm not in <a href="https://stackoverflow.com/questions/64614336/why-do-i-get-the-default-src-none-content-security-policy-error-on-react-pw">this case</a>.</li>
  <li>EDIT : replace html sample with full <code>index.html</code> code.</li>
  </ul>