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

WebOTP API теперь может получать OTP из iframe.

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

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

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

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

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

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

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

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

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

Варианты использования iframe с перекрестным происхождением

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

Например:

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

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

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

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

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

Аннотировать привязанные источники к текстовому сообщению SMS

Когда WebOTP API вызывается из iframe, текстовое сообщение SMS должно включать источник верхнего кадра, которому предшествует @ , за которым следует OTP, которому предшествует # , за которым следует источник 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 (вызывает WebOTP API)

Совместимость

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

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

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

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

Ресурсы

Фото автора rupixen.com на Unsplash