JSFiddle - React, Tailwind, and code Playground

Iframe Sandboxing Background Processes

by skibulk

HTML

<input type="checkbox"><br>
<iframe id="processSandbox" rel="noreferrer"></iframe>

<!--
<iframe src="https://rawgit.com/skibulk/9d2a531b232cf6f7f50b52ff0e5060ac/raw/6b5abf999fd4c2e12ed29d39fd35b9c769758cd8/background-job.html" sandbox="allow-scripts"></iframe>

<iframe id="processSandbox" sandbox="allow-scripts" src='data:text/html,<script>(
function backgroundJob() {
    console.log("Background Job Started");
    var target = Date.now() + 5000;
    while (Date.now() < target) {
        // Do Nothing
    }
    console.log("Background Job Finished");
}
)();</script>'></iframe>
-->

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

[type=checkbox] {
	margin: 40px;
}

JavaScript

/* Conclusions:

Uses Same Process:
WebWorkers (No DOM)
blob urls
data urls
about:blank
sandboxing data urls
sandboxing about:blank with allow-same-origin
sandboxing about:blank - can't access page to add script
Separate local files - domain is always blank, won't trigger cors
Separate local files in separate windows
Sandboxing the script on github Gist
From a local file, open a window with about:blank, and add the script
Use a web worker to open a new window - not possible
use js to click a link with rel="noreferrer" - can't use local files or data urls
Open a new window and require the user to refresh it

Solutions:
Open a new Window with a new domain
Open two local files manually?

Could use Messaging (postMessage) to exchange data
*/

function backgroundJob() {
    console.log("Background Job Started");
    var target = Date.now() + 5000;
    while (Date.now() < target) {
        // Do Nothing
    }
    console.log("Background Job Finished");
}

var processSandbox = document.getElementById('processSandbox');

processSandbox.onload = function(event) {
	console.log( "Starting Background Job" );
	$(processSandbox.contentWindow.document.body).append(
        '<scr\ipt>(' +
        backgroundJob.toString() +
        ')();</scr\ipt>'
	);
}

processSandbox.src = "about:blank";