問題描述

我正在制作一個需要訪問文件系統 (fs) 模塊的應用程序，但是即使啟用了 nodeIntegration，渲染器也會給我這個錯誤:

I'm making an application which I need to give access to the file system (fs) module, however even with nodeIntegration enabled the renderer gives me this error:

Uncaught ReferenceError: require is not defined

我能找到的所有類似問題都有一個解決方案，說他們需要打開 nodeIntegration，但是我已經啟用了它.

All similar problems I could find had a solution that said they needed to turn nodeIntegration on, however I already have it enabled.

這是我的 main.js:

This is my 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.js，在 index.html 中鏈接為 <script src="index.js"></script> 目前只有 require("fs"); 在里面，我已經注釋掉了所有其他的東西.

My index.js, linked in index.html as <script src="index.js"></script> currently only has require("fs"); in it, I've commented out all the other stuff.

我不知道為什么即使啟用了 nodeIntegration，require 仍然不起作用.

I don't know why require still doesn't work even though nodeIntegration is enabled.

推薦答案

當你禁用了 nodeIntegration 但沒有使用 contextIsolation 時，你可以使用預加載腳本在全局對象上公開它的安全版本.(注意:您不應該將整個 fs 模塊暴露給遠程頁面！)

When you have nodeIntegration disabled but aren't using contextIsolation, you could use a preload script to expose a safe version of it on the global object. (Note: you shouldn't expose the entire fs module to a remote page!)

這是一個以這種方式使用預加載腳本的示例:

Here's an example of using a preload script in this way:

// 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 開啟(如果您有機會顯示不安全的內容，您肯定應該這樣做)，您只能使用 通過 postMessage 傳遞的消息.

If you're only loading local pages, and those pages don't load or execute unsafe dynamic content then you might reconsider the use of contextIsolation for this strategy. If you want to keep contextIsolation on, however (and you definitely should if you have a chance of showing unsafe content), you can only communicate with the preload script with message passing via postMessage.

這是上述相同場景的示例，但啟用了 contextIsolation 并使用消息傳遞.

Here's an example of the same scenario above, but with contextIsolation on and using message passing.

// 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 獲得的任何消息——你應該始終驗證你收到的事件以確保你信任它.

While this is definitely more verbose and difficult to deal with (and forces things to be async, because message passing is async), it's also much more secure. A pair of small JS wrappers around the postMessage API could make this easier to work with (e.g. via an RPC-like mechanism), but remember that the whole point of using contextIsolation is because you can't trust the renderer, so your preload script shouldn't trust just any message it gets via the postMessage API —?you should always verify the event that you receive to ensure that you trust it.

此幻燈片 描述者詳細說明為什么在不使用上下文隔離的情況下關閉 Node 集成并不總是一個好主意.

This slide deck describers in detail why turning off Node integration without using context isolation is not always a good idea.

這篇關于電子“要求未定義"；的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！