What are challenges for passkeys in cross-origin iframes?

Implementing passkeys within cross-origin iframes can significantly enhance user experience and security, but there are several common challenges developers frequently encounter:

• Not all browsers uniformly support WebAuthn features in cross-origin iframes. As of now, Chrome and Firefox have implemented both passkey creation and authentication, while Safari supports only authentication.
• This inconsistent support demands thorough cross-browser testing and potentially browser-specific solutions.

• Misconfigured HTTP Permissions-Policy headers or missing allow attributes in the iframe can block passkey creation or login functionalities.
• Developers must explicitly enable permissions using:

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

Additionally, HTTP headers must align with iframe permissions to ensure correct delegation.

Safari currently doesn't allow passkey creation within cross-origin iframes, returning errors like:

NotAllowedError - The origin of the document is not the same as its ancestors.

There's no immediate workaround; developers must use alternative methods like redirects or pop-up flows for Safari users.

Native apps embedding WebViews often face additional restrictions since WebViews typically support only first-party passkeys (same domain as the app).

For third-party scenarios (like payments), developers must switch from embedded WebViews to system WebViews (e.g., ASWebAuthenticationSession on iOS or Custom Tabs on Android), ensuring proper passkey functionality across domains.

By addressing these challenges, developers can successfully implement seamless, secure, and robust passkey integrations within cross-origin iframe contexts.