bubach/cors.html

## cors.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>v86.js</title>

    <style type="text/css">
        #screen {
            white-space: pre;
            position: relative;
            font-family: Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
            font-weight: bold;
            font-size: 15px;
            line-height: normal;
        }
        #screen, #vga {
            -webkit-transform-origin: top left;
            -moz-transform-origin: top left;
            transform-origin: top left;
        }
        #vga {
            background-color: #000;
        }
        body {
            background-color: #111;
            color: #fff;
            line-height: 1.5;
            padding: 10px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>

    <script type="text/javascript" id="da-code"></script>

    <script type="text/javascript">

        /**
         * Set URL query parameter value
         */
        function setQueryParam(name, value)
        {
            let params = new URLSearchParams(window.location.search);
            params.set(name, value);
            window.history.replaceState({}, '', decodeURIComponent(window.location.pathname + '?' + params));
        };

        /**
         * Load external JS with forced content-type text/plain,
         * for example from github's "raw" view.
         */
        function loadXhrJs(elem, url)
        {
            let xhr = new XMLHttpRequest();

            xhr.open('GET', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.overrideMimeType('application/pdf; charset=x-user-defined');

            xhr.onload = function(event) {
                let arrayBuffer = xhr.response;

                if (arrayBuffer) {
                    let data = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));

                    // Optional code-modifications before use.
                    data = data.replace(/console\.log/, 'console.debug');
                    data = data.replace(/main/, 'raw-github');

                    elem.src = 'data:text/javascript;base64,' + btoa(data);
                }
            };

            xhr.send(null);
        };

        /**
         * Load CORS protected JS using raw data of object tag.
         */
        function loadObjectJs(objElem, jsElem)
        {
            console.log('FFS??!');

            console.log(objElem);
            console.log(jsElem);
            console.log(objElem.innerHTML);
            console.log(objElem.text);
            console.log(objElem.contentDocument);

            url = 'https://copy.sh/v86/build/v86_all.js?f=/img.bin';
            loadXhrJs(jsElem, url);

            var data = objElem.contentDocument.body.childNodes[0].innerHTML;
            jsElem.src = 'data:text/javascript;base64,' + btoa(data);
        };

        // First try XHR fetch of Github raw-file and run as (modified) JS
        let elem = document.getElementById('da-code');
        let url = 'https://raw.githubusercontent.com/bubach/BOS/gh-pages/javascripts/main.js';
        loadXhrJs(elem, url);

        // Set URL query param for v86.js lib
        setQueryParam('profile', 'windows98');

        // Meh, can actually see the bloody JS rendered, but not been able to reach the inner element.. :/
        // Some sort of JS triggered focus event + clipboard magic might be a possibility to get the source.
        url = 'https://copy.sh/v86/build/v86_all.js?f=/img.pdf';
        loadXhrJs(elem, url);

    </script>

    <!-- v86.js markup -->
    <div id="v86emu">
        <!--
        <div id="data-wrap">
            <object id="da-data" type="application/vnd.adobe.flash-movie" data="https://copy.sh/v86/build/v86_all.js?f=/img.swf" onload="loadObjectJs(this, document.getElementById('da-code'));"></object>
        </div>
        -->
        <div id="screen_container" style="display: none">
            <div id="screen"></div>
            <canvas id="vga"></canvas>
            <div style="position: absolute; top: 0; z-index: 10">
                <textarea class="phone_keyboard"></textarea>
            </div>
        </div>

        <!-- v86.js minimal required markup for config, hidden -->
        <div id="boot_options" style="dopacity:0"></div>
        <input type="file" id="floppy_image" style="opacity:0">
        <input type="file" id="cd_image" style="opacity:0">
        <input type="file" id="hd_image" style="opacity:0">
        <button id="start_emulation" style="opacity:0"></button>
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>v86.js</title>

	<style type="text/css">
	#screen {
	white-space: pre;
	position: relative;
	font-family: Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
	font-weight: bold;
	font-size: 15px;
	line-height: normal;
	}
	#screen, #vga {
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	transform-origin: top left;
	}
	#vga {
	background-color: #000;
	}
	body {
	background-color: #111;
	color: #fff;
	line-height: 1.5;
	padding: 10px;
	font-family: sans-serif;
	}
	</style>
	</head>
	<body>

	<script type="text/javascript" id="da-code"></script>

	<script type="text/javascript">

	/**
	* Set URL query parameter value
	*/
	function setQueryParam(name, value)
	{
	let params = new URLSearchParams(window.location.search);
	params.set(name, value);
	window.history.replaceState({}, '', decodeURIComponent(window.location.pathname + '?' + params));
	};

	/**
	* Load external JS with forced content-type text/plain,
	* for example from github's "raw" view.
	*/
	function loadXhrJs(elem, url)
	{
	let xhr = new XMLHttpRequest();

	xhr.open('GET', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.overrideMimeType('application/pdf; charset=x-user-defined');

	xhr.onload = function(event) {
	let arrayBuffer = xhr.response;

	if (arrayBuffer) {
	let data = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));

	// Optional code-modifications before use.
	data = data.replace(/console\.log/, 'console.debug');
	data = data.replace(/main/, 'raw-github');

	elem.src = 'data:text/javascript;base64,' + btoa(data);
	}
	};

	xhr.send(null);
	};

	/**
	* Load CORS protected JS using raw data of object tag.
	*/
	function loadObjectJs(objElem, jsElem)
	{
	console.log('FFS??!');

	console.log(objElem);
	console.log(jsElem);
	console.log(objElem.innerHTML);
	console.log(objElem.text);
	console.log(objElem.contentDocument);

	url = 'https://copy.sh/v86/build/v86_all.js?f=/img.bin';
	loadXhrJs(jsElem, url);

	var data = objElem.contentDocument.body.childNodes[0].innerHTML;
	jsElem.src = 'data:text/javascript;base64,' + btoa(data);
	};

	// First try XHR fetch of Github raw-file and run as (modified) JS
	let elem = document.getElementById('da-code');
	let url = 'https://raw.githubusercontent.com/bubach/BOS/gh-pages/javascripts/main.js';
	loadXhrJs(elem, url);

	// Set URL query param for v86.js lib
	setQueryParam('profile', 'windows98');

	// Meh, can actually see the bloody JS rendered, but not been able to reach the inner element.. :/
	// Some sort of JS triggered focus event + clipboard magic might be a possibility to get the source.
	url = 'https://copy.sh/v86/build/v86_all.js?f=/img.pdf';
	loadXhrJs(elem, url);

	</script>

	<!-- v86.js markup -->
	<div id="v86emu">
	<!--
	<div id="data-wrap">
	<object id="da-data" type="application/vnd.adobe.flash-movie" data="https://copy.sh/v86/build/v86_all.js?f=/img.swf" onload="loadObjectJs(this, document.getElementById('da-code'));"></object>
	</div>
	-->
	<div id="screen_container" style="display: none">
	<div id="screen"></div>
	<canvas id="vga"></canvas>
	<div style="position: absolute; top: 0; z-index: 10">
	<textarea class="phone_keyboard"></textarea>
	</div>
	</div>

	<!-- v86.js minimal required markup for config, hidden -->
	<div id="boot_options" style="dopacity:0"></div>
	<input type="file" id="floppy_image" style="opacity:0">
	<input type="file" id="cd_image" style="opacity:0">
	<input type="file" id="hd_image" style="opacity:0">
	<button id="start_emulation" style="opacity:0"></button>
	</div>

	</body>
	</html>