Credential Management API 機能検出の確認

まとめ

WebAuthn は、公開鍵認証情報ベースの認証をウェブに導入することでセキュリティを強化しています。まもなく Chrome、Firefox、Edge でサポートされる予定です(仕様が更新されます)。新しい種類の Credential オブジェクトが追加されます。ただし、Credential Management API を使用するウェブサイトは、使用している特定の認証情報タイプを機能検出することなく機能しなくなる可能性があります。

特徴検出のためにすでにこの機能を使用している場合

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

代わりに行うこと

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

例として、サンプルコードに加えられた変更をご覧ください。

詳しくは以下をご覧ください。

Credential Management API とは

Credential Management API(CM API)を使用すると、ウェブサイトはユーザー エージェントの認証情報ストアにプログラムでアクセスでき、呼び出し元のユーザー認証情報を保存/取得できます。

基本 API:

  • navigator.credentials.get()
  • navigator.credentials.store()
  • navigator.credentials.create()
  • navigator.credentials.preventSilentAccess()

元の CM API 仕様では、次の 2 つの認証情報タイプが定義されています。

  • PasswordCredential
  • FederatedCredential

PasswordCredential は、ユーザーの ID とパスワードを含む認証情報です。FederatedCredential は、ユーザー ID と ID プロバイダを表す文字列を含む認証情報です。

この 2 つの認証情報により、ウェブサイトでできること:

  • ユーザーがアクセスしたらすぐに、以前に保存したパスワード ベースまたは連携の認証情報でログインできるようにする(自動ログイン)。
  • ユーザーがログインに使用したパスワード ベースまたは連携の認証情報を保存する
  • ユーザーのログイン認証情報を最新の状態に保つ(パスワードの変更後など)

WebAuthn とは

WebAuthn(ウェブ認証)は、CM API に公開鍵認証情報を追加します。たとえば、FIDO 2.0 準拠の認証システム デバイスを使用して 2 要素認証を実装する標準化された方法をウェブサイトに提供します。

技術的なレベルでは、WebAuthn は PublicKeyCredential インターフェースを使用して CM API を拡張します。

問題の詳細

これまで、以下のコードを使用して、デベロッパーが CM API を機能検出できるようにしていました。

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

例として、サンプルコードに加えられた実際の変更をご覧ください。

参考として、WebAuthn に追加された PublicKeyCredential を検出する方法は次のとおりです。

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

タイムライン

WebAuthn の最も古い実装は Firefox で、2018 年 5 月上旬に安定版になる予定です

最終結果

ご不明な点がありましたら、@agektmr または agektmr@chromium.org までお問い合わせください。