如何在电子应用程序中呈现内容安全错误的反应？

Question

使用 yarn create electron-app my-new-app --template=typescript-webpack 使用 Typescript/Webpack 启动了一个新的 Electron 应用程序，并按照 Electron Forge's directions 添加了 React。

我的文件树是这样的：

-src
--app.tsx
--index.html
--index.ts
--renderer.ts
-webpack.main.config.js
-webpack.renderer.config.js
-webpack.rules.js
-webpack.plugins.js

我在第一次启动时收到了编译警告。

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

React 渲染时出现此警告。

查看此警告后，我浏览了 Electron Security Responsibility 页面以了解有关 CSP 的更多信息。

我将推荐的 <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> 标签添加到我的 index.html 头中，但随后出现错误提示：

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'".

React 停止渲染。

我按照 Webpack/CSP 的指示更改编译器以更改 webpack.main.config.js 中的开发工具，但没有更改。

如何配置它以呈现 React，同时为应用程序提供标准 CSP 保护？

Answer 1

在研究和了解了 CSP 以及 Webpack 如何遵循 CSP 之后，我终于明白了 Electron 的“进程”以及为什么会有“主”和“渲染器”进程。

由于我将我的 React 应用程序加载到“渲染器”进程中，因此我对 webpack.main.config.js 所做的更改在应用程序加载后对渲染器窗口没有影响。

我对@9​​87654323@所做的更改：

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css']
  },
  devtool: 'source-map',
}

这修复了我在控制台中的警告和错误消息。我的反应应用程序在窗口中呈现。