CODEWITHSUNDEEP
reactjswebpackcontent-security-policyreact-app-rewiredcustomize-cra
Antonio Matheus
Antonio Matheus

Reputation: 77

Adding csp-html-webpack-plugin dosnt load my react webpage

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.

Upvotes: 2

Views: 1323

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3455

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.

Upvotes: 0

Related Questions