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

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

Eiji Kitamura
Yi Gu
Hasła jednorazowe wysyłane SMS-em są często używane do weryfikacji numerów telefonów, na przykład jako drugi etap uwierzytelniania lub do weryfikacji płatności w internecie. Jednak przełączanie się między przeglądarką a aplikacją SMS, kopiowanie i wklejanie lub ręczne. wpisywanie hasła jednorazowego ułatwia popełnianie błędów i zwiększa wygodę użytkownika.

Interfejs WebOTP API umożliwia witrynom uzyskać hasło jednorazowe z wiadomości SMS i wprowadzić je są automatycznie przesyłane do użytkowników za pomocą jednego kliknięcia, bez przełączania . SMS ma specjalne formatowanie i jest powiązany ze źródłem, co zmniejsza skuteczność również zdarza się, że witryny wyłudzające informacje mogą ukraść hasło jednorazowe.

Jednym z przypadków użycia, które nie jest jeszcze obsługiwane w WebOTP, było kierowanie na źródło wewnątrz elementu iframe. Zwykle jest on używany do potwierdzenia płatności, szczególnie dzięki usłudze 3D Secure. Udostępnienie wspólnych elementów format do obsługi zasobów z innych domen elementów iframe, WebOTP API Hasła jednorazowe powiązane z zagnieżdżonymi źródłami, począwszy od Chrome 91.

Jak działa interfejs WebOTP API

Sam interfejs WebOTP API jest wystarczająco prosty:

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

Wiadomość SMS musi być sformatowana za pomocą jednorazowego oznaczenia miejsca pochodzenia .

Your OTP is: 123456.

@web-otp.glitch.me #12345

Zwróć uwagę, że w ostatnim wierszu znajduje się źródło, które ma być poprzedzone @, a po nim hasło jednorazowe poprzedzone znakiem #.

Po odebraniu wiadomości SMS pojawia się pasek informacyjny z prośbą o podanie numeru zweryfikować swój numer telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekazuje hasło jednorazowe do witryny i usuwa navigator.credentials.get() Następnie witryna może wyodrębnić hasło jednorazowe i dokończyć proces weryfikacji.

Podstawowe informacje na temat korzystania z WebOTP znajdziesz w artykule Weryfikowanie numerów telefonów w internecie przy użyciu WebOTP API.

Przypadki użycia elementów iframe z innych domen

Wpisanie hasła jednorazowego w formie elementu iframe z innego źródła jest częste w przypadku płatności. w różnych sytuacjach. Niektórzy wydawcy kart kredytowych wymagają dodatkowej weryfikacji w celu sprawdzać autentyczność płatnika. Jest to tzw. 3D Secure, a formularz to wyświetlane zwykle w elemencie iframe na tej samej stronie, co wtedy, gdy jest ono częścią procesu płatności.

Na przykład:

  • Użytkownik odwiedza stronę shop.example, aby kupić buty za pomocą karty kredytowej.
  • Po wpisaniu numeru karty kredytowej zintegrowany dostawca usług płatniczych wyświetla formularza z adresu bank.example w elemencie iframe z prośbą o zweryfikowanie który umożliwia szybką płatność.
  • bank.example wysyła do użytkownika SMS-a z hasłem jednorazowym, aby mógł: podając go w celu weryfikacji tożsamości.

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

Aby używać interfejsu WebOTP API w międzyźródłowym elemencie iframe, musisz wykonać 2 czynności:

  • Dodaj w tekście SMS-a adnotacje do źródła ramki najwyższego poziomu i punktu początkowego iframe .
  • Skonfiguruj zasadę uprawnień, aby umożliwić elementowi iframe z innych domen otrzymywanie hasła jednorazowego bezpośrednio od użytkownika.
.
Interfejs WebOTP API w elemencie iframe.

Możesz ją wypróbować na https://web-otp-iframe-demo.stackblitz.io.

Dodaj adnotacje dotyczące źródeł do wiadomości tekstowej SMS

W przypadku wywołania interfejsu API WebOTP z poziomu elementu iframe wiadomość tekstowa SMS musi zawiera źródło ramki górnej poprzedzone znakiem @, a następnie hasło jednorazowe poprzedzone znakiem # po którym następuje źródło iframe poprzedzone znakiem @.

@shop.example #123456 @bank.exmple

Skonfiguruj zasady uprawnień

Aby używać WebOTP w międzyźródłowym elemencie iframe, osadzony komponent musi przyznać dostęp do tego Interfejs API wykorzystujący zasady uprawnień otp-credentials, co pozwala uniknąć niezamierzonego zachowanie użytkownika. Ogólnie cel ten można osiągnąć na dwa sposoby:

  • przez nagłówek HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • za pomocą atrybutu iframe allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Zobacz więcej przykładów określania zasad uprawnień .

Zastrzeżenia

Poziomy zagnieżdżenia

Obecnie Chrome obsługuje tylko wywołania interfejsu WebOTP API z elementów iframe z innych domen mające nie więcej niż jedno unikalne źródło w łańcuchu elementów nadrzędnych. W w następujących sytuacjach:

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

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

Z powodu braku popytu ten scenariusz również nie jest obsługiwany. i złożoności UX.

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

Interoperacyjność

Chociaż przeglądarki inne niż Chromium nie implementują interfejsu WebOTP API, Safari używa tego samego formatu SMS-ów. dzięki wsparciu input[autocomplete="one-time-code"]. W przeglądarce Safari, gdy tylko SMS zawierający format kodu jednorazowego powiązanego z kodem źródłowym źródło, klawiatura sugeruje wpisanie hasła jednorazowego w polu do wprowadzania danych.

Od kwietnia 2021 r. Safari obsługuje element iframe z unikalnym formatem SMS-owym opartym na % Ponieważ jednak dyskusja na temat specyfikacji zakończyła się w zasadzie @, mamy nadzieję, będzie wdrożenie obsługiwanego formatu SMS.

Prześlij opinię

Twoja opinia pomoże nam ulepszać interfejs WebOTP API, dlatego zachęcamy do jego wypróbowania i daj nam znać co myślisz.

Zasoby

Autor zdjęcia: rupixen.com, Unsplash