Webpack 4 build bricks CSP with unsafe-eval

Question

When I try to execute my TypeScript + React Webpack 4 app, the code gets not executed with an error:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'

However, in the generated bundle, I find the following passage in line 1:

/* [...] */ get(e,t,n)}},_=Function("return this")(),C=new Map([[Map,T],[Set,T],[ /* [...] */ 

This is, of course, promply executed, leading to the above error.

From what I can tell, something seems to require a reference to the global object (aka window), and try to get it by invoking Function("return this")().

Indeed, if I change the generated app.<hash>.js and replace the ,_=Function("return this")() with a simple ,_=window everything works, and there aren't any CSP complaints.

package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --port 1234 --hot --inline --mode=development",
    "dev-twitch": "webpack-dev-server --port 1235 --hot --inline --mode=development",
    "build": "webpack -p",
    "build-dev": "webpack -d"
  },
  "author": "",
  "license": "UNLICENSED",
  "dependencies": {
    "@types/node": "^10.12.12",
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "@types/react-transition-group": "^2.0.15",
    "autobind-decorator": "^2.3.1",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-easy-state": "^6.0.6",
    "react-transition-group": "^2.5.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.1",
    "webpack": "^4.29.1",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.10",
    "zip-webpack-plugin": "^3.0.0"
  },
  "devDependencies": {}
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ZipPlugin = require('zip-webpack-plugin');

const htmlPlugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    inject: 'body',
    filename: 'index.html',
    chunks: ['app'],
  }),
];

let appIndex = './src/ts/_entry.tsx';
let outDir = 'dist';

module.exports = (env) => {
  const devMode = process.argv.find(v => v.includes('webpack-dev-server'));

  const styleLoader = devMode ? 'style-loader' : MiniCssExtractPlugin.loader;
  const cssPlugins = [];
  if (!devMode) {
    cssPlugins.push(
      new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[id].[hash].css',
      })
    );
  }

  return ({
    entry: {
      app: appIndex,
    },
    output: {
      path: path.resolve(__dirname, outDir),
      filename:  '[name].[hash].js'
    }, resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: ['.ts', '.tsx', '.js'],
      alias: {
        src: path.resolve(__dirname, 'src/')
      }
    },
    devtool: 'hidden-source-map',
    node: {
      global: false,
    },
    plugins: [
      ...htmlPlugins,
      ...cssPlugins,
      new CleanWebpackPlugin('./' + outDir),
      new CopyWebpackPlugin([{
        from: './src/assets',
        to: './assets/'
      }]),
      new ZipPlugin({
        filename: 'dist-twitch.zip',
        path: __dirname,
      }),
    ],
    module: {
      rules: [
        { test: /\.tsx?$/, use: 'ts-loader' },
        { test: /\.(svg|woff|ttf|eot|woff2|otf)$/, use: 'file-loader' },
        { test: /\.(png|jpg|jpeg)$/, use: 'file-loader' },
        { test: /\.scss$/, use: [styleLoader, 'css-loader','sass-loader'] },
        { test: /\.css$/, use: [styleLoader, 'css-loader'] },
      ]
    },
    devServer: {
      clientLogLevel: 'error',
      overlay: true,
      proxy: {
        '/join': 'http://localhost',
      },
    }
  });
}

How can I modify the build so I don't have to manually touch the results? How can I best find out what module is responsible for the bad code?

Oven

Answer 1

As it turns out, the culprit was @nx-js/observer-util required by react-easy-state.

I have written a pull request which should fix the problem.

Oven

How did you discover it was this package? I'm having the same problem, but do not have either of these packages included and am struggling to find the culprit – Bristletail

Answer 2

I resolved the issue by adding 'devtool: "source-map"' to my config. Please see below.

const clientConfig = {
    mode: 'production',
    target: 'web',
    devtool: "source-map",
    entry: {
      ...
    },
    module: {
       rules: [
          ...
       ],
    },
    output: {
       ...
    },
    resolve: {
       ...
    } 
}

module.exports = [clientConfig]

I discovered this solution here.

Neurovascular

Answer 3

Has anyone found any more detail into getting rid of this. I've been struggling to get around it for magic comments in webpack. It's driving me insane:

Rennet