Question

当我尝试将我的弹出页面用于Chrome扩展程序作为在后台页面和弹出窗口的iframe中显示的页面之间进行通信的管道时，出现以下错误。我需要一个沙盒环境来运行Vue.js，但需要能够从chrome.storage获取数据并与其他此类对象一起工作，因此我接收数据包并在必要时将命令发送到后台页面。

未捕获的SecurityError：沙箱访问冲突：阻止了“ chrome-extension：// kncjlbkddbibekfmmljfpibdgjfdegeb”处的框架访问“ chrome-extension：// kncjlbkddbibekfmmljfpibdgjfdegeb”处的框架。请求访问的帧被沙盒化，并且缺少“ allow-same-origin”标志。

这是管道弹出页面的代码：

//please look at it as if block comments aren't commented out
//this is needed  due to SO not having chrome.* available.
//although line comments are real comments.

let displayFrame = document.getElementById('displayFrame');
let displayPort = displayFrame.contentWindow;
/*
let backgroundPort = chrome.extension.connect({
  name : "Extension Connection"
});
*/

// Forwarding from background to index.
/*
backgroundPort.onMessage.addListener((msg) => {
  displayPort.postMessage(msg, "*");
});
*/

// Forwarding from index to background.
window.addEventListener("message", function(msg) {
  /*
    backgroundPort.postMessage({
      data : msg.data
    });
  */
});

<!doctype html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <script src="../scripts/popup.js" defer>
  </script>

  <style>
    * {
      box-sizing: border-box;
      opacity: 1.0;
      margin: 0px;
      padding: 0px;
      resize: none;
    }
  </style>
</head>

<body style="width : 300px; height: 500px;">
  <iframe id="displayFrame" sandbox="allow-same-origin allow-scripts" src="./index.html" style="width: 300px; height: 500px" frameborder="0"> </iframe>
</body>

</html>

我认为background.js和index.html/js的内容并不重要，它们都正确地将消息传递到上述代码的相应两边，并且我已经确认此消息在控制台中传递给正在工作。在index.js中对Vue.js变量进行任何更改时，都会出现此问题。我从实际的Vue对象（文档中的vm）和内部（将消息侦听器附加到已挂接的钩子的窗口）进行了尝试。我相信每个允许Vue监视状态变化的变量的包装后的setter都会导致问题，我很好奇是否有人知道如何消除错误。

整个扩展程序我都没有问题；消息传递，甚至Vue变量设置/函数调用都可以正常工作。只是每次我打开弹出页面时，该错误都会出现在后台页面控制台中。是我应该担心的事情，并且可以解决吗？

Answer 1

因此，此问题已解决。仅当将vue变量的值设置为index.js末尾event.source上的window.addEventListener("message", (event) => { ... })时，才会发生该错误。我猜想Vue如何跟踪变量不会与作为发件人的窗口对象的变量啮合。 但是我一直知道发件人一直是iframe的父项，所以我通过以下方式解决了问题：

不发送保存了event.source用于命令发送的介绍包。
在使用window.parent.postMessage之前，先通过this.vueVariable.postMessage发送命令。

我希望这能对以后遇到此类问题的任何人有所帮助，解决方案始终是我的主意。扩展程序中不再存在任何错误，并且设置也可以同时进行双向通信。

传递消息时，通过iframe在Chrome扩展程序中的沙盒页面抛出错误

1 个答案: