0

I need help. https://apis.google.com/js/api.js is getting blocked by csp on my production react app. I have added the webpack config as well.

new CspHtmlWebpackPlugin({
      // 'base-uri': "'self'",
      // 'object-src': "'none'",
      'script-src': [
        "'unsafe-inline'",
        "'unsafe-eval'",
        "https://apis.google.com/js/api.js",
        "https://www.wiris.net/demo/plugins/app/configurationjs",
        "https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js",
        "https://cdn.mathjax.org/mathjax/latest/MathJax.js",
      ],
      'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
    })

i am using csp-html-webpack-plugin

Mohammad Quadri
  • 375
  • 4
  • 12

2 Answers2

0

Suggestions to check:

1. Check if there is a Redirect

If this is getting replicated in your local environment - try to see if there is a redirect (in the chrome network tab). For privacy reasons, in 301/302 redirects to a separate domain (that is not in the allow-list), the CSP report will contain the ORIGINAL request url, which can be very confusing.

2. Try allowing the full domain

i.e. allow https://apis.google.com instead of https://apis.google.com/js/api.js and see if it persists.

3. Extra tip

There is no need/use for 'unsafe-eval' in style-src. You can remove it.

knight87
  • 31
  • 2
  • "try to see if there is a redirect" didn't understand "allow https://apis.google.com" still the same. – Mohammad Quadri Oct 26 '21 at 11:07
  • Try using a [CSP Genrator](https://chrome.google.com/webstore/detail/csp-content-security-poli/fmkkdpolbaacmofciknnofgkknjpbhpm?hl=en) extension, to detect which fields may be missing from your CSP. – knight87 Dec 20 '21 at 12:35
0

Looks like you have miconfigured csp-html-webpack-plugin - you have to include both HtmlWebpackPlugin and CspHtmlWebpackPlugin plugins in your webpack config because last one is based on the first one:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');

module.exports = {
  // rest of webpack config

  plugins: [
    new HtmlWebpackPlugin()
    new CspHtmlWebpackPlugin({
       // CSP config here:
       enabled: true,

       'script-src': [
       "'unsafe-inline'",
       "'unsafe-eval'",
       "'self'",
       "https://apis.google.com/js/api.js",
       "https://www.wiris.net/demo/plugins/app/configurationjs",
       "https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js",
       "https://cdn.mathjax.org/mathjax/latest/MathJax.js",
     ],
     'style-src': ["'unsafe-inline'", "'self'"],

     processFn: defaultProcessFn,
     })
  ]
}

Also do check:

  • which CSP do you really have got in the <meta equiv="content-security-policy" content="..."> tag.
  • do you have any Content-Security-Policy HTTP response header in the Dev Tool because some middleware(e g. Helmet) can publish its own default CSP.

And please add to the question a CSP error message from the browser console.

granty
  • 7,234
  • 1
  • 14
  • 21