4个的WebPack构建砖CSP不安全-EVAL

Question

当我尝试执行我的打字稿+阵营的WebPack 4应用程序，代码没有得到一个错误执行：

未捕获的EvalError：拒绝，因为“不安全-EVAL”不是脚本在下面的内容安全策略指令所允许源的来评价一个字符串，如JavaScript“脚本的src‘自我’

然而，在生成的束中，我发现在第1行以下文章

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

这是当然，promply执行，导致上述错误。

从我所知道的，有些事情似乎需要对全局对象（又名window）的引用，并尝试通过调用Function("return this")()得到它。

事实上，如果我改变产生app.<hash>.js并更换,_=Function("return this")()用一个简单的,_=window一切正常，并没有任何CSP投诉。

的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',
      },
    }
  });
}

我怎样才能修改构建这样我就不必手动触摸的结果？我怎样才能最好找出模块负责的恶意代码？

Answer 1

事实证明，在@nx-js/observer-util要求react-easy-state的罪魁祸首。

我已经写了pull request应该解决这个问题。