如何让WebAuthn在React App iFrame中跨源工作？

Question

我正在尝试使用集成在我的 React 应用程序中的 WebAuthn 并将其用作另一个网站中的 iFrame。

我遇到以下错误：

以下凭证操作只能发生在以下文档中： 与其所有祖先同源：存储/检索 'PasswordCredential' 和 'FederatedCredential'，存储 “公钥凭证”...

该网站位于另一个域中，我的 React App iFrame 域是其他域，因此它会出现跨源问题。

我什至尝试了下面，但仍然出现错误，

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

任何人都有另一个解决方案可以让我在跨源中使用 WebAuthn 吗？

Answer 1

正如@agl在评论section中提到的，如果您在Iframe中明确允许它（就像您在案例中所做的那样），您可以在

Cross-origin中使用navigator.credentials.get()。但目前不支持在 Cross-origin 中使用 navigator.credentials.create()（Github 中已经有一个未解决的问题）