title: Content security policy in React app didn't block online script
body: <p>I followed <a href="https://medium.com/@nrshahri/csp-cra-324dd83fe5ff" rel="noreferrer">this</a> article to add CSP to my existing react app. I did all the steps written in "Using inline script or style" there and here is my <code>config-overrides.js</code> file:</p>
  
  <pre><code>const { override } = require('customize-cra');
  const cspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
  
  const cspConfigPolicy = {
    'default-src': "'none'",
    'base-uri': "'self'",
    'object-src': "'none'",
    'script-src': ["'self'"],
    'style-src': ["'self'"],
    'img-src': ["'self'"],
  };
  
  function addCspHtmlWebpackPlugin(config) {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
    }
  
    return config;
  }
  
  module.exports = {
    webpack: override(addCspHtmlWebpackPlugin),
  };
  </code></pre>
  
  <p>To test if it works I built the app with <code>npm run build</code> (as CSP is just added to production build) but before, to test if it works I added jquery to the script inside <code>index.html</code>:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Unfortunatey the jquery is added to build, CSP didn't block it. </p>
  
  <p><a href="https://i.stack.imgur.com/kbGRE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kbGRE.png" alt="enter image description here"></a></p>
  
  <p>Am I doing something wrong? Or I misunderstand the content security policy?</p>