Description
I have a question about CSP in Electron 6 which has already been asked on Stack Overflow here:
https://stackoverflow.com/q/48854265/2715716
However, the question was not answered (there are only recommendations on how to disable the warning, not how to actually prevent the warning from showing).
There is a security checklist for Electron available at https://electronjs.org/docs/tutorial/security, which is very helpful. However, even in the simplest case, I still run afoul of these warnings even when following the most basic simplest Electron tutorial! https://electronjs.org/docs/tutorial/first-app
I don't believe that such a basic issue has been undiscovered for all this time and I'm the first person just coming across this, but alas I have not been able to find a solution.
My repro is simple, it consists of only 4 files:
package.json:
{
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^6.0.2"
}
}main.js:
const electron = require('electron');
electron.app.on('ready', () => {
const window = new electron.BrowserWindow({ width: 640, height: 480 });
window.loadFile('./index.html');
window.webContents.openDevTools();
});index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="index.js"></script>
</head>
<body></body>
</html>index.js:
window.addEventListener('load', () => {
document.body.append(document.createTextNode('Hello, World!'));
});This is how far I got with Electron before I ran into my first roadblock. Now how does one go about fixing up this code to avoid the warning?
From what I read, nodeIntegration has been false by default since version 5.
Hiding these warnings using process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'; is not a fix, it's hiding the warning.
I cannot attach CSP headers to the index.html file because it is loaded from the disk, not from the network.
Ignoring this warning because it is not present when the app is packaged is not a solution either, because it equals to hiding the warning (by ignoring it) instead of fixing it.
In #12035 @MarshallOfSound says to follow the security checklist and the warning will go away. What am I running afoul of in the security checklist in the above repro that they don't go away for me?
What is there left to do to get this warning to go away?
It would be awesome to have an answer for this in the Stack Overflow question as that's where Google takes you on your quest to find out.
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Participants
Activity
TomasHubelbauer commentedon Aug 15, 2019
Right now I can only think of two things: the warning is shown all the time no matter your application code, which I hope is not the case, because that doesn't seem like a right way to go about shedding light on a security checklist or the warning is shown because a
file:protocol file is being loaded, which would then imply then I have to run a local web server to serve the static files with CSP headers for the renderer window, which I also hope is not the case, because it IMO needlessly complicates simple Electron applications.rooklift commentedon Aug 18, 2019
You can add this inside your HTML
<head>:<meta http-equiv="Content-Security-Policy" content="script-src 'self';">i.e. make it
You'll need to add a more detailed policy as you use more resources, of course. I don't know how much you know about CSP, you may or may not find this useful: https://content-security-policy.com/
TomasHubelbauer commentedon Aug 19, 2019
Thank you! I found that this is actually included in the security checklist and I just missed it:
https://electronjs.org/docs/tutorial/security#csp-meta-tag
I'll see if I can improve the quickstart tutorial to include this meta tag.
docs: add a CSP meta tag to make the tutorial compliant with the secu…
Add NG-Bootstrap remove warnings
Add CSP (content security policy) in meta tag to silence warning in "…
mvictorl commentedon Mar 1, 2021
mvictorl commentedon Mar 1, 2021
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">Alexie81 commentedon May 7, 2021
This is the best answer:
Thanks @TomasHubelbauer this is the best !
linonetwo commentedon Dec 27, 2021
Solution:
protocol.registerSchemesAsPrivilegedand thebypassCSP#31029
caochitam commentedon Jan 23, 2023
I resolve this problem by import to index.css
My typescript electron forge project - index.css first line:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";if your project is not typescript i think you can with:
@import "node_modules/bootstrap/dist/css/bootstrap.min.css";5 remaining items