Skip to content

Commit

Permalink
refactor message handlers and add support for MessageChannel
Browse files Browse the repository at this point in the history
  • Loading branch information
@turnekybc
turnekybc committed Dec 18, 2024
1 parent 6c9f972 commit bd3f240
Showing 1 changed file with 113 additions and 71 deletions.
184 changes: 113 additions & 71 deletions auth/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ <h2>Message log</h2>
/** constant for LocalStorage */
var TURNKEY_EMBEDDED_KEY = "TURNKEY_EMBEDDED_KEY";
var TURNKEY_EMBEDDED_KEY_TTL_IN_MILLIS = 1000 * 60 * 60 * 48; // 48 hours in milliseconds

var parentFrameMessageChannelPort = null;

/**
Expand Down Expand Up @@ -518,6 +519,14 @@ <h2>Message log</h2>
type: type,
value: value,
})
} else if (window.parent !== window) {
window.parent.postMessage(
{
type: type,
value: value,
},
"*"
);
}
logMessage(`⬆️ Sent message ${type}: ${value}`);
};
Expand Down Expand Up @@ -1012,86 +1021,119 @@ <h2>Message log</h2>
// persist the MessageChannel object so we can use it to communicate with the parent window
var iframeMessagePort = null;

window.addEventListener("message", async function (event) {
if (event.ports?.[0]) {
iframeMessagePort = event.ports[0];
iframeMessagePort.onmessage = async function (event) {
if (event.data && event.data["type"] == "INJECT_CREDENTIAL_BUNDLE") {
TKHQ.logMessage(
`⬇️ Received message ${event.data["type"]}: ${event.data["value"]}`
);
try {
await onInjectBundle(event.data["value"]);
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
if (event.data && event.data["type"] == "STAMP_REQUEST") {
TKHQ.logMessage(
`⬇️ Received message ${event.data["type"]}: ${event.data["value"]}`
);
try {
await onStampRequest(event.data["value"]);
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
if (event.data && event.data["type"] == "RESET_EMBEDDED_KEY") {
TKHQ.logMessage(`⬇️ Received message ${event.data["type"]}`);
try {
TKHQ.onResetEmbeddedKey();
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
};
/**
* Event handlers to power the recovery and auth flows in standalone mode
* Instead of receiving events from the parent page, forms trigger them.
* This is useful for debugging as well.
*/
var addDOMEventListeners = function () {
document.getElementById("inject").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({
type: "INJECT_CREDENTIAL_BUNDLE",
value: document.getElementById("credential-bundle").value,
});
},
false
);
document.getElementById("stamp").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({
type: "STAMP_REQUEST",
value: document.getElementById("payload").value,
});
},
false
);
document.getElementById("reset").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({ type: "RESET_EMBEDDED_KEY" });
},
false
);
}

TKHQ.setParentFrameMessageChannelPort(iframeMessagePort);

/**
* messageEventListener is the event listener for messages sent to the iframe.
*/
var messageEventListener = async function(event) {
if (
event.data &&
(event.data["type"] == "INJECT_CREDENTIAL_BUNDLE" ||
event.data["type"] == "INJECT_RECOVERY_BUNDLE")
) {
TKHQ.logMessage(
`⬇️ Received message ${event.data["type"]}: ${event.data["value"]}`
);
try {
await onInjectBundle(event.data["value"]);
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
if (event.data && event.data["type"] == "STAMP_REQUEST") {
TKHQ.logMessage(
`⬇️ Received message ${event.data["type"]}: ${event.data["value"]}`
);
try {
await onStampRequest(event.data["value"]);
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
if (event.data && event.data["type"] == "RESET_EMBEDDED_KEY") {
TKHQ.logMessage(`⬇️ Received message ${event.data["type"]}`);
try {
TKHQ.onResetEmbeddedKey();
} catch (e) {
TKHQ.sendMessageUp("ERROR", e.toString());
}
}
}

// maintain for backwards compatibility
document.addEventListener(
"DOMContentLoaded",
async function () {
await TKHQ.initEmbeddedKey();
var embeddedKeyJwk = await TKHQ.getEmbeddedKey();
var targetPubBuf = await TKHQ.p256JWKPrivateToPublic(embeddedKeyJwk);
var targetPubHex = TKHQ.uint8arrayToHexString(targetPubBuf);
document.getElementById("embedded-key").value = targetPubHex;

window.addEventListener(
"message",
messageEventListener,
false
);

addDOMEventListeners();

// iframe is ready to receive messages
TKHQ.sendMessageUp("PUBLIC_KEY_READY", targetPubHex);
},
false
);

/**
* Event handlers to power the recovery and auth flows in standalone mode
* Instead of receiving events from the parent page, forms trigger them.
* This is useful for debugging as well.
*/
document.getElementById("inject").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({
type: "INJECT_CREDENTIAL_BUNDLE",
value: document.getElementById("credential-bundle").value,
});
},
false
);
document.getElementById("stamp").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({
type: "STAMP_REQUEST",
value: document.getElementById("payload").value,
});
},
false
);
document.getElementById("reset").addEventListener(
"click",
async function (e) {
e.preventDefault();
window.postMessage({ type: "RESET_EMBEDDED_KEY" });
},
false
);
window.addEventListener("message", async function (event) {
/**
* @turnkey/iframe-stamper >= v2.1.0 is using a MessageChannel to communicate with the parent frame.
* The parent frame sends a TURNKEY_INIT_MESSAGE_CHANNEL event with the MessagePort.
* If we receive this event, we want to remove the message event listener that was added in the DOMContentLoaded event
* and persist the MessagePort so we can use it to communicate with the parent window in subsequent calls to TKHQ.sendMessageUp
*/
if (event.data && event.data["type"] == "TURNKEY_INIT_MESSAGE_CHANNEL" && event.ports?.[0]) {
// remove the message event listener that was added in the DOMContentLoaded event
window.removeEventListener("message", messageEventListener, false);
iframeMessagePort = event.ports[0];
iframeMessagePort.onmessage = messageEventListener

TKHQ.setParentFrameMessageChannelPort(iframeMessagePort);
}
});

Expand Down

0 comments on commit bd3f240

Please sign in to comment.