Electron - window.postMessage 在预加载和具有特定目标来源的渲染器之间进行对话

Question

我想使用 targetOrigin 验证/区分消息的来源的 postMessage之间preload.js和 renderer.js启用上下文隔离。

因此，如果消息来自 preload.js , originTarget 类似于 file://preload.js ，以及来自渲染器 file://renderer.js .

设置 file://preload.js或 file://renderer.js , 报错 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('file://'). .

有人知道如何实现我想要实现的目标吗？
谢谢

Answer 1

报价 MDN web docs :

Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*". file:// cannot be used as a security restriction; this restriction may be modified in the future.

所以在 preload.js您需要使用 *如 targetOrigin :

window.addEventListener("DOMContentLoaded", () => {
  window.postMessage({ type: "fooType", text: "barMsg" }, "*")
})

在接收渲染器(网页)中，将消息处理限制为 file://计划和 window出于安全原因的对象引用:

window.addEventListener(
  "message",
  event => {
    if (event.origin === "file://" && event.source === window) {
      console.log(event.data)
    }
  },
  false
)

这也适用于更具限制性的配置，如下所示( webPreferences 用于 BrowserWindow ):

{
  nodeIntegration: false,
  contextIsolation: true,
  enableRemoteModule: false,
  preload: path.join(__dirname, "preload.js")
}