Menu
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 usingeval(),new Function(),setTimeout([string], ...)andsetInterval([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.
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);
<!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.
235
Click the extension icon to disable Content-Security-Policy header for the tab. Click the extension icon again to re-enable Content-Security-Policy header. Use this only as a last resort. Disabling Content-Security-Policy means disabling features designed to protect you from cross-site scripting.
'unsafe-eval' allows the application to use the eval() JavaScript function. This reduces the protection against certain types of DOM-based XSS bugs, but makes it easier to adopt CSP. If your application doesn't use eval() , you can remove this keyword and have a safer policy.
The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets. To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files. adding the hash or nonce of the inline script to your CSP header.
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks.
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.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
