---
url: 'https://www.corbado.com/faq/enable-passkeys-iframe'
title: 'How do I enable passkeys in an iframe?'
description: 'Learn the step-by-step process to enable passkeys in iframes, including essential permissions, HTTP headers, and user activation requirements.'
lang: 'en'
keywords: 'passkey iframe setup, Permissions-Policy, iframe passkey authentication, WebAuthn iframe'
---

# How do I enable passkeys in an iframe?

## How do I enable passkeys in an iframe?

Enabling passkeys in [iframes](https://www.corbado.com/blog/iframe-passkeys-webauthn) involves configuring
specific permissions, headers, and user interaction conditions. Here's a step-by-step
guide:

## 1. Set Permissions-Policy

First, specify permissions using the [iframe's](https://www.corbado.com/blog/iframe-passkeys-webauthn) `allow`
attribute:

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

## 2. Configure HTTP Headers

Include the corresponding HTTP response headers on your
[iframe](https://www.corbado.com/blog/iframe-passkeys-webauthn) source server to explicitly allow WebAuthn
operations:

```http
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")
```

## 3. Handle User Activation

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:

```javascript
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);
    }
});
```

## 4. Test and Validate

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

Conduct cross-browser testing, especially in browsers with strict
[cross-origin](https://www.corbado.com/blog/iframe-passkeys-webauthn) rules (e.g., Safari).

Following these steps ensures secure and
[seamless passkey integration](https://www.corbado.com/faq/identifier-first-approach-passkey-login) in
[iframes](https://www.corbado.com/blog/iframe-passkeys-webauthn). .

## Read the full article