CODEWITHSUNDEEP
typescriptwebpackelectronxsscontent-security-policy
Tanner Priest
Tanner Priest

Reputation: 161

How to render react in electron app with content security error?

Started a new Electron app with Typescript/Webpack using yarn create electron-app my-new-app --template=typescript-webpack and followed Electron Forge's directions to add React as well.

My file tree was this:

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

I had a compile warning on first start up.

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 was rendering with this warning.

Looking into this warning I explored the Electron Security Responsibility page to learn more about CSP.

I added the recommended <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> tag into my index.html head, but then got an error saying:

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 stopped rendering.

I followed Webpack/CSP directions to change the compiler to change the devtools in webpack.main.config.js but no change.

How do I configure this to render React but also have standard CSP protection for the app?

Upvotes: 3

Views: 2412

Answers (1)

Tanner Priest
Tanner Priest

Reputation: 161

After reasearching and learning about CSP and how Webpack complies with CSP, I finally caught on to the "processes" of Electron and why there is a "main" and "renderer" processes.

Since I was loading my React app into the "renderer" process, the changes I made to webpack.main.config.js had no effect on the renderer window after the app loaded.

The change I made to webpack.renderer.config.js:

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

This fixed my warning and error message in the console. And my react app renders in the window.

Upvotes: 5

Related Questions