If I’m reading the docs right, the issue would be only if the host page and iframe page were coming from the same origin:
So why loading iframe inside addon page with a sandbox attribute is a problem?
Can someone help me build a proof of concept that would allow code inside the iframe remove its “sandbox” attribute?
Because as far as I know, the CORS will prevent it:
(async () => {
/**
* Proof of concept - removing "sandbox" attribute using javascript running INSIDE the iframe!
* Execute this code inside addon page - the addon needs to have "<all_urls>" and "webNavigation" permissions.
* How it works: we will create iframe inside the addon page. Inside it we load "example.com" page and then use "tabs.executeScript" to run code inside the page.
*/
const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-scripts allow-same-origin';
iframe.src = 'https://example.com/';
document.body.textContent = '';
document.body.appendChild(iframe);
await new Promise(resolve => setTimeout(resolve, 1000));
const tab = await browser.tabs.getCurrent();
const frames = await browser.webNavigation.getAllFrames({tabId: tab.id});
browser.tabs.executeScript(tab.id, {
frameId: frames.at(1).frameId,
runAt: 'document_idle',
code: `
document.body.firstElementChild.style.setProperty('background', 'darkgreen', 'important'); // change background to verify we are injected
// But this won't work: Error: Permission denied to access property "document" on cross-origin object
window.top.document.querySelector('iframe').removeAttribute('sandbox');
`
});
})();
