-1

webpack 4 appears to be adding code like this into the bundle

    try {
      n = n || new Function("return this")();
    } catch (e) {
      "object" == typeof window && (n = window);
    }

We have strict security which means this will fail csp because of the new Function code.

Adding unsafe-eval to csp is not an option unfortunately.

Is it possible to stop wepback from adding this code?

I have tried setting node to the following:

    node: {
      module: 'empty',
      dgram: 'empty',
      dns: 'mock',
      fs: 'empty',
      http2: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
      setImmediate: false,
      setTimeout: false,
      setInterval: false,
      global: false
    },

I have set devtool like this:

devtool: 'cheap-module-source-map',

and I have set globlObject to window

globalObject: 'window',

This has reduced the number of new Function calls but it has not removed them.

Ideally we should be using this polyfill

Muhammad Numan
  • 23,222
  • 6
  • 63
  • 80
dagda1
  • 26,856
  • 59
  • 237
  • 450
  • Can you try to set the devtools like this: `source-map`, if its not work, can you keep node global to be false like this: `node: { global: false },` and use global nested of window,but via this way: `plugins: [new webpack.DefinePlugin({ global: 'window' // this is for global used in any node_modules })]` – Anees Hikmat Abu Hmiad Nov 26 '21 at 23:51
  • if define plugins not work, can you test providePlugin: `new webpack.ProvidePlugin({ global: require.resolve('./global.js') })` if all prev solution not work, I think you need to try to use plugin, Also, may some solution for hashed functions via plugins or nonce will be work, like `CSP HTML Webpack Plugin` or `strict-csp-html-webpack-plugin`... – Anees Hikmat Abu Hmiad Nov 26 '21 at 23:54

1 Answers1

0

Make sure that your webpack target is set to web. There's no need to disable all the node things (like fs) manually, if you build for web those things should automatically be removed. It's likely why webpack is including evals since it might not care if it thinks it's going to be executed server side.

If that doesn't work then here are things you can try:

  • The webpack devtool defaults to eval for faster builds, I'm not sure if cheap-module-source-map might still contain CSP violations, so you can also try setting it to source-map or inline-source-map, just to make sure it's not that. https://webpack.js.org/configuration/devtool/, you can also completely disable the devtool and see if it's that, then you can at least pinpoint if it's the devtool.
  • You can also try setting the mode to production, I'm relatively certain that it should work in production and that it's specifically a development issue. That's not really a solution though but if you just need to get things done you can temporarily do that. Alternatively you can also use terser-webpack-plugin or babel to get around it. Or you can try compiling it with SWC and swc-loader, I don't know if swc actually removes the evals, but that's something you can try if nothing else works and swc compilation will be very fast so you can use it in a dev build.
  • I'm not sure if you're using babel but if you are also make sure that it's set to babel-preset-env and not env.
  • Instead of setting node.globals you can also just set node: false, completely disable it. According to How to remove eval and Function constructor from webpack build to avoid CSP issues, just disabling the globals might actually still include the code even if it's not executed, which will still throw a CSP violation even if it's never executed because of Chrome/Firefox scanning it. That's because https://github.com/webpack/webpack/blob/fb8afe71385734cfd65f47949117306a91f20753/buildin/global.js#L10 is including the eval code which might cause the CSP issue, it's also why they recommend using ProvidePlugin instead. However none of this global stuff should be used at all if you're building for web, that globals is directly referring to https://nodejs.org/api/globals.html#globals_global, for a server side build. There's no reason why your target should be node if you're running your code in browser, you're going to run into all sorts of issues.

My intuition is telling me it's likely something silly like the incorrect webpack target, https://webpack.js.org/configuration/target/.

  • setting target: 'web' does not remove any new function calls – dagda1 Nov 29 '21 at 14:33
  • I believe that webpack is already removing evals from production builds but not dev, so it's likely just a dev issue. If that's the case then can you try changing the response header in the dev server to change the content security policy. That way you can at least develop without issues and when you build for production it won't have any unsafe evals. –  Nov 29 '21 at 15:06
  • mode is production – dagda1 Nov 29 '21 at 15:08
  • I am doing a grep on on the compiled source – dagda1 Nov 29 '21 at 15:08
  • That doesn't make sense to me, why are you using devtool if you're building for production. The code you're showing also isn't webpack production compiled code. I've just compiled my webpack library using commonjs, umd and amp and the output doesn't look like what you're showing. Make sure that your webpack is actually compiling in production and using terser. Alternatively upgrade to webpack 5 if that's an option. It could be any package introducing that unsafe code, but if it's transpiled with terser/babel/etc it should have removed it. –  Nov 29 '21 at 15:21
  • If nothing else works then remove all your packages and keep adding them till you find the one that's introducing that code and identify which package it is. –  Nov 29 '21 at 15:21
  • create-react-app does that and I've set it to undefined now so they still come through. I've no idea what webpack config you are using but I can assure you that the mode is production and the target is web. I can assure you it is using terser. – dagda1 Nov 29 '21 at 15:23