我添加了 Content-Security-Policy 但仍然出现安全警告

Question

我按照此处的建议添加了内容安全策略：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>

但我仍然收到此消息： “电子安全警告（不安全的内容安全策略）。此呈现器进程没有设置内容安全策略或启用了“不安全评估”的策略。这会使此应用程序的用户面临不必要的安全风险。应用程序打包后将不会出现此警告。”

如何解决这个安全警告？

Answer 1

这是预期的行为，因为它说它将在未设置或设置允许 unsafe-evals 的策略时触发。他们只是希望您确保在没有 100% 确定的情况下不要添加任何评估。

For why this is only displayed when building 只有当您构建应用程序并且您的二进制文件仍称为“电子”时才会出现这种情况。

Answer 2

将 script-src 'self' 添加到 CSP：

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

应该可以解决问题。这是 Electron 安全解析器的一个特性——它不知道 abt fallback 所以认为 script-src 不存在，nitty-gritty 是 here

Answer 3

您只需将此环境变量添加到您的 package.json。

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

Answer 4

在搜索了很多天的解决方案后，我在 VScode 找到了应用准备就绪时的源函数

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

所以你需要一个协议来替换 http 并且你必须注册为特权

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)
    })
})

然后，当您发出请求时 server://localhost:3000/api 您不会收到错误 CSP - Content-Security-Policy

Answer 5

至少两种禁用 CSP 的方法：否 package.json

通过 CLI 禁用

在 CLI 中考虑运行 Electron 的应用程序源文件 main.js：ELECTRON_DISABLE_SECURITY_WARNINGS=true npx electron main.js

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

通过流程禁用

在任何地方定义（顶层最好）以下process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']=true

info taken from

我添加了 Content-Security-Policy 但仍然出现安全警告

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

content-security-policy

electron

至少两种禁用 CSP 的方法：否 package.json

通过 CLI 禁用

通过流程禁用