'"Content Security Policy of your site blocks the use of 'eval' in JavaScript" warning when setting CSP meta tag in Electron

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.

Solution 1:^[1]

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.

Solution 2:^[2]

If you absolutely must: you can enable string evaluation by adding "unsafe-eval" as an allowed source in a "script-src" directive.

?? Allowing string evaluation comes at the risk of inline script injection.

Solution 3:^[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'">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	NotBeluga981
Solution 3	Sagar M

'"Content Security Policy of your site blocks the use of 'eval' in JavaScript" warning when setting CSP meta tag in Electron

main.js

index.html

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]