From f7a62680bc7df0f17efac83109daf3bdc14bc0f5 Mon Sep 17 00:00:00 2001 From: Aymeric Augustin Date: Sun, 23 May 2021 15:14:52 +0200 Subject: [PATCH] Simplify cookie-based authentication. --- experiments/authentication/cookie.js | 51 ++++++++------------- experiments/authentication/cookie_iframe.js | 43 ++++------------- 2 files changed, 27 insertions(+), 67 deletions(-) diff --git a/experiments/authentication/cookie.js b/experiments/authentication/cookie.js index 9c5d5f078..2cca34fcb 100644 --- a/experiments/authentication/cookie.js +++ b/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 !" + websocket.send(`Goodbye ${data.slice(6, -1)}.`); + }; + + runTest(websocket); }); diff --git a/experiments/authentication/cookie_iframe.js b/experiments/authentication/cookie_iframe.js index 88b5d1f2b..2d2e692e8 100644 --- a/experiments/authentication/cookie_iframe.js +++ b/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"); +});