Content security policy in React app didn't block online script

Question

I followed this 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 config-overrides.js file:

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),
};

To test if it works I built the app with npm run build (as CSP is just added to production build) but before, to test if it works I added jquery to the script inside index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Unfortunatey the jquery is added to build, CSP didn't block it.

Am I doing something wrong? Or I misunderstand the content security policy?

Can you verify that the `meta http-equiv="Content-Security-Policy"` is being generated? If so, can you share what it looks like? — Grax32, Jan 07 '20 at 15:43

awran5 · Accepted Answer · 2020-01-14T09:23:14.993

Actually you don't need a Package to achieve that, you can just add a <meta> tag as your first element to <head> block inside index.html founded in public folder.

As for jQuery issue, my guess that maybe a hash or nonce that auto generated by csp-html-webpack-plugin is referring to jQuery which could lead to allow it?

Also, please note that using unsafe-eval eval is considered unsafe. And should be avoided.

With that in mind, please note that if you're going to test your site security in some online security tools, it will basically Fail. Yes, adding a <meta> security tags could be enough for basic protection though, you may consider using server-side HTTP Headers for other security vulnerabilities. Actually meta tag is not needed, it's optional.

For instance, as for CSP policies, I've deployed a test react app using <meta> method, when testing on immuniweb.com or gf.dev, you'll see that there is No CSP policy! though, it works fine, see test Here

So if you can configure your server environment, I encourage you to do that. You could use Express with express-csp-header and/or using Nginx as a reverse proxy

If you can't, try setting your <meta> its fairly easy:

Syntax will be:

<meta http-equiv="Content-Security-Policy" content="directive 'source';">

Just like key-value pair where directives are the keys i.e. base-uri, script-src, style-src and sources (with single quotations marks) are the values i.e. self, none, unsafe-inline

See Directive Reference List | Source Reference List

For example since you are using React and React is using inline scripts <script></script>, you'll need to add 'unsafe-inline' to your script directive like so:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self'; base-uri 'self';">

If you were to add some inline CSS or going to use a library like styled-components, you'll need to add 'unsafe-inline' to your style directive as well:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; base-uri 'self';">

If you like to allow some external URLs like google font or analytics:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' www.google-analytics.com 'unsafe-inline'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; base-uri 'self';">

Read more about directive and rules here You can also generate your own policy Here

Hello, but using this meta tag you mentioned is enough for productiton and we don't need any express-csp-header or using Nginx as a reverse proxy as you mentioned earlier right? This is just for testing? — jake-ferguson, Jan 11 '20 at 07:29
If this meta tag is enough what for is everything described in the article I mentioned? — jake-ferguson, Jan 11 '20 at 07:30
@jake-ferguson It should be enough for basic protection though, you may consider using true HTTP set for different security vulnerabilities. Actually meta tag is not needed, it's optional. — awran5, Jan 11 '20 at 13:23

Content security policy in React app didn't block online script

1 Answers1