window.postMessage() + iframe + 开发者工具的安全问题

Question

我已经阅读了如何在使用 window.postMessage() 时避免安全问题——尤其是 MDN doc 中的建议。

但是考虑到所有预防性提示都是客户端的，我很难理解他们如何阻止不良行为者简单地在他们的开发人员工具中编辑更改代码。

这是我正在处理的情况。我有一个包含嵌入式 iframe 的页面，并且我可以控制该 iframe（它位于一个单独的域中，但提供它的供应商允许我将自定义 JavaScript 放入 iframe 源代码中）。父 window 和 iframe 将来回通信。

/**
  window at https://firstgoodorigin.com

  Receives message from iframe to indicate
  its contents have loaded.

  Once that message has been received,
  send a message back to the iframe.
*/
function handleMessage(message) {
  if (message.origin === 'https://secondgoodorigin.com') {
    // verify and sanitize what's in message.data
    // (it'll be something like "loaded")
    // if it's good, send a message back
    message.source.postMessage('foo', 'https://secondgoodorigin.com');
  }
}

window.addEventListener('message', handleMessage, false);


/**
  iframe at https://secondgoodorigin.com

  Tell parent window it has loaded. Once that happens
  it will receive a message from the parent window, for
  which we add an event listener.
*/
window.addEventListener('load', () => {
  window.parent.postMessage('loaded', https://firstgoodorigin.com);
});

window.addEventListener('message', (message) => {
  if (message.origin === 'https://firstgoodorigin.com') {
    // verify and sanitize what's in message.data
    // do stuff
  }
});

鉴于 window 源和 iframe 源都可以在某人的网络检查器中进行编辑，如何阻止他们删除所有验证逻辑并将其替换为恶意内容？我在这里错过了什么？

Answer 1

正如 Will 在评论中提到的那样，最终用户可以根据需要编辑浏览器中的任何代码。锁定 post 消息的目的是阻止第三方网站 post 发送不需要的消息。

如果用户登录到有问题的网站，然后加载恶意网站，该网站可能会在 iframe 或弹出窗口中加载有问题的网站，然后 post 未经授权的消息网站。

window.postMessage() + iframe + 开发者工具的安全问题

Security concerns with window.postMessage() + iframes + developer tools

javascript

security

xss

iframe

postmessage