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

【问题标题】：Security concerns with window.postMessage() + iframes + developer toolswindow.postMessage() + iframes + 开发者工具的安全问题
【发布时间】：2017-08-07 16:07:48
【问题描述】：

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

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

这是我正在处理的情况。我有一个包含嵌入式 iframe 的页面，并且我可以控制该 iframe（它位于一个单独的域中，但提供它的供应商允许我将自定义 JavaScript 放入 iframe 源中）。父窗口和 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
  }
});

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

【问题讨论】：

破解自己？一旦文件被浏览器下载，他们就可以在他们的计算机上做任何他们想做的事情。

标签： javascript security iframe xss postmessage

【解决方案1】：

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

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

【讨论】：