Проверка обнаружения функций 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 определены два типа учетных данных:

  • PasswordCredential
  • FederatedCredential

PasswordCredential – это учетные данные, которые содержат идентификатор и пароль пользователя. FederatedCredential – это учетные данные, которые содержат идентификатор пользователя и строку, представляющую поставщика идентификационной информации.

С помощью этих двух типов учетных данных сайты могут:

  • Позвольте пользователю войти в аккаунт с помощью ранее сохраненных учетных данных на основе пароля или федеративных учетных данных, как только он перейдет на страницу (автоматический вход).
  • Сохраните учетные данные на основе пароля или федеративные учетные данные, с которыми пользователь вошел в систему,
  • Обновлять учетные данные пользователя (например, после смены пароля).

Что такое WebAuthn

WebAuthn (Web Authentication) добавляет учетные данные с открытым ключом в CM API. Например, он позволяет сайтам использовать стандартизированный способ реализации двухфакторной аутентификации с помощью устройств, совместимых с FIDO 2.0.

С технической точки зрения WebAuthn расширяет CM API с помощью интерфейса PublicKeyCredential.

В чём заключается проблема?

Ранее мы рекомендовали разработчикам использовать следующий код для обнаружения 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 года.

И наконец,

Если у вас есть вопросы, отправьте их на адрес @agektmr или agektmr@chromium.org.