CODEWITHSUNDEEP
electroncontent-security-policy
Raphael10
Raphael10

Reputation: 3086

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

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?

Upvotes: 8

Views: 29822

Answers (6)

Mo.
Mo.

Reputation: 27465

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

Upvotes: 1

projektorius96
projektorius96

Reputation: 113

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

Upvotes: 1

Pablo Santos
Pablo Santos

Reputation: 49

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

Upvotes: 2

ozgrozer
ozgrozer

Reputation: 2042

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

{
  "scripts": {
    "electron": "ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ."
  }
}

Upvotes: 4

granty
granty

Reputation: 8496

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

Upvotes: 8

Hans Koch
Hans Koch

Reputation: 4491

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

Upvotes: 7

Related Questions