WebAuthn в реальной
жизни
Остапенко Анатолий
Ведущий Frontend-разработчик Почты Mail.ru
a.ostapenko@corp.mail.ru

Почта Mail.ru
поддержала технологию
WebAuthn

3
О чём пойдёт речь
• Простыми словами о WebAuthn
• Наш опыт его использования
• UI-автотесты для WebAuthn
• Перспективы развития

Что такое WebAuthn и
зачем он нужен?

6
Недостатки паролей
• Если пароль простой — его можно подобрать
• Один пароль может использоваться на нескольких сервисах
• Надёжные и уникальные пароли трудно запомнить
Подробнее про недостатки парольного метода —
https://swoopnow.com/password-authentication/

7
Тренд на passwordless
• The end of passwords, go passwordless — Microsoft
• Email Without Passwords — Yahoo
• Increase Engagement and Enhance Security with Password-less
Authentication — Amazon
• Почта Mail.ru откажется от паролей — Mail.ru

8
Альтернатива — электронные ключи
• Использует ассиметричную криптографию, описанную в
семействе протоколов FIDO2
• Разрабатывается альянсом FIDO (Fast IDentity Online)
• W3C рекомендация: Web Authentication: An API for accessing
Public Key Credentials Level 1 (WebAuthn) — браузерное
JS API, позволяющее взаимодействовать с
электронными ключами

WebAuthn

10
API WebAuthn — две операции
Создание учётных данных — MakeCredential.
const credential = await navigator.credentials.create({
publicKey: publicKeyCredentialCreationOptions,
});

Демо 1

12
API WebAuthn — две операции
Подпись запроса уже созданными учётными данными —
GetAssertion.
const credential = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions,
});

Демо 2

15
Подробнее про API WebAuthn
• https://www.youtube.com/watch?v=yccBhpdJjJc — Getting
Started with WebAuthn with Nick Steele
• https://www.youtube.com/watch?v=nOtKoUJ34cc — Простота.
Надежность. WebAuthn / Алексей Носов

16
Преимущества WebAuthn
• Пользователь не использует пароли
• В алгоритмы работы WebAuthn встроена проверка origin
клиента — это защищает пользователей от фишинга
• WebAuthn как API предоставляет разработчикам удобную
абстракцию над реализацией аутентификаторов
Какие ещё преимущества у WebAuthn — techbeacon.com

Электронные ключи

18
Электронные ключи (security keys)
Две категории ключей:
• Платформонезависимые (физические) ключи;
• Платформозависимые (встроенные) ключи.

Поддержка WebAuthn

24
Поддержка WebAuthn
Браузер
Работа с физическими
ключами
Работа с отпечатками
iOS Safari Нет? Нет?
Mac OS Safari Нет Нет
Mac OS Chrome Да Да
Android Chrome, Opera, Firefox Да Да
Mac OS Opera, Firefox Да Нет
Win10 Chrome, Opera, Firefox Да Да?
Edge Да Нет

Регистрация
аутентификаторов

31
Аттестация
Аттестация — способ для аутентификатора доказать серверу
свою подлинность
const credential = await navigator.credentials.create({
publicKey: {
attestation: 'direct',
...,
},
});

32
Неудобный сценарий
• Пользователь привязал один отпечаток на смартфоне
• Пользователь авторизуется на компьютере
• По сохранённым учётным данным невозможно определить,
можно ли их использовать на данном браузере/устройстве
• Пользователю предлагают подтвердить себя в WebAuthn
• Пользователь испытывает фрустрацию

Работа WebAuthn на
разных поддоменах

34
Указываем определённый домен
const credential = await navigator.credentials.create({
publicKey: {
rp: {
name: 'Mail.ru Group',
id: 'mail.ru',
},
...,
},
});

Работа WebAuthn в iframe

37
Как работать с WebAuthn в iframe
• Вместо вызовов API WebAuthn, сериализуем параметры
вызова и отправляем в родительское окно;
• В родительском окне мы десериализуем эти параметры и
вызываем методы WebAuthn;
• При получении ответа сериализуем его и отправляем внутрь
iframe, где используем его для дальнейшей работы

Автоматизация
тестирования WebAuthn

39
Протокол WebDriver не поддерживает
В протоколе WebDriver не описаны методы для
автоматизации работы с WebAuthn.
В черновике черновика спецификации WebAuthn Level 2 есть
секция с идеями о том, как может работать такая
автоматизация — https://w3c.github.io/webauthn/#sctn-
automation.

40
Патчим методы WebAuthn
navigator.credentials.create = (options) => {
window.credentialsCreateArgs = options;
return new Promise((resolve, reject) => {
window.credentialsCreateSuccess = resolve;
window.credentialsCreateFail = reject;
});
};

41
Возвращаем константный ответ
const credentialsCreateResponse = { /* constant object */ };
window.credentialsCreateSuccess(credentialsCreateResponse);

42
Такие тесты будут ненадёжными
• Мы не проверяем, правильно ли клиент формирует и
прокидывает параметры внутрь методов WebAuthn;
• Мы не проверяем корректность изменений сервера, при его
релизах.

43
Реализуем алгоритм работы WebAuthn
const credentialsCreateResponse =
calcCredentialsCreateResponse(window.credentialsCreateArgs);
window.credentialsCreateSuccess(credentialsCreateResponse);

44
Схема работы автотеста
• Получаем аргументы, с которыми были вызваны методы
WebAuthn;
• На их основе вычисляем ответ функции так же, как это
происходит внутри аутентификаторов;
• Результат возвращаем из подменённых нативных функций;
• Остальной код сервиса обрабатывает ответ без изменений.

45
Исходники и примеры
Исходники и примеры в репозитории https://github.com/artifact-
project/webauthn:
• Реализация аутентификатора, пригодная для использования
в автотестах;
• Пример UI-автотеста, использующего эту реализацию.

Демо 3

Настоящее и будущее
WebAuthn

Почему сейчас WebAuthn — фича не для
широкой аудитории?

50
Продвижение WebAuthn в массы
• Браузеры недостаточно надёжно и стабильно поддержали
все возможности WebAuthn;
• Малая часть пользователей обладает электронными
аутентификаторами, как физическими, так и встроенными.

Где ещё можно
использовать WebAuthn?

53
Сценарии использования WebAuthn
• Почта Mail.ru использует WebAuthn как альтернативу паролям
для однофакторных пользователей;
• Второй фактор для пользователей с двух-факторной
аутентификацией;
• Восстановление доступа к аккаунту;
• Доп. мера безопасности при редактировании настроек аккаунта.
Ещё больше сценариев — Introduction to WebAuthn — Medium

Итоги

55
Преимущества WebAuthn перед паролями
• При использовании WebAuthn не требуется запоминать и
вводить пароли;
• WebAuthn гораздо сложнее взломать из-за того, что там
используются стойкие алгоритмы шифрования;
• WebAuthn имеет встроенную защиту от фишинга;
• WebAuthn — это стандартизированный механизм
аутентификации пользователей.

Пока пароли хранятся только в
голове, без ведома владельца
узнать их не получится

В наших силах сделать
WebAuthn популярным
и удобным!

58
Ссылки, использованные на слайдах
• https://swoopnow.com/password-authentication/ — 4 Password Authentication Vulnerabilities & How to
Avoid Them
• https://www.microsoft.com/en-us/security/technology/identity-access-management/passwordless — The end of
passwords, go passwordless
• https://www.yahoo.com/news/email-without-passwords-yahoo-account-200000867.html — Email Without
Passwords: How Yahoo Account Key Works
• https://aws.amazon.com/ru/blogs/startups/increase-engagement-and-enhance-security-with-passwordless-
authentication/ — Increase Engagement and Enhance Security with Password-less Authentication
• https://corp.mail.ru/ru/press/releases/10436/ — Почта Mail.ru откажется от паролей
• https://www.w3.org/TR/2019/REC-webauthn-1-20190304/ — Web Authentication: An API for accessing Public
Key Credentials Level 1

59
Ссылки, использованные на слайдах
• https://www.youtube.com/watch?v=yccBhpdJjJc — Getting Started with WebAuthn with Nick Steele
• https://www.youtube.com/watch?v=nOtKoUJ34cc — Простота. Надежность. WebAuthn / Алексей Носов
• https://techbeacon.com/security/webauthn-developers-5-steps-better-authentication — WebAuthn for developers:
5 steps to better authentication
• https://caniuse.com/webauthn — Support of Web Authentication API
• https://w3c.github.io/webauthn/#sctn-automation — User Agent Automation
• https://github.com/artifact-project/webauthn
• https://blog.mail.ru/ekeys/ — Приложи и войди — Блог Почты Mail.ru
• https://www.blog.google/technology/safety-security/your-android-phone-is-a-security-key/ — The ultimate account
security is now in your pocket

60
Ссылки, использованные на слайдах
• https://medium.com/@herrjemand/introduction-to-webauthn-api-
5fd1fb46c285 — Introduction to WebAuthn API

61
Дополнительная информация
• https://xakep.ru/2014/07/09/future-without-passwords/ — Будущее без паролей
• https://www.theverge.com/2019/2/22/18235173/the-best-hardware-security-keys-yubico-titan-key-u2f — The best
hardware security keys for two-factor authentication
• https://www.yubico.com/wp-content/uploads/2019/01/Ponemon-Authentication-Report.pdf — The 2019 State of
Password and Authentication Security Behaviors Report
• https://www.thesslstore.com/blog/20-phishing-statistics-to-keep-you-from-getting-hooked-in-2019/ — 20 Phishing
Statistics to Keep You from Getting Hooked in 2019
• https://developers.yubico.com/U2F/Protocol_details/Key_generation.html — Key generation for U2F
• https://github.com/w3c/webauthn/issues/1236 — Create a WebDriver Virtual Authenticator extension to allow
automated testing

Спасибо за ваше внимание,
готов ответить на ваши
вопросы!
Остапенко Анатолий
Ведущий Frontend-разработчик Почты Mail.ru
a.ostapenko@corp.mail.ru