I'm referring to a blog to create a Content security policy for react app. So I have a config-overrides.js file in the root directory like shown below.
const {override} = require('customize-cra');
const cspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
const cspConfigPolicy = {
'img-src': [" 'self' blob: https://api.company.com/ data:"],
'script-src': ["'self' https://checkout.stripe.com js.stripe.com
https://billing.stripe.com "],
'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),
};
But now my antd is getting blocked due to this. So I want to relax my 'style-src'. But no matter what I do, I'm getting this for my styles-src
antd-img-crop.esm.js:9
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-DpAweweKDz9FwBjXOzKpPA==' 'nonce-Hf+DsdsdP3OuYC3sd7ySSSDSDA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-rxbt5XYctks62gS3ASASDA3mOtRLi3xaSU8='), or a nonce ('nonce-...') is required to enable inline execution.
How to relax 'style-src' in config.overrides.js