Wypełnianie formularzy haseł jednorazowych w elementach iframe z innych domen za pomocą interfejsu WebOTP API

Interfejs WebOTP API może teraz odbierać hasła jednorazowe z elementów iframe.

Eiji Kitamura
Yi Gu
Hasła jednorazowe SMS-em są powszechnie używane do weryfikacji numerów telefonów, np. jako drugi etap uwierzytelniania lub do weryfikacji płatności w internecie. Jednak przełączanie się między przeglądarką a aplikacją SMS w celu skopiowania i wklejenia lub ręcznego wpisania kodu OTP może prowadzić do błędów i utrudnia korzystanie z usługi.

Interfejs WebOTP API umożliwia witrynom programowe uzyskiwanie jednorazowego hasła z wiadomości SMS i automatyczne wpisywanie go w formularzu dla użytkowników za pomocą jednego kliknięcia bez przełączania aplikacji. SMS jest specjalnie sformatowany i powiązany z pochodzeniem, co zmniejsza ryzyko kradzieży jednorazowego hasła przez witryny phishingowe.

Jednym z przypadków użycia, który nie był jeszcze obsługiwany w WebOTP, było kierowanie na pochodzenie w elemencie iframe. Jest to zwykle używane do potwierdzania płatności, zwłaszcza w przypadku 3D Secure. Interfejs WebOTP API, który ma wspólny format obsługujący ramki iframe z innych domen, od wersji Chrome 91 dostarcza kody OTP powiązane z zagnieżdżonymi domenami.

Jak działa WebOTP API

Sam interfejs WebOTP API jest dość prosty:

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

SMS musi być sformatowany za pomocą jednorazowych kodów powiązanych z pochodzeniem.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Zwróć uwagę, że w ostatnim wierszu znajduje się źródło, które ma zostać powiązane, poprzedzone znakiem @, a następnie kod OTP poprzedzony znakiem #.

Gdy SMS dotrze, pojawi się pasek informacyjny z prośbą o zweryfikowanie numeru telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekaże kod OTP do witryny i rozwiąże problem navigator.credentials.get(). Witryna może wtedy wyodrębnić kod OTP i dokończyć proces weryfikacji.

Poznaj podstawy korzystania z WebOTP w artykule Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API.

Przypadki użycia elementów iframe z różnych domen

Wpisywanie hasła jednorazowego w formularzu w ramach elementu iframe z innej domeny jest powszechne w przypadku płatności. Niektórzy wydawcy kart kredytowych wymagają dodatkowego kroku weryfikacji, aby sprawdzić autentyczność płatnika. Nazywa się to 3D Secure, a formularz jest zwykle wyświetlany w ramce iframe na tej samej stronie, jakby był częścią procesu płatności.

Na przykład:

  • Użytkownik odwiedza stronę shop.example, aby kupić parę butów za pomocą karty kredytowej.
  • Po wpisaniu numeru karty kredytowej zintegrowany dostawca usług płatniczych wyświetla w ramce iframe formularz z bank.example, w którym prosi użytkownika o zweryfikowanie numeru telefonu w celu szybkiego sfinalizowania transakcji.
  • bank.example wysyła do użytkownika SMS-a z hasłem jednorazowym, które może on wpisać, aby potwierdzić swoją tożsamość.

Jak korzystać z interfejsu WebOTP API z międzyźródłowego elementu iframe

Aby używać interfejsu WebOTP API w elemencie iframe z innej domeny, musisz wykonać 2 czynności:

  • W treści SMS-a podaj zarówno źródło ramki najwyższego poziomu, jak i źródło elementu iframe.
  • Skonfiguruj zasady dotyczące uprawnień, aby zezwolić ramce iframe z innej domeny na bezpośrednie otrzymywanie od użytkownika kodu OTP.
Interfejs WebOTP API w ramce iframe w działaniu.

Wersję demonstracyjną możesz wypróbować na stronie https://web-otp-iframe-demo.stackblitz.io.

Dodawanie adnotacji do powiązanych źródeł w SMS-ie

Gdy interfejs WebOTP API jest wywoływany z elementu iframe, SMS musi zawierać źródło ramki najwyższego poziomu poprzedzone znakiem @, a następnie kod OTP poprzedzony znakiem # i źródło elementu iframe poprzedzone znakiem @.

@shop.example #123456 @bank.exmple

Konfigurowanie zasad dotyczących uprawnień

Aby używać interfejsu WebOTP w elemencie iframe z innej domeny, osadzający musi przyznać dostęp do tego interfejsu API za pomocą zasad uprawnień otp-credentials, aby uniknąć niezamierzonego działania. Ogólnie rzecz biorąc, możesz to zrobić na 2 sposoby:

  • w nagłówku HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • w atrybucie iframe allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Więcej przykładów określania zasad dotyczących uprawnień

Zastrzeżenia

Poziomy zagnieżdżenia

Obecnie Chrome obsługuje wywołania interfejsu WebOTP API tylko z elementów iframe z innych domen, które w swoim łańcuchu przodków mają nie więcej niż jedną unikalną domenę. W tych scenariuszach:

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

używanie WebOTP w domenie b.com jest obsługiwane, ale w domenie c.com nie.

Pamiętaj, że poniższy scenariusz również nie jest obsługiwany ze względu na brak popytu i złożoność UX.

  • a.com -> b.com -> a.com (wywołuje interfejs WebOTP API)

Interoperacyjność

Silniki przeglądarek inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari obsługuje ten sam format SMS-ów co input[autocomplete="one-time-code"]. W Safari, gdy tylko przyjdzie SMS zawierający jednorazowy kod w formacie powiązanym z pochodzeniem, a pochodzenie będzie pasować, klawiatura zaproponuje wpisanie kodu OTP w polu do wprowadzania danych.

Od kwietnia 2021 r. Safari obsługuje element iframe z unikalnym formatem SMS-ów z użyciem %. Jednak w wyniku dyskusji dotyczącej specyfikacji zdecydowano się na użycie znaku @. Mamy nadzieję, że implementacja obsługiwanego formatu SMS-ów będzie zbieżna.

Prześlij opinię

Twoja opinia jest dla nas bardzo cenna, ponieważ pomaga nam ulepszać interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim sądzisz.

Zasoby

Zdjęcie: rupixen.com, Unsplash