在跨域 iframe 中使用 `navigator.credentials.get()` 会出现错误“本文档中未启用‘publickey-credentials-get’功能”

Question

Getting the error while logging into an iframe through webauthn.

The 'publickey-credentials-get' feature is not enabled in this document. Permissions Policy may be used to delegate Web Authentication capabilities to cross-origin child frames.

Here is the link to the example https://jsfiddle.net/14kj25nr/ . I have registered a user "test_account" directly through webauthn.io and then tried to login into it through jsfiddle. It says to use publickey-credentials-get , but I couldn't find a way to use it to get it to work. Any help would be appreciated.

Update:

I have added the allow attribute for the iframe allow="publickey-credentials-get" . It still gives me the same error. The example in the fiddle is updated.

Answer 1

The Web Authentication API is disabled by default in cross-origin iframes. To override this default policy and indicate that a cross-origin iframe is allowed to invoke the Web Authentication API's [[DiscoverFromExternalSource]](origin, options, sameOriginWithAncestors) method, specify the allow attribute on the iframe element and include the publickey-credentials-get feature-identifier token in the allow attribute's value.

https://www.w3.org/TR/webauthn-2/#sctn-iframe-guidance

Answer 2

Expanding on Tim's answer, the site embedding the RP will need to add the following allow attribute:

<iframe src="..." allow="publickey-credentials-get *" />

The spec is a little ambiguous about this, but digging into Permissions Policy a bit I believe the RP also needs to set the following HTTP header in the response to the URL specified in the iframe's src :

Permissions-Policy: publickey-credentials-get=*

If you want more granular control you can whitelist specific URLs that are allowed to embed the RP's site:

# Only specific sites
Permissions-Policy: publickey-credentials-get=("https://example.com")

With https://example.com being the URL of the page that's embedding the RP's site in the <iframe>

Once both pieces are in place I think you'll be able to trigger navigator.credentials.get() in the iframe.