Заполняйте формы OTP в iframe из разных источников с помощью WebOTP API

API WebOTP теперь может получать одноразовые пароли из фреймов.

Одноразовые пароли (OTP) из SMS обычно используются для подтверждения телефонных номеров, например, на втором этапе аутентификации, или для подтверждения платежей в интернете. Однако переключение между браузером и SMS-приложением для копирования, вставки или ручного ввода OTP легко приводит к ошибкам и усложняет пользовательский интерфейс.

API WebOTP позволяет веб-сайтам программно получать одноразовый пароль из SMS-сообщения и автоматически вводить его в форму для пользователей одним касанием, не переключая приложение. SMS-сообщение имеет специальный формат и привязано к источнику, что снижает вероятность кражи одноразового пароля фишинговыми сайтами.

Одним из вариантов использования, который пока не поддерживается в WebOTP, является нацеливание на источник внутри iframe. Обычно это используется для подтверждения платежей, особенно с 3D Secure . Имея общий формат для поддержки кросс-источниковых iframe , API WebOTP теперь предоставляет одноразовые пароли, привязанные к вложенным источникам, начиная с Chrome 91.

Как работает API WebOTP

Сам API WebOTP достаточно прост:


  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });

SMS-сообщение должно быть отформатировано с использованием одноразовых кодов, привязанных к отправителю .

Your OTP is: 123456.

@web-otp.glitch.me #12345

Обратите внимание, что в последней строке указан источник, к которому должна быть выполнена привязка, которому предшествует символ @ а затем одноразовый пароль (OTP), которому предшествует символ # .

При получении SMS-сообщения появляется информационная панель с предложением подтвердить номер телефона. После нажатия кнопки Verify браузер автоматически пересылает одноразовый пароль на сайт и обрабатывает метод navigator.credentials.get() . После этого сайт может извлечь одноразовый пароль и завершить процесс проверки.

Изучите основы использования WebOTP в статье Проверка телефонных номеров в Интернете с помощью API WebOTP .

Примеры использования кросс-источниковых iframes

Ввод одноразового пароля в форму в кросс-доменном iframe часто встречается при оплате. Некоторые эмитенты кредитных карт требуют дополнительный этап проверки подлинности плательщика. Это называется 3D Secure, и форма обычно отображается в iframe на той же странице, как будто она является частью процесса оплаты.

Например:

  • Пользователь посещает shop.example , чтобы купить пару обуви с помощью кредитной карты.
  • После ввода номера кредитной карты интегрированный платежный провайдер отображает форму из bank.example в iframe, предлагая пользователю подтвердить свой номер телефона для быстрой оплаты.
  • bank.example отправляет пользователю SMS-сообщение, содержащее одноразовый пароль, который он может ввести для подтверждения своей личности.

Как использовать API WebOTP из кросс-доменного iframe

Чтобы использовать API WebOTP из кросс-доменного iframe, вам необходимо сделать две вещи:

  • Укажите в тексте SMS-сообщения как начало верхнего фрейма, так и начало iframe.
  • Настройте политику разрешений, чтобы разрешить кросс-источниковому iframe получать одноразовые пароли напрямую от пользователя.
API WebOTP в действии внутри iframe.

Вы можете самостоятельно опробовать демо-версию по адресу https://web-otp-iframe-demo.stackblitz.io .

Добавить примечания bound-origins к текстовому сообщению SMS

При вызове API WebOTP из iframe текстовое сообщение SMS должно включать источник верхнего фрейма, которому предшествует @ , за которым следует одноразовый пароль, которому предшествует # а затем источник iframe, которому предшествует @ .

@shop.example #123456 @bank.exmple

Настроить политику разрешений

Чтобы использовать WebOTP в кросс-доменном iframe, интегратор должен предоставить доступ к этому API через политику разрешений otp-credentials, чтобы избежать непреднамеренного поведения. В общем случае, существует два способа достижения этой цели:

  • через HTTP-заголовок:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • через атрибут allow iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Дополнительные примеры настройки политики разрешений см.

Предостережения

Уровни вложенности

В настоящее время Chrome поддерживает вызовы API WebOTP только из кросс-источниковых iframe, имеющих не более одного уникального источника в цепочке предков. В следующих случаях:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

использование WebOTP в b.com поддерживается, но в c.com — нет.

Обратите внимание, что следующий сценарий также не поддерживается из-за отсутствия спроса и сложностей UX.

  • a.com -> b.com -> a.com (вызывает API WebOTP)

Взаимодействие

Хотя браузерные движки, отличные от Chromium, не поддерживают API WebOTP, Safari использует тот же формат SMS с поддержкой input[autocomplete="one-time-code"] . В Safari, как только SMS-сообщение, содержащее одноразовый код, привязанный к источнику, приходит с соответствующим источником, клавиатура предлагает ввести одноразовый код в поле ввода.

По состоянию на апрель 2021 года Safari поддерживает iframe с уникальным форматом SMS, использующим % . Однако, поскольку в ходе обсуждения спецификации было решено использовать @ , мы надеемся, что реализация поддерживаемого формата SMS будет согласована.

Обратная связь

Ваши отзывы неоценимы для улучшения API WebOTP, поэтому попробуйте его и дайте нам знать, что вы думаете.

Ресурсы

Фото rupixen.com на Unsplash