个人中心
gpt4 book ai didi

javascript - 如何在 Electron 中正确使用 preload.js

转载 作者：行者123 更新时间：2023-12-01 11:36:24 26 4
gpt4 key购买 nike

我正在尝试在我的 fs 中使用 Node 模块(在本例中为 renderer)。过程，像这样:

// main_window.js
const fs = require('fs')

function action() {
    console.log(fs)
}

注意: action当我按下我的 main_window 中的按钮时，函数会被调用.

但这给出了一个错误: 
Uncaught ReferenceError: require is not defined
    at main_window.js:1

我可以解决这个问题， as suggested by this accepted answer , 通过将这些行添加到我的 main.js初始化 main_window 时: 
// main.js
main_window = new BrowserWindow({
    width: 650,
    height: 550,
    webPreferences: {
        nodeIntegration: true
    }
})

但是， according to the docs ，这不是最好的做法，我应该创建一个 preload.js文件并在那里加载这些 Node 模块，然后在我的所有 renderer 中使用它过程。像这样:
main.js : 
main_window = new BrowserWindow({
    width: 650,
    height: 550,
    webPreferences: {
        preload: path.join(app.getAppPath(), 'preload.js')
    }
})
preload.js : 
const fs = require('fs')

window.test = function() {
    console.log(fs)
}
main_window.js : 
function action() {
    window.test()
}

它有效!

现在我的问题是，我应该编写我的 renderer 的大部分代码不是违反直觉吗？ preload.js 中的进程(因为只有在 preload.js 我可以访问 Node 模块)然后只调用每个 renderer.js 中的函数文件(例如这里， main_window.js)？我在这里不明白什么？

最佳答案

编辑 2022

我有 published a larger post关于 Electron 的历史(整个 Electron 版本的安全性如何变化)以及 Electron 开发人员可以做出的其他安全考虑，以确保预加载文件在新应用程序中正确使用。
编辑 2020

正如另一位用户所问，让我在下面解释我的答案。preload.js的正确使用方法在 Electron 中，是在您的应用程序可能需要的任何模块周围公开列入白名单的 package 器 require .
安全方面，暴露 require 很危险，或您通过 require 检索到的任何内容调用您的preload.js (参见 my comment here 了解更多解释原因)。如果您的应用程序加载远程内容(很多人会这样做)，则尤其如此。
为了做正确的事情，您需要在 BrowserWindow 上启用许多选项。正如我在下面详述的那样。设置这些选项会强制您的 Electron 应用程序通过 IPC(进程间通信)进行通信，并将两个环境相互隔离。像这样设置您的应用程序可以让您验证可能是 require 的任何内容'd 模块在您的后端，它不受客户端篡改。
下面，您将找到一个简短示例，说明我所说的内容以及它在您的应用中的外观。如果您刚开始，我可能会建议使用 secure-electron-template (我是其中的作者)在构建 Electron 应用程序时从一开始就包含了所有这些安全最佳实践。
This page还提供了有关使用 preload.js 制作安全应用程序时所需的架构的良好信息。

main.js 

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // is default value after Electron v5
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js") // use a preload script
    }
  });

  // Load app
  win.loadFile(path.join(__dirname, "dist/index.html"));

  // rest of code..
}

app.on("ready", createWindow);

ipcMain.on("toMain", (event, args) => {
  fs.readFile("path/to/file", (error, data) => {
    // Do something with file contents

    // Send result back to renderer process
    win.webContents.send("fromMain", responseObj);
  });
});
preload.js 
const {
    contextBridge,
    ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);
index.html 
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
</head>
<body>
    <script>
        window.api.receive("fromMain", (data) => {
            console.log(`Received ${data} from main process`);
        });
        window.api.send("toMain", "some data");
    </script>
</body>
</html>

关于javascript - 如何在 Electron 中正确使用 preload.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57807459/

26 4 0
文章推荐： Logstash 动态分配模板
文章推荐： Java 具有随机颜色的弹跳球应用程序
文章推荐： java - 如何在android中构建CLM
文章推荐： sorting - Prolog - 如何让尾部不为空
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com