在与应用程序一起打包的本地页面上启用 Electron 中的 nodeIntegration 是否安全？

Question

我在创建自定义窗口控件（如关闭、最小/最大和还原）时遇到问题，但 nodeIntegration 已关闭。我在渲染器的本地 html 文件中创建了按钮

main.js

mainWindow = new BrowserWindow({
    x, y, width, height,
    frame: false,
    show: false,
    webPreferences: { devTools: true }
});

mainWindow.loadURL(url.format({
    protocol: 'file:',
    slashes: true,
    pathname: path.join(__dirname, 'assets', 'index.html')
}));

index.html

<div id='minimize' class='noSelect'>&#xE921;</div>
<div id='maximize' class='noSelect'>&#xE922;</div>
<div id='restore' class='noSelect'>&#xE923;</div>
<div id='close' class='noSelect'>&#xE8BB;</div>

<script type='text/javascript' src='../assets/js/index.js'></script>

默认情况下，nodeIntegration 处于关闭状态，因此index.js 无法访问 Node。但是，我需要能够向按钮添加功能以关闭、最小/最大和恢复窗口。

index.js

const { remote } = require('electron');
const mainWindow = remote.getCurrentWindow();

document.getElementById('close').addEventListener('click', () => {
  mainWindow.close();
});

这不起作用，因为 nodeIntegration 被禁用。在本地页面中启用它是否安全？如果没有，这样做的安全方法是什么？

Answer 1

TL;DR：仅当您从不受信任的来源（即互联网或用户输入）加载和执行代码时，启用 nodeIntegration 才会带来风险。

如果您完全确定您的应用程序只会运行您创建的代码（并且没有 NodeJS 模块从互联网加载脚本），基本上，启用nodeIntegration 的风险很小。

但是，如果您允许用户运行代码（即输入然后eval 它），或者您提供插件 API，而您无法控制加载的插件，风险级别会上升，因为NodeJS 允许任何 NodeJS 脚本（例如）操作文件系统。

另一方面，如果禁用nodeIntegration，则无法与主进程通信或操作BrowserWindow，因此无法创建自定义窗口控件。

Answer 2

请记住，在 2021 年，您不需要通过 renderer 进程与 main 进程通信。

相反，您使用消息传递，如下所示：
main.js

const {app, BrowserWindow, ipcMain} = require("electron");
const path = require("path");

app.whenReady().then(open_window);

function open_window() {
  // Explain: Create app window.
  const appWin = new BrowserWindow({
    width: 800,
    height: 600,
    opacity: 0.5,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },

  // Explain: Render the app.
  void minisWindow.loadFile("index.html");
  
  // Spec: User can hide App window by clicking the button.
  ipcMain.on("hide-me", () => appWin.minimize());
  
  // Spec-start: When User focuses App window - it becomes fully opaque.
  ipcMain.on("make-window-opaque", () => appWin.setOpacity(1));
  appWin.on("show", () => minisWindow.setOpacity(1));
  appWin.on("blur", () => minisWindow.setOpacity(0.5));
  // Spec-end.
}

preload.js

const {ipcRenderer} = require("electron");

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener("DOMContentLoaded", () => {
  // Spec: User can hide App window by clicking the button.
  document.querySelector("#hideBtn").addEventListener("click", 
    () => ipcRenderer.send("hide-me"));
  });

  // Spec: When User focuses App window - it becomes fully opaque.
  document.body.addEventListener("click", () => ipcRenderer.send("make-window-opaque"));
});

这个例子说明了消息传递的两个实例：

1. 当用户单击 #hideBtn 按钮时 - 发送一条消息，指示 main 隐藏窗口。
2. 默认情况下窗口是半透明的；当用户点击窗口时（本质上，激活body 上的clickz 事件） - 发送一条消息，指示main 使窗口完全不透明。