How to prevent Electron Security Warning (Insecure Content-Security-Policy) #19775

TomasHubelbauer · 2019-08-15T14:40:39Z

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.

The text was updated successfully, but these errors were encountered:

TomasHubelbauer · 2019-08-15T14:45:55Z

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 · 2019-08-18T04:13:10Z

You can add this inside your HTML <head>:

<meta http-equiv="Content-Security-Policy" content="script-src 'self';">

i.e. make it

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

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 · 2019-08-19T07:53:52Z

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.

…rity checklist (#19819) I've asked #19775 because I was frustrated with how hard it was to find a way to fix (instead of hide) the CSP warning in Electron and I complained that even the official quick start guide wasn't compliant with the security checklist at https://electronjs.org/docs/tutorial/security. Someone helped me out with a CSP meta tag which I have later noticed is indeed mentioned in the checklist, too: https://electronjs.org/docs/tutorial/security#csp-meta-tag. I have not used the checklist one verbatim because it prevents a `script` tag from working when serving `index.html` through the `file:` protocol as the quick start does. I instead used the one the person in my issue recommended which seems to work well to me. I am not that well versed in CSP so there might be a better policy to include with the quick start, but this is what I've got for now.

Install ng-bootstrap https://ng-bootstrap.github.io/#/getting-started Remove warning with this. electron/electron#19775

…developer tools". See this comment: <electron/electron#19775 (comment)>

mvictorl · 2021-03-01T09:27:26Z

No description provided.

mvictorl · 2021-03-01T09:28:11Z

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">

Alexie81 · 2021-05-07T17:44:17Z

This is the best answer:

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

Thanks @TomasHubelbauer this is the best !

linonetwo · 2021-12-27T16:24:56Z

Solution: protocol.registerSchemesAsPrivileged and the bypassCSP

protocol.registerSchemesAsPrivileged([
 { scheme: 'http', privileges: { standard: true, bypassCSP: true, allowServiceWorkers: true, supportFetchAPI: true, corsEnabled: true, stream: true } },
 { scheme: 'https', privileges: { standard: true, bypassCSP: true, allowServiceWorkers: true, supportFetchAPI: true, corsEnabled: true, stream: true } },
 { scheme: 'mailto', privileges: { standard: true } },
]);

#31029

caochitam · 2023-01-23T23:00:55Z

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";

DarkSynx · 2023-04-17T10:41:28Z

No description provided.

thanhle7 · 2023-08-13T18:52:41Z

The best solution is to use env settting, only when developing.

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

TomasHubelbauer mentioned this issue Aug 15, 2019

in DevTools console: Electron Security Warning (Insecure Content-Security-Policy) #12035

Closed

TomasHubelbauer closed this as completed Aug 19, 2019

TomasHubelbauer mentioned this issue Aug 19, 2019

docs: Add a CSP meta tag to make the tutorial compiant with the security checklist #19819

Merged

damasch pushed a commit to damasch/electron-app that referenced this issue Apr 16, 2020

Add NG-Bootstrap remove warnings

947d895

Install ng-bootstrap https://ng-bootstrap.github.io/#/getting-started Remove warning with this. electron/electron#19775

delhanty pushed a commit to delhanty/svelte-template-electron that referenced this issue Aug 14, 2020

Add CSP (content security policy) in meta tag to silence warning in "…

ebf9074

…developer tools". See this comment: <electron/electron#19775 (comment)>

DJ2LS mentioned this issue Aug 13, 2021

Electron Security Warning (Insecure Content-Security-Policy) DJ2LS/FreeDATA#56

Closed

DarkSynx mentioned this issue Apr 17, 2023

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'"> #38002

Closed

bixis referenced this issue in bixis/desktop-organizer Jun 3, 2024

fix fatal error when shifting object into mainMenuTemplate

da9f3fd

MulverineX mentioned this issue Jul 15, 2024

[Bug]: Can't play content added from RSS feed such as podcast from soundcloud CORS issue? th-ch/youtube-music#1620

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to prevent Electron Security Warning (Insecure Content-Security-Policy) #19775

How to prevent Electron Security Warning (Insecure Content-Security-Policy) #19775

TomasHubelbauer commented Aug 15, 2019

TomasHubelbauer commented Aug 15, 2019

rooklift commented Aug 18, 2019 •

edited

Loading

TomasHubelbauer commented Aug 19, 2019

mvictorl commented Mar 1, 2021

mvictorl commented Mar 1, 2021

Alexie81 commented May 7, 2021

linonetwo commented Dec 27, 2021 •

edited

Loading

caochitam commented Jan 23, 2023

DarkSynx commented Apr 17, 2023

thanhle7 commented Aug 13, 2023

How to prevent Electron Security Warning (Insecure Content-Security-Policy) #19775

How to prevent Electron Security Warning (Insecure Content-Security-Policy) #19775

Comments

TomasHubelbauer commented Aug 15, 2019

TomasHubelbauer commented Aug 15, 2019

rooklift commented Aug 18, 2019 • edited Loading

TomasHubelbauer commented Aug 19, 2019

mvictorl commented Mar 1, 2021

mvictorl commented Mar 1, 2021

Alexie81 commented May 7, 2021

This is the best answer:

linonetwo commented Dec 27, 2021 • edited Loading

caochitam commented Jan 23, 2023

DarkSynx commented Apr 17, 2023

thanhle7 commented Aug 13, 2023

rooklift commented Aug 18, 2019 •

edited

Loading

linonetwo commented Dec 27, 2021 •

edited

Loading