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.

Get free passkey whitepaper for enterprises.

Get for free

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. .