为啥我在将我的 Electron 项目更新到最新版本后会看到“电子安全警告”？

Posted 2023-02-16

【中文标题】为啥我在将我的 Electron 项目更新到最新版本后会看到“电子安全警告”？

【英文标题】：Why do I see an "Electron Security Warning" after updating my Electron project to the latest version?为什么我在将我的 Electron 项目更新到最新版本后会看到“电子安全警告”？

【发布时间】：2018-07-28 23:39:19

【问题描述】：

我从 this Vuetify's boilerplate 创建了 Electron-Vuejs-Vuetify 项目

我在控制台中看到了这个警告：

Electron Security Warning 
This renderer process has Node.js integration enabled and 
attempted to load remote content. This exposes users of this app to severe security risks.

For more information and help, consult https://electronjs.org/docs/tutorial/security

问题：

什么可能导致 - Node、Vue.js、webpack 的 localhost 配置？我该怎么办？

【问题讨论】：

不明白你的问题，你问为什么你会看到这个警告？或者你到底在问什么？

@antzshrek 好吧，在您的应用程序中出现警告并不是一件好事。这意味着某事正在做不该做的事，所以我试图了解发生了什么问题以及如何修复它

是的，出了点问题。

我使用了github.com/SimulatedGREG/electron-vue 样板，我也遇到了同样的问题。谢谢你的好问题！

【参考方案1】：

将以下行添加到main.js：

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

但是你应该阅读Security, Native Capabilities, and Your Responsibility 充分了解这样做的含义。

【讨论】：

是的，我补充了，但这不是主要问题。我试图弄清楚 为什么 Chrome 会在新创建的 Electron 项目中显示那些可怕的警告。 Github 上有 2 个关于这个问题的问题，但仍然没有关于如何解决这些“安全问题”的信息

当您尝试通过代码中的“http-//example.com”之类的内容访问内容时，这与潜在的安全漏洞有关。使用相对路径将停止警告，它们也不会仅在开发人员在 dev 中查看控制台时显示在生产版本中。

process 指的是什么？

@netlander 你能扩展一下吗？我只使用相对路径，我收到了警告。我也有nodeIntegration: true，但我需要它。

@bluenote10 process 是 NodeJS 提供的东西，包含很多关于你的 Node/应用程序实例的运行过程的信息

【参考方案2】：

你有这个：

电子安全警告 此渲染器进程启用了 Node.js 集成，并且 试图加载远程内容。这会使该应用的用户面临严重的安全风险。

因为来自Electron Documentation 的第二个安全建议

2) 禁用远程内容的 Node.js 集成

在加载远程内容的任何渲染器（BrowserWindow、BrowserView 或 WebView）中禁用 Node.js 集成至关重要。目标是限制您授予远程内容的权力，从而使攻击者在您的用户获得在您的网站上执行 javascript 的能力时更难伤害他们。

在此之后，您可以为特定主机授予额外权限。例如，如果您打开一个指向“https://my-website.com/”的 BrowserWindow，您可以为该网站提供所需的功能，但仅此而已。

为什么？

如果攻击者可以跳出渲染器进程并在用户计算机上执行代码，则跨站点脚本 (XSS) 攻击会更加危险。跨站点脚本攻击相当普遍 - 虽然是一个问题，但它们的威力通常仅限于弄乱执行它们的网站。禁用 Node.js 集成有助于防止 XSS 升级为所谓的“远程代码执行”(RCE) 攻击。

如何？

// Bad
const mainWindow = new BrowserWindow()
mainWindow.loadURL('https://my-website.com')

// Good
const mainWindow = new BrowserWindow(
  webPreferences: 
    nodeIntegration: false,
    preload: './preload.js'
  
)

mainWindow.loadURL('https://my-website.com')

---

<!-- Bad -->
<webview nodeIntegration src="page.html"></webview>

<!-- Good -->
<webview src="page.html"></webview>

当禁用 Node.js 集成时，您仍然可以向您的网站公开使用 Node.js 模块或功能的 API。预加载脚本继续可以访问 require 和其他 Node.js 功能，允许开发人员将自定义 API 公开给远程加载的内容。

在以下示例预加载脚本中，稍后加载的网站将可以访问 window.readConfig() 方法，但没有 Node.js 功能。

const  readFileSync  = require('fs')

window.readConfig = function () 
  const data = readFileSync('./config.json')
  return data

因此，您已收到警告，以便您可以为远程内容禁用 Node.js 集成。

我希望这有助于回答您的问题。

【讨论】：

感谢您的解释。但不幸的是，这无济于事。我将nodeIntegration: false, 添加到mainWindow 的webPreferences 中，但现在我看到了2 个Uncaught ReferenceError: module is not defined，它们指向“index.js”文件和“renderer.js”文件中的<link> 标签（webpack 的我想加载模块的文件）

当我将鼠标悬停在renderer.js 错误上时，我可以看到它指向http://localhost:9080/renderer.js，也许 webpack 在开发模式下正在做一些电子不喜欢的事情。 mainWindow 将此作为 url 加载： const winURL = process.env.NODE_ENV === 'development' ？ http://localhost:9080 : file://$__dirname/index.html 那么也许 Electron 不喜欢 localhost 地址，认为它会加载一些外部网站？

它显示加载资源失败：net::ERR_SSL_PROTOCOL_ERROR。我尝试从样板文件创建一个新项目，现在我立即看到这个错误，甚至没有自己做任何事情。我想样板有问题

@JimmyBreck-McKye 在上次 electron-vue 样板更新后，每个人都看到了这个警告

@Un1 是的，我昨天下午的某个时候放弃了那个样板。在我们说话的时候，我实际上是在写我自己的，试图解决这些问题。据我所知，问题是如果电子从 webpack-dev-server 运行，window.location.protocol 不是“文件”会使 Electron 抛出错误。

【参考方案3】：

Electron security checklist 提到了如何处理安全警告。特别是，当从 file: 协议（不能使用 HTTP CSP 标头）提供 index.html 时，可以将元标记用于相同目的，如此处的安全检查表中所述：CSP HTTP header。

建议使用

<meta http-equiv="Content-Security-Policy" content="default-src 'none'" />

...但我发现（在 GitHub 上获得帮助 here）这个更实用，因为它允许使用 script src：

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

有关 CSP 的更多信息，请访问 content-security-policy.com。

【讨论】：

在 main.js 文件 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

中添加以下行

您写的不是其他答案中讨论的解决方案。我的答案是预防问题的正确解决方案，而不是忽略它们。

【参考方案4】：

较新版本的电子 Vue 模板具有这些 警告，这些警告之前在 beta 中被禁用：

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

现在需要您在 index.js 中执行以下操作：

process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';

【参考方案5】：

添加

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

这样，错误信息就会消失。

【参考方案6】：

从 Electron 2.0 开始，开发人员将看到打印到开发人员控制台的警告和建议。它们仅在二进制文件名为 Electron 时出现，表明开发人员当前正在查看控制台。

我建议您遵循 Electron 官方安全建议清单以避免这些警告https://github.com/electron/electron/blob/master/docs/tutorial/security.md

【讨论】：

这不是重点，人们会感到困惑，因为这些警告会让您认为自己做错了什么，并使您的应用使用起来非常危险

【参考方案7】：

TLDR：在 BrowserWindow 选项中禁用 eval()。

我刚刚在最新的电子、vue 等上完成了这个过程，解决方案是禁用eval()，这可能是一个安全风险，因为它执行的代码不是来自您（或您的应用程序）。

在创建窗口期间将allowEval: false 添加到您的webPreferences 以完全防止警告：

const win = new electron.BrowserWindow(
    webPreferences: 
        allowEval: false // This is the key!
    
);

一些背景信息：electron 实际上尝试执行一些 javascript 代码（从使用 require('electron').executeJavaScript 的字符串），如果成功，它会认为您的代码不安全。

【讨论】：

这对我来说似乎没有任何区别。我已禁用它，但仍然收到警告。