bradenmacdonald/xblock-bootstrap.html

## xblock-bootstrap.html
<!--
This file is meant to be hosted on a completely separate domain name
from the LMS / frontend that is hosting the Open edX content (XBlocks).

Doing so allows us to enable features like cookies in the sandboxed
IFrame while keeping the XBlock content on a distinct origin, so that
the XBlock cannot access user data from the host application (like
cookies nor call APIs as the user).

This particular sandboxing code uses the secure message passing API
to request the XBlock HTML from the host application and then replaces
its content with that HTML.
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const uniqueKeyPrefix = `k${+Date.now()}-${Math.floor(Math.random() * 1e10)}-`;
        var messageCount = 0;
        function postMessageToParent(messageData, callback) {
            const messageReplyKey = uniqueKeyPrefix + (messageCount++);
            messageData.replyKey = messageReplyKey;
            if (callback !== undefined) {
                const handleResponse = function (event) {
                    if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
                        callback(event.data);
                        window.removeEventListener('message', handleResponse);
                    }
                };
                window.addEventListener('message', handleResponse);
            }
            window.parent.postMessage(messageData, '*');
        }
        // Request the HTML from the parent and then completely replace this entire
        // HTML document with the resulting HTML
        postMessageToParent({method: 'bootstrap'}, function(data) {
            document.open();
            document.write(data.initialHtml);
            document.close();
        });
    </script>
</body>
</html>
	<!--
	This file is meant to be hosted on a completely separate domain name
	from the LMS / frontend that is hosting the Open edX content (XBlocks).

	Doing so allows us to enable features like cookies in the sandboxed
	IFrame while keeping the XBlock content on a distinct origin, so that
	the XBlock cannot access user data from the host application (like
	cookies nor call APIs as the user).

	This particular sandboxing code uses the secure message passing API
	to request the XBlock HTML from the host application and then replaces
	its content with that HTML.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<script>
	const uniqueKeyPrefix = `k${+Date.now()}-${Math.floor(Math.random() * 1e10)}-`;
	var messageCount = 0;
	function postMessageToParent(messageData, callback) {
	const messageReplyKey = uniqueKeyPrefix + (messageCount++);
	messageData.replyKey = messageReplyKey;
	if (callback !== undefined) {
	const handleResponse = function (event) {
	if (event.source === window.parent && event.data.replyKey === messageReplyKey) {
	callback(event.data);
	window.removeEventListener('message', handleResponse);
	}
	};
	window.addEventListener('message', handleResponse);
	}
	window.parent.postMessage(messageData, '*');
	}
	// Request the HTML from the parent and then completely replace this entire
	// HTML document with the resulting HTML
	postMessageToParent({method: 'bootstrap'}, function(data) {
	document.open();
	document.write(data.initialHtml);
	document.close();
	});
	</script>
	</body>
	</html>