require和contextBridge导致的contextIsolation相悖问题

 

在项目中使用require可能会需要以下配置：

function createWindow(width,height) {
  const win = new BrowserWindow({
    width,
    height,
    webPreferences: {
      nodeIntegration:true,       // 为了解决require 识别问题
      contextIsolation: false,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

需要设置contextIsolation属性为false。

但是使用某些api，比如拖拽开发功能的contextBridge需要contextIsolation为true。

分析：

由于require可以直接请求运行客户机上的文件，容易引起安全问题，而在新的electron中被禁止，所以在contextIsolation为true时认为require不可以启用

如果想要使用require，则不应该使用contextBridge API

可以将如下代码进行修改：

//修改前
const { contextBridge, ipcRenderer } = require('electron')
const path = require('path')

contextBridge.exposeInMainWorld('electron', {
  startDrag: (fileName) => {
    ipcRenderer.send('ondragstart', path.join(process.cwd(), fileName))
  }
})

//修改后

//preload.js
const { ipcRenderer }  = require('electron')
const path = require('path')
function startDrag(fileName) {
  ipcRenderer.send('ondragstart', path.join(process.cwd(), fileName))
}
document.getElementById('drag').ondragstart = (event) => {
  event.preventDefault()
  startDrag('./img/img.jpeg');
}

contextIsolation的默认值已弃用，并将在将来的电子版本中从false更改为true

由于没有contextIsolation明确设置值，因此使用默认值，一旦更改，您的应用程序将不再以相同方式运行。

contextIsolation是一个可以传入webPreferencesa的选项BrowserWindow，如下所示：

const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    contextIsolation: true
  }
});

Electron 团队决定显示此警告，因为这contextIsolation是一个深刻改变 Electron 窗口工作方式的选项。默认情况下，Node 全局变量在执行附加到 HTML 页面的脚本之前（在执行预加载脚本之后）以编程方式从渲染器上下文中剥离，这会留下一些漏洞（例如此处演示的漏洞）。

contextIsolation确保两个上下文（预加载脚本和渲染器脚本）保持完全隔离，除了通过contextBridge. contextIsolation除非您确定不加载任何外部内容，否则建议使用，这就是默认值将被更改的原因。