How do I enable passkeys in an iframe?

Enabling passkeys in iframes involves configuring specific permissions, headers, and user interaction conditions. Here's a step-by-step guide:

First, specify permissions using the iframe's allow attribute:

<iframe
    src="https://example.com"
    allow="publickey-credentials-get; publickey-credentials-create"
></iframe>

Include the corresponding HTTP response headers on your iframe source server to explicitly allow WebAuthn operations:

Permissions-Policy: publickey-credentials-get=(*), publickey-credentials-create=(*)

For enhanced security, limit to specific domains instead of *:

Permissions-Policy: publickey-credentials-get=("https://yourdomain.com"), publickey-credentials-create=("https://yourdomain.com")

Passkey operations (creation or authentication) must be triggered by a clear user action (also called "transient user activation"). Use event listeners for buttons or form submissions:

document.getElementById("loginPasskeyButton").addEventListener("click", async () => {
    try {
        const credential = await navigator.credentials.get({
            publicKey: publicKeyCredentialRequestOptions,
        });
        // Handle the authenticated credential
    } catch (err) {
        console.error("Passkey authentication error:", err);
    }
});

Verify correct Permissions-Policy settings in browser developer tools under the "Application → Frames" section.

60-page Enterprise Passkey Whitepaper:
Learn how leaders get +80% passkey adoption. Trusted by Rakuten, Klarna & Oracle

Get free Whitepaper

Conduct cross-browser testing, especially in browsers with strict cross-origin rules (e.g., Safari).

Following these steps ensures secure and seamless passkey integration in iframes. .