2

I am using the npm react-app-rewired customize-cra csp-html-webpack-plugin to give my application more security following this example https://medium.com/@nrshahri/csp-cra-324dd83fe5ff

My config-overrides.js looks like this

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'"]
};

function addCspHtmlWebpackPlugin(config) {
  if (process.env.NODE_ENV === "production") {
    config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
  }

  return config;
}

module.exports = {
  webpack: override(addCspHtmlWebpackPlugin)
};

The problem is that when I try to enter the web page it does not load anything at all and when I check the console it shows me the following list of errors

enter image description here

Is there a better way to apply the security policies so that I can access the page without problems?

Thank you very much for your comments and suggestions in advance.

Antonio Matheus
  • 77
  • 2
  • 8

1 Answers1

0

The CSP in your config and the directives listed in the error messages doesn't match, this could likely mean that multiple CSPs are set. As content needs to pass all CSPs, you'll first need to identify and control all of them. Check response headers and meta tags for any policies.

You will need to add the font-src directive to you CSP based on the first error message. Expand the error to see which hosts names you need to add.

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9
  • I did several tests and several changes in the configuration and managed to reduce the block list a bit, currently the configuration is this const cspConfigPolicy = { "style-src": ["'self'", "'unsafe-inline'"], "default-src": ["'self'"], "base-uri": "'self'", "object-src": "'none'", "script-src": [ "'unsafe-inline'", "'https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js'" ] }; – Antonio Matheus Feb 17 '22 at 15:39
  • and the block list looks like this The source list for Content Security Policy directive 'script-src' contains an invalid source: ''https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js''. Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-UqjdXRl56JFE7IpQ71vJ8w=='". Note that 'unsafe-inline' is ignored Cannot read property 'cssRules' of null Refused to load the image What can i do ? I can't see the webpage yet, only the favicon – Antonio Matheus Feb 17 '22 at 15:44
  • You can allow hosts (unpkg.com), the path should not be included. The inline style violation could be due to a style attribute, which at least in CSP level 2 won't be covered by 'unsafe-inline' and needs to be rewritten. – Halvor Sakshaug Feb 18 '22 at 08:04