Iframe webauthn postmessage

src/frontend/src/flows/iframeWebAuthn.ts

@@ -0,0 +1,105 @@
+import { isNullish } from "@dfinity/utils";
+
+export const WEBAUTHN_IFRAME_PATH = "#iframe/webauthn";
+
+export const webAuthnInIframeFlow = (): Promise<never> => {
+  window.addEventListener("message", async (event) => {
+    // event.source?.postMessage("why does it not work?");
+    // window.parent.postMessage("why does it not work?", "*");
+    const credential = (await navigator.credentials.get(
+      event.data
+    )) as PublicKeyCredential;
+    console.log("Created credential public key");
+    console.log(
+      "event.source",
+      event.source,
+      event.origin,
+      event.source?.postMessage
+    );
+    // TODO: check if origin is trusted with related origins
+    window.parent.postMessage(
+      {
+        id: credential.id,
+        type: credential.type,
+        rawId: credential.rawId,
+        response: {
+          clientDataJSON: credential.response.clientDataJSON,
+          authenticatorData:
+            "authenticatorData" in credential.response
+              ? credential.response.authenticatorData
+              : undefined,
+          signature:
+            "signature" in credential.response
+              ? credential.response.signature
+              : undefined,
+          userHandle:
+            "userHandle" in credential.response
+              ? credential.response.userHandle
+              : undefined,
+        },
+        // Exclude getClientExtensionResults()
+      },
+      "*"
+    );
+  });
+  // window.parent.postMessage("ready", "*");
+
+  return new Promise<never>((_) => {
+    /* halt */
+  });
+};
+
+export const webAuthnInIframe = (
+  options: CredentialRequestOptions
+): Promise<Credential> => {
+  const { rpId, ...publicKey } = options.publicKey ?? {};
+  if (isNullish(rpId)) {
+    throw new Error("RP id is missing");
+  }
+  const callbackPromise = new Promise<Credential>((resolve) => {
+    const call = () =>
+      hiddenIframe.contentWindow?.postMessage(
+        {
+          ...options,
+          publicKey,
+        },
+        `https://${rpId}`
+      );
+    setTimeout(call, 2000);
+    const listener = (event: MessageEvent) => {
+      console.log("event pre-check", event);
+      if (
+        event.source === hiddenIframe.contentWindow &&
+        event.origin === `https://${rpId}`
+      ) {
+        console.log("event", event);
+        // if (event.data === "ready") {
+        //   hiddenIframe.contentWindow?.postMessage(
+        //     {
+        //       ...options,
+        //       publicKey,
+        //     },
+        //     `https://${rpId}`
+        //   );
+        //   return;
+        // }
+        console.log(event.data);
+        // window.removeEventListener("message", listener);
+        hiddenIframe.remove();
+        resolve({
+          ...event.data,
+          getClientExtensionResults: () => ({}),
+        } as PublicKeyCredential);
+      }
+    };
+    console.log("are we sane?");
+    window.addEventListener("message", listener);
+  });
+  const hiddenIframe = document.createElement("iframe");
+  hiddenIframe.width = "500px";
+  hiddenIframe.height = "500px";
+  hiddenIframe.allow = "publickey-credentials-get";
+  document.body.appendChild(hiddenIframe);
+  hiddenIframe.src = `https://${rpId}${WEBAUTHN_IFRAME_PATH}`;
+  return callbackPromise;
+};

src/frontend/src/index.ts

@@ -1,5 +1,9 @@
 import { handleLoginFlowResult } from "$src/components/authenticateBox";
-import { callbackFlow, REDIRECT_CALLBACK_PATH } from "$src/flows/redirect";
+import {
+  WEBAUTHN_IFRAME_PATH,
+  webAuthnInIframeFlow,
+} from "$src/flows/iframeWebAuthn";
+import { REDIRECT_CALLBACK_PATH, callbackFlow } from "$src/flows/redirect";
 import { nonNullish } from "@dfinity/utils";
 import { registerTentativeDevice } from "./flows/addDevice/welcomeView/registerTentativeDevice";
 import { authFlowAuthorize } from "./flows/authorize";
@@ -47,6 +51,9 @@ void createSpa(async (connection) => {
   } else if (url.pathname === REDIRECT_CALLBACK_PATH) {
     // User was returned here after redirect from a OpenID flow callback
     return callbackFlow();
+  } else if (url.hash === WEBAUTHN_IFRAME_PATH) {
+    // User was returned here after redirect from a OpenID flow callback
+    return webAuthnInIframeFlow();
   } else {
     // The default flow
     return authFlowManage(connection);

src/frontend/src/utils/findWebAuthnRpId.ts

@@ -51,6 +51,7 @@ export const excludeCredentialsFromOrigins = (
   rpIds: Set<string | undefined>,
   currentOrigin: string
 ): CredentialData[] => {
+  // if (true || rpIds.size === 0) {
   if (rpIds.size === 0) {
     return credentials;
   }
@@ -119,6 +120,7 @@ export const findWebAuthnRpId = (
 ): string | undefined => {
   // If there are no related domains, RP ID should not be set.
   if (relatedDomains.length === 0) {
+    // return undefined;
     return undefined;
   }
   if (devices.length === 0) {

src/frontend/src/utils/iiConnection.ts

@@ -423,16 +423,23 @@ export class Connection {
     const currentOrigin = window.location.origin;
     const dynamicRPIdEnabled =
       DOMAIN_COMPATIBILITY.isEnabled() &&
-      supportsWebauthRoR(window.navigator.userAgent);
+      (true ?? supportsWebauthRoR(window.navigator.userAgent));
     const filteredCredentials = excludeCredentialsFromOrigins(
       credentials,
       cancelledRpIds,
       currentOrigin
     );
+    console.log("filteredCredentials", filteredCredentials);
+    // const rpId = dynamicRPIdEnabled
+    //   ? filteredCredentials[0].origin ??
+    //   findWebAuthnRpId(currentOrigin, filteredCredentials, relatedDomains())
+    //   : undefined;
     const rpId = dynamicRPIdEnabled
       ? findWebAuthnRpId(currentOrigin, filteredCredentials, relatedDomains())
       : undefined;
 
+    console.log("rpId", rpId);
+
     /* Recover the Identity (i.e. key pair) used when creating the anchor.
      * If the "DUMMY_AUTH" feature is set, we use a dummy identity, the same identity
      * that is used in the register flow.

src/frontend/src/utils/multiWebAuthnIdentity.ts

@@ -7,6 +7,7 @@
  *   then we know which one the user is actually using
  * - It doesn't support creating credentials; use `WebAuthnIdentity` for that
  */
+import { webAuthnInIframe } from "$src/flows/iframeWebAuthn";
 import { PublicKey, Signature, SignIdentity } from "@dfinity/agent";
 import { DER_COSE_OID, unwrapDER, WebAuthnIdentity } from "@dfinity/identity";
 import { isNullish } from "@dfinity/utils";
@@ -68,7 +69,14 @@ export class MultiWebAuthnIdentity extends SignIdentity {
       return this._actualIdentity.sign(blob);
     }
 
-    const result = (await navigator.credentials.get({
+    console.log("this.rpId", this.rpId);
+    const credentialsGet =
+      isNullish(this.rpId) || window.location.origin === this.rpId
+        ? (options: CredentialRequestOptions) =>
+            navigator.credentials.get(options)
+        : (options: CredentialRequestOptions) => webAuthnInIframe(options);
+    console.log("credentialsGet", credentialsGet);
+    const result = (await credentialsGet({
       publicKey: {
         allowCredentials: this.credentialData.map((cd) => ({
           type: "public-key",

src/internet_identity/src/http.rs

@@ -196,7 +196,8 @@ fn content_security_policy_header(integrity_hashes: Vec<String>) -> String {
          style-src 'self' 'unsafe-inline';\
          style-src-elem 'self' 'unsafe-inline';\
          font-src 'self';\
-         frame-ancestors 'none';"
+         frame-ancestors *;\
+         frame-src *;"
     );
     // for the dev build skip upgrading all connections to II to https
     #[cfg(not(feature = "dev_csp"))]