Login/Register
"Content Security Policy of your site blocks the use of 'eval' in JavaScript" warning when setting CSP meta tag in Electron
Asked Answered
javascriptelectrongoogle-chrome-devtoolscontent-security-policy
M

3

17

I am creating an Electron application, and per the Electron security tutorial I have added a CSP meta tag. When running the application, this issue appears in devtools.

Content Security Policy of your site blocks the use of 'eval' in JavaScript

The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unauthorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

No eval calls or other cases of string evaluation are present in my own code. The issue does not give any clue as to what code is causing it, and my attempts to use the 'report-sample' value had no effect on output. The issue does not appear when opening the HTML file in Chrome.

I can recreate the warning with a very basic application.

main.js

const path = require("path");
const { app, BrowserWindow } = require("electron");

const createWindow = () => {
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
    }
  });

  mainWindow.loadURL(`file://${path.join(__dirname, "/index.html")}`);
};

app.on("ready", createWindow);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  <title>Document</title>
</head>
<body>
  <h1>CSP Issue Test</h1>
</body>
</html>

I would like to understand why this issue is appearing and resolve it rather than just suppress the warning.

Mohamed answered 25/12, 2020 at 4:19 Comment(4)
I guess that warning must be generated by Electron. But anyway, it's not saying you have any eval() instances in your code. Instead, it's just saying that, because it's served with a CSP header that disallows eval(), you will not be able to add any code that uses eval(). If you did actually have any instances of eval() in your code, the browser would be logging a CSP error in the devtools console. – Janaye
can you try loadFile instead of loadRUL? The error doesnt hint at this but I would still try it for some reason. mainWindow.loadFile('index.html') – Farrington
I think Chrome has a problem - they're misinterpreting the CSP and their message warning is pointless. By default 'eval' is disallowed by the browser, you don't have to explicitly say so in the CSP. If you wish to enable 'eval' you use 'unsafe-eval' in the CSP. Hopefully Chrome will do away with this pointless message. What they should be doing is warning you if you are using 'unsafe-eval'. – Defiance
I suspect that the hiccup is introduced in the string enclosed by backticks (looks like an eval() in disguise to me). Maybe you should, instead of having path.join(__dirname, "/index.html") evaluated within the string, append it to file:// (as in "file://" + path.join(__dirname, "/index.html")). See if the problem goes away after this modification. – Odalisque
Z
4

Based on the Electron Github repo's issues, "This log message is currently expected in development, if you run your packaged app it will not occur." This is according to one of the Electron contributors.

This issue is closed now but it's still active and some users are saying it is a bit confusing (I agree). Based on this, I think we just ignore it during development. It should go away when the app is packaged according to the contributor though I myself have not tested this out.

Zoometry answered 12/8, 2021 at 8:7 Comment(3)
"You should just ignore it" is an amazingly short-sighted response from the electron devs, and a great way to condition electron users into unintentionally introducing a whole host of actual security issues into their future products... – Cardiomegaly
Yeah, I have the same exact sentiments. I honestly had a hard time "just ignoring it" too because every time I debug my application I'd see that. It's dangerous because, as you've said, when a real (God forbid dangerous) bug enters the app, you might not notice it :// – Zoometry
The problem is, it's the backticks that cause the CSP hiccup. You can reproduce this with vanilla JS (you don't even need Electron for this). – Odalisque
C
0

I am using Electron forge with Webpack , React and TypeScript template and webpack use unsafe-eval to place its scripts to page so based on THIS article in webpack docs I added devtool: 'source-map' to webpack config (webpack.renderer.config.ts):

export const rendererConfig: Configuration = {
  module: {
    rules,
  },
  plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
  devtool: 'source-map',
};

and added Content-Security-Policy to index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Cane answered 9/5 at 10:20 Comment(0)
I
-3

As of version 5, the default for nodeIntegration changed from true to false. You can enable it when creating the Browser Window:

   app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

And Remove this from html

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Ihram answered 24/3, 2021 at 7:38 Comment(3)
this is potentially quite dangerous, and won't solve the issue at hand – disabling nodeIntegration and enabling contextIsolation are useful steps to take to improve the security of an electron app. – Fleabite
But, this warning has nothing to do with nodeIntegration. Having Node integration can still be safe if you don't run any unsafe scripts (assuming you trust yourself to not write bugs :D), but anyway this is not the point. The OP has no eval and has opted in on a security feature, why is this viewed as an "issue"? It only increases security; perhaps I am interpreting "issue" wrong? – Overgrow
This won't solve the actual problem which is introduced by executing JavaScript in a backticked string... – Odalisque

© 2022 - 2024 — McMap. All rights reserved.