概要
WebAuthn は、公開鍵認証情報ベースの認証をウェブに導入することでセキュリティを強化します。まもなく、Chrome、Firefox、Edge でサポートされる予定です(仕様が更新されます)。これにより、新しい種類の Credential
オブジェクトが追加されますが、使用している特定の認証情報の種類を機能検出せずに 認証情報管理 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()
}
サンプルコードに行われた変更を例としてご覧ください。
詳しくは以下をご覧ください。
認証情報管理 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 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 までお問い合わせください。