Блог

Запустил новое приложение Electron с использованием Typescript/Webpack yarn create electron-app my-new-app --template=typescript-webpack и последовал указаниям Electron Forge, чтобы также добавить 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.
 

Реакция была связана с этим предупреждением.

Изучая это предупреждение, я изучил страницу Ответственности за электронную безопасность, чтобы узнать больше о 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'".
 

Реакция остановила рендеринг.

Я следовал указаниям Webpack/CSP, чтобы изменить компилятор, чтобы изменить инструменты разработки, webpack.main.config.js но без изменений.

Как настроить это так, чтобы оно реагировало, но также имело стандартную защиту CSP для приложения?

После повторного изучения и изучения CSP и того, как Webpack соответствует CSP, я, наконец, понял «процессы» Electron и почему существуют «основные» и «визуализаторы» процессов.

Поскольку я загружал свое приложение React в процесс «визуализатор», изменения, которые я внес webpack.main.config.js , не повлияли на окно визуализации после загрузки приложения.

Изменение, которое я внес в webpack.renderer.config.js :

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

Это исправило мое предупреждение и сообщение об ошибке в консоли. И мое приложение react отображается в окне.