I added a Content-Security-Policy but still the security warning appears
Asked Answered
F

6

8

I added a Content-Security-Policy as suggested here: https://www.electronjs.org/docs/tutorial/security#6-define-a-content-security-policy and here: https://content-security-policy.com/examples/electron/

<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Electron App</title>
</head>
<body>
  <span>Our new Electron app</span>
  <div id="root"></div>
</body>
</html>

But still I get this message: “Electron Security Warning (Insecure Content-Security-Policy). This renderer process has either no Content Security Policy set or a policy with “unsafe-eval” enabled. This exposes users of this app to unnecessary security risks. This warning will not show up once the app is packaged.”

enter image description here

How to solve this security warning?

Fourgon answered 22/10, 2020 at 8:42 Comment(0)
P
1

Least two ways to disable CSP : no package.json


Disable through CLI

Consider running Electron's app source file main.js within CLI as so: ELECTRON_DISABLE_SECURITY_WARNINGS=true npx electron main.js

Hereby using npx I did consider you was clever and installed Electron locally beforehand .

Disable through the process

Define anywhere (top-level would be at best) the following process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']=true

Pledgee answered 28/12, 2021 at 19:0 Comment(2)
Thank you. It seems working fineFourgon
Glad it helped <3Pledgee
H
7

This is intended behaviour, as it says it will trigger on unset or set policy allowing unsafe-evals. They simply want you to make sure to not add any evals without being 100% sure.

For why this is only displayed when building it's only the case if you build your application and your binary is still called "electron".

section from electron docs

Heteroecious answered 23/10, 2020 at 2:29 Comment(1)
That's true, it's just warning to notice us about existing policy of CSP , not a stop sign from continue developing further . I assume this is least applicable for 100% offline appsPledgee
B
6

Add script-src 'self' to the CSP:

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

It should fix the issue. It's a feature of Electron security parser - it does not know abt fallback so thinks that script-src is absent, nitty-gritty is here

Bittner answered 23/10, 2020 at 4:58 Comment(4)
I added this but still get the error. I am using Quasar framework and ElectronDarien
It could possible if your app uses a Content-Security-Policy: default-src 'self'; HTTP header, and you add a <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';"> in try to fix error. An HTTP header is still unsafe, Electron security system checks both header and meta tag.Bittner
I am able to suppress the message by using the answer below from @hans-koch. I added process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' in my app and the messages are gone.Darien
Yes, but in this case you'll lose other security warnings which can occur after improving/modifying your app. You do not need to supress securuty warnings, they appear in Dev mode only and do not appear in production.Bittner
N
4

You can simply add this environment variable to your package.json.

{
  "scripts": {
    "electron": "ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ."
  }
}
Nial answered 2/1, 2021 at 16:3 Comment(3)
I added it to the package.json but still get this warning messageFourgon
Are you running npm run electron?Nial
I also still get the error when adding this to package.json. I am using Quasar framework and Electron.Darien
T
2

After a lot of days searching for the solution I found at VScode sources a function when app is ready

w.protocol.registerHttpProtocol(I.Schemas.vscodeRemoteResource, (Pe, Le) => {
    Le({ url: Pe.url.replace(/^vscode-remote-resource:/, 'http:'), method: Pe.method })
})

So you need a Protocol to replace to http and you have to register as privileged for example

protocol.registerSchemesAsPrivileged([{ scheme: 'server', privileges: { bypassCSP: true } }])
/*----*/
app.whenReady().then(() => {
    protocol.registerHttpProtocol('server', (request, response: any) => {
        const redirect: any = {
            method: request.method,
            url: request.url.replace(/^remote:/, 'http:')
        }

        if (request.method === 'POST' || request.method === 'PUT') {
            redirect.uploadData = {
                contentType: 'application/json',
                data: request.uploadData ? request.uploadData[0].bytes.toString() : ''
            }
        }

        response(redirect)
    })
})

And then, when you make a resquest server://localhost:3000/api you don't will get the error CSP - Content-Security-Policy

Transposal answered 15/9, 2021 at 17:46 Comment(0)
P
1

Least two ways to disable CSP : no package.json


Disable through CLI

Consider running Electron's app source file main.js within CLI as so: ELECTRON_DISABLE_SECURITY_WARNINGS=true npx electron main.js

Hereby using npx I did consider you was clever and installed Electron locally beforehand .

Disable through the process

Define anywhere (top-level would be at best) the following process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']=true

Pledgee answered 28/12, 2021 at 19:0 Comment(2)
Thank you. It seems working fineFourgon
Glad it helped <3Pledgee
S
0

There is option to inject in main.ts file

import { electronApp, optimizer, is } from "@electron-toolkit/utils";

let csp = "script-src 'self'; object-src 'none';";
if (is.dev) {
  csp = "script-src 'self' 'unsafe-inline'; object-src 'none';";
}

Sakmar answered 23/9 at 18:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.