Simplify cookie-based authentication.

experiments/authentication/cookie.js

@@ -1,36 +1,23 @@
-// wait for "load" rather than "DOMContentLoaded"
-// to ensure that the iframe has finished loading
-window.addEventListener("load", () => {
-    // create message channel to communicate
-    // with the iframe
-    const channel = new MessageChannel();
-    const port1 = channel.port1;
+// send token to iframe
+window.addEventListener("DOMContentLoaded", () => {
+    const iframe = document.querySelector("iframe");
+    iframe.addEventListener("load", () => {
+        iframe.contentWindow.postMessage(token, "http://localhost:8003");
+    });
+});
 
-    // receive WebSocket events from the iframe
-    const expected = getExpectedEvents();
-    var actual = [];
-    port1.onmessage = ({ data }) => {
-        // respond to messages
-        if (data.type == "message") {
-            port1.postMessage({
-                type: "message",
-                message: `Goodbye ${data.data.slice(6, -1)}.`,
-            });
-        }
-        // run tests
-        actual.push(data);
-        testStep(expected, actual);
-    };
+// once iframe has set cookie, open WebSocket connection
+window.addEventListener("message", ({ origin }) => {
+    if (origin !== "http://localhost:8003") {
+        return;
+    }
 
-    // send message channel to the iframe
-    const iframe = document.querySelector("iframe");
-    const origin = "http://localhost:8003";
-    const ports = [channel.port2];
-    iframe.contentWindow.postMessage("", origin, ports);
+    const websocket = new WebSocket("ws://localhost:8003/");
 
-    // send token to the iframe
-    port1.postMessage({
-        type: "open",
-        token: token,
-    });
+    websocket.onmessage = ({ data }) => {
+        // event.data is expected to be "Hello <user>!"
+        websocket.send(`Goodbye ${data.slice(6, -1)}.`);
+    };
+
+    runTest(websocket);
 });

experiments/authentication/cookie_iframe.js

@@ -1,36 +1,9 @@
-// receive message channel from the parent window
-window.addEventListener("message", ({ ports }) => {
-    const port2 = ports[0];
-    var websocket;
-    port2.onmessage = ({ data }) => {
-        switch (data.type) {
-            case "open":
-                websocket = initWebSocket(data.token, port2);
-                break;
-            case "message":
-                websocket.send(data.message);
-                break;
-            case "close":
-                websocket.close(data.code, data.reason);
-                break;
-        }
-    };
-});
-
-// open WebSocket connection and relay events to the parent window
-function initWebSocket(token, port2) {
-    document.cookie = `token=${token}; SameSite=Strict`;
-    const websocket = new WebSocket("ws://localhost:8003/");
+// receive token from the parent window, set cookie and notify parent
+window.addEventListener("message", ({ origin, data }) => {
+    if (origin !== "http://localhost:8000") {
+        return;
+    }
 
-    websocket.addEventListener("open", ({ type }) => {
-        port2.postMessage({ type });
-    });
-    websocket.addEventListener("message", ({ type, data }) => {
-        port2.postMessage({ type, data });
-    });
-    websocket.addEventListener("close", ({ type, code, reason, wasClean }) => {
-        port2.postMessage({ type, code, reason, wasClean });
-    });
-
-    return websocket;
-}
+    document.cookie = `token=${data}; SameSite=Strict`;
+    window.parent.postMessage("", "http://localhost:8000");
+});