Loading file into sandboxed iframe without using a fetch request

Question

I'm trying to load a file in an iframe without performing a fetch request. I want to run the code inside a sandboxed iframe WITHOUT the "allow-same-origin" permission in order to protect the end user from malicious code. And since the iframe creates unique origins for each individual fetch call I can't call the file from the server without the "allow-same-origin" permission.

If you create a sandboxed iframe and add both the "allow-same-origin" and the "allow-scripts" permissions, the sandbox attribute becomes far less useful as a security feature. Firefox provides a warning for this vulnerability: "An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing." So I need a way to exclude the "allow-same-origin" permission.

in short, you are looking to circumvent security measures made on web browsers ... — Mister Jojo
Third party content is flagged by the browser. Anything that makes use of this content becomes tainted. For example, if you draw a third-party image to a canvas, you'll find you can no longer extract data from those parts of that canvas. The usual solution is to arrange for the file to be submitted to the page's server and then downloaded from there. (Kind of like money laundering.) — Ouroborus
@MisterJojo On the contrary, I'm trying to add a security layer to my iframe by increasing the restrictions placed by its sandbox attribute. And I'm trying to do so by allowing the web page to get a necessary file through the original fetch call... thus avoiding a possible cross origin attack by malicious code injection. Though again, I'm not entirely sure HTMLs limitations and security measures allow it... — fcrv
@Ouroborus The file is hosted on the same server as the web page, and it's also the same server as the iframes parent window. They are all from the same origin, though like I mentioned (And this is a bit new to me) the iframe seems load the child website and all fetch calls from a "unique origin" each and thus same-origin checks fail... Despite being the same origin... — fcrv
You probably want to set the <iframe> with sandbox="allow-same-origin". — Ouroborus

fcrv fcrv · Accepted Answer · 2021-02-07T19:50:46

To do this you need control over the embedded iframe and the parent window. The iframe can have the sandbox attribute and will only need the "allow-scripts" permission to allow it to run Javascript code. You will need to perform the fetch call from the parent window, get the response and pass it down to the iframe window in a message using the window.postMessage() function. My use case required the file to be processed as a Blob therefore I processed the fetchs response accordingly.

Code in the parent window:

fetch(file_url).then(function(response){
  setFrame("./app/NimbleGameEditor/index.html");
  response.blob().then(function(response_blob){
      document.getElementById("DynamicIFrame").onload = function() {
        document.getElementById("DynamicIFrame").contentWindow.postMessage(response_blob, "*");
      }
  });
});

Code in the iframe window:

window.addEventListener("message", (event) => {
  if (event.origin == parentWindowURL){
        console.log("Processing data");
        doSomethingWithBlob(event.data);
    }
    else{
        return;
    }
}, false);

This way you can avoid using the "allow-same-origin" permission, and still download the file without performing a fetch call inside the iframe.

Loading file into sandboxed iframe without using a fetch request

1 Answers