javascript - 电子 “require is not defined”

我正在制作一个需要授予文件系统(fs)模块访问权限的应用程序，但是即使启用了nodeIntegration，渲染器也会给我这个错误:

Uncaught ReferenceError: require is not defined

我可以找到的所有类似问题都有一个解决方案，该解决方案说他们需要打开nodeIntegration，但是我已经启用了它。

这是我的main.js:

const electron = require('electron');
const {app, BrowserWindow} = electron;

let win;

app.on('ready', () => {
    var { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
    width = 1600;
    height = 900;
    win = new BrowserWindow({'minHeight': 850, 'minWidth': 1600, width, height, webPreferences: {
        contextIsolation: true,
        webSecurity: true,
        nodeIntegration: true
    }});
    win.setMenu(null);
    win.loadFile('index.html');
    win.webContents.openDevTools()
});

我在index.html中链接为<script src="index.js"></script>的index.js目前仅包含require("fs");，我已注释掉所有其他内容。

我不知道即使启用了nodeIntegration，为什么require仍然无法正常工作。

最佳答案

如果禁用了nodeIntegration而不使用contextIsolation，则可以使用预加载脚本在全局对象上公开其安全版本。 (注意:您不应将整个fs模块公开给远程页面!)

这是以这种方式使用预加载脚本的示例:

// main process script
const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: false,
    nodeIntegration: false,
    preload: './preload.js'
  }
})

mainWindow.loadURL('my-safe-file.html')



// preload.js
const { readFileSync } = require('fs')

// the host page will have access to `window.readConfig`,
// but not direct access to `readFileSync`
window.readConfig = function () {
  const data = readFileSync('./config.json')
  return data
}



// renderer.js
const config = window.readConfig()

如果您仅加载本地页面，而这些页面没有加载或执行不安全的动态内容，那么您可能需要重新考虑将contextIsolation用于此策略。但是，如果要保持contextIsolation处于打开状态(并且如果确实有机会显示不安全的内容，则绝对应该这样做)，则只能使用message passing via postMessage 与预加载脚本进行通信。

这是上面相同场景的示例，但是启用了contextIsolation并使用消息传递。

// main process script
const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: './preload.js'
  }
})

mainWindow.loadURL('my-unsafe-file.html')



// preload.js
const { readFileSync } = require('fs')

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

window.addEventListener('message', (event) => {
  if (event.source !== window) return
  if (event.data.type === 'request') {
    window.postMessage({ type: 'response', content: readConfig() })
  }
})



// renderer.js
window.addEventListener('message', (event) => {
  if (event.source !== window) return
  if (event.data.type === 'response') {
    const config = event.data.content
  }
})
window.postMessage('request')

虽然这绝对是更冗长且难以处理的(并且由于消息传递是异步的，所以迫使它们异步)，但它也更加安全。一对围绕postMessage API的小型JS包装器可以使它更易于使用(例如，通过类似RPC的机制)，但是请记住，使用contextIsolation的全部目的是因为您不信任渲染器，因此您的预加载脚本不应仅信任通过postMessage API收到的任何消息-您应始终验证收到的事件以确保您信任它。

This slide deck详细描述了为什么不使用上下文隔离来关闭Node集成并不总是一个好主意。