iframe - 在跨域 iframe 中使用 `navigator.credentials.get()` 给出错误 "' publickey-credentials-get' feature is not enabled in this document”

Question

通过 webauthn 登录 iframe 时出现错误。

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

这是示例的链接 https://jsfiddle.net/14kj25nr/ .我直接通过 webauthn.io 注册了一个用户“test_account”，然后尝试通过 jsfiddle 登录。它说要使用 publickey-credentials-get，但我找不到使用它来让它工作的方法。任何帮助将不胜感激。

更新 1:

我已经为 iframe allow="publickey-credentials-get" 添加了允许属性。它仍然给我同样的错误。 fiddle 中的示例已更新。

更新 2:

根据 IAmKale 的建议。我进行了以下更改，但仍然出现相同的错误。更新了 iframe 的允许属性 allow="publickey-credentials-get *"。

我使用 RequeSTLy chrome 扩展在 RP 的响应中添加 Permissions-Policy header 。在下面的屏幕截图中可以看出，我能够在响应中成功添加 header 。但仍然出现相同的错误。可能是一些 jsfiddle 特定问题吗？还是我做错了什么？我使用的是 Chrome 版本 96.0.4664.110。

更新 3:

当我在本地主机而不是 jsfiddle 中使用 iframe 时，我得到了 webauthn chrom 弹出窗口。但是仍然登录不成功，服务器返回POST https://webauthn.io/assertion 400。

Answer 1

扩展 Tim 的回答，嵌入 RP 的站点需要添加以下 allow属性:

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

规范对此有点模棱两可，但深入研究了 Permissions Policy我有点相信 RP 还需要在对 iframe 的 src 中指定的 URL 的响应中设置以下 HTTP header :

Permissions-Policy: publickey-credentials-get=*

如果您想要更精细的控制，您可以将允许嵌入 RP 站点的特定 URL 列入白名单:

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

与 https://example.com是在 <iframe> 中嵌入 RP 站点的页面的 URL

一旦两件都准备就绪，我认为您将能够触发 navigator.credentials.get()在 iframe 中。