Whenever I try to utilize my popup page for a chromium extension as a conduit for communication between the background page and a page shown within an iframe on the popup, I encounter the following error. I required a sandboxed environment to execute Vue.js but also needed access to retrieve data from chrome.storage and interact with similar objects in order to receive data packets and send commands to the background page when needed.
An Uncaught SecurityError is triggered: Sandbox access violation - a frame at "chrome-extension://kncjlbkddbibekfmmljfpibdgjfdegeb" has been blocked from accessing another frame at "chrome-extension://kncjlbkddbibekfmmljfpibdgjfdegeb". The requesting frame lacks the “allow-same-origin” flag due to sandboxing.
The code snippet below pertains to the pipe popup page:
//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>The specifics of background.js and index.html/js are deemed irrelevant by me, since both efficiently forward messages to their respective areas of the aforementioned code, which has been verified through console log messages. The problem arises only when modifications are made in index.js involving a Vue.js variable. Attempts were made directly on the Vue object (referred to as vm in the documentation) and internally via attaching a message listener to the window during the mounted hook event. It appears that the wrapped setters for each variable, enabling Vue to monitor state changes, result in this issue. I am seeking guidance on how to resolve this error.
I have encountered no disturbances with the extension overall; message passing functions as expected, and setting Vue variables or calling functions works flawlessly. However, whenever I open the popup page, the error surfaces in the console of the background pages. Is this a concern, and can it be rectified?