configure react-app-rewired customize-cra

Viewed 338

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

0 Answers
Related