Credential Management API の機能検出の確認

Eiji Kitamura

概要

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（Web Authentication）は、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 browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >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 までお問い合わせください。