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
SMS-y jednorazowe (hasła jednorazowe) są zwykle używane do weryfikacji numerów telefonów, na przykład jako drugiego etapu uwierzytelniania lub do weryfikacji płatności w internecie. Jednak przełączanie się między przeglądarką a aplikacją do SMS-ów, kopiowanie i wklejanie oraz ręczne wpisywanie hasła jednorazowego ułatwia pomyłki i utrudnia użytkownikom.

Interfejs WebOTP API umożliwia witrynom programowe uzyskiwanie jednorazowego hasła z SMS-a i wpisywanie go automatycznie w formularzu jednym kliknięciem, bez konieczności przełączania się na inną aplikację. SMS-y są specjalnie sformatowane i powiązane ze źródłem danych, co minimalizuje ryzyko kradzieży hasła jednorazowego z wyłudzonych haseł przez witryny wyłudzające informacje.

Jednym z przypadków użycia, który jeszcze nie był obsługiwany w WebOTP, było kierowanie na źródło w elemencie iframe. Zwykle jest on używany do potwierdzania płatności, zwłaszcza w przypadku 3D Secure. Dzięki wspólnemu formatowi do obsługi elementów iframe z innych domen interfejs WebOTP API od Chrome 91 dostarcza teraz pliki OP powiązane z zagnieżdżonymi źródłami.

Jak działa interfejs WebOTP API

Sam interfejs WebOTP API jest wystarczająco prosty:

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

SMS musi być sformatowany za pomocą jednorazowych kodów powiązanych ze źródłem.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Zwróć uwagę, że w ostatnim wierszu znajduje się źródło, które zostanie poprzedzone znakiem @, po którym następuje hasło jednorazowe poprzedzone znakiem #.

Gdy otrzymasz SMS-a, wyświetli się pasek informacyjny z prośbą o potwierdzenie numeru telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekaże hasło jednorazowe do witryny i zablokuje navigator.credentials.get(). Witryna może wtedy wyodrębnić hasło jednorazowe i zakończyć proces weryfikacji.

Podstawy korzystania z WebOTP znajdziesz w artykule Weryfikowanie numerów telefonów w internecie przy użyciu interfejsu WebOTP API.

Przypadki użycia elementów iframe z innych domen

Wpisywanie hasła jednorazowego w formie elementu iframe z innych domen jest często używane w sytuacjach płatności. Niektórzy wydawcy kart kredytowych wymagają dodatkowej weryfikacji, aby sprawdzić autentyczność płatnika. Nazywa się to 3D Secure i formularz jest zazwyczaj widoczny w elemencie iframe na tej samej stronie, jakby był częścią procesu płatności.

Na przykład:

  • Użytkownik odwiedza sklep 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 elemencie iframe formularz z usługi bank.example z prośbą o potwierdzenie numeru telefonu na potrzeby szybkiej płatności.
  • bank.example wysyła do użytkownika SMS-a z hasłem jednorazowym, aby mógł on wpisać go w celu potwierdzenia swojej tożsamości.

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

Aby używać interfejsu WebOTP API z międzyźródłowego elementu iframe, musisz zrobić 2 rzeczy:

  • W wiadomości tekstowej SMS dodaj adnotacje dotyczące źródła ramki najwyższego poziomu i źródła iframe.
  • Skonfiguruj zasady uprawnień tak, aby element iframe z innych domen mógł otrzymywać hasło jednorazowe bezpośrednio od użytkownika.
Interfejs WebOTP API w elemencie iframe w działaniu.

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

Dodaj adnotacje do elementów źródłowych w SMS-ie

Jeśli zostanie wywołany interfejs WebOTP API z elementu iframe, wiadomość tekstowa SMS musi zawierać źródło ramki najwyższego poziomu poprzedzone znakiem @, po którym następuje hasło jednorazowe „#”, po którym następuje źródło elementu iframe poprzedzone znakiem @.

@shop.example #123456 @bank.exmple

Skonfiguruj zasadę uprawnień

Aby można było używać WebOTP w międzyźródłowym elemencie iframe, umieszczonego elementu musi przyznać dostęp do tego interfejsu API za pomocą zasady uprawnień otp-credentials, co pozwoli uniknąć niezamierzonego zachowania. Ogólnie można osiągnąć ten cel na 2 sposoby:

  • przez nagłówek HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • z 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 innych domen iframe, które mają nie więcej niż 1 unikalne źródło w łańcuchu elementów nadrzędnych. W tych sytuacjach:

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

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

Ten scenariusz nie jest też obsługiwany ze względu na brak zapotrzebowania i złożoność UX.

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

Interoperacyjność

Wyszukiwarki inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari udostępnia ten sam format SMS ze swoją obsługą input[autocomplete="one-time-code"]. Gdy w Safari dotrze do SMS-a SMS z kodem jednorazowym przypisanym do źródła, klawiatura zasugeruje wpisanie hasła jednorazowego w polu do wprowadzania danych.

Od kwietnia 2021 roku Safari obsługuje elementy iframe z unikalnym formatem SMS-ów za pomocą %. Ponieważ jednak dyskusja na temat specyfikacji została zakończona, a zarazem chodzi o @, mamy nadzieję, że wdrożenie obsługiwanego formatu SMS-ów zostanie scalone.

Prześlij opinię

Twoja opinia pomoże nam ulepszyć interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim myślisz.

Zasoby

Zdjęcie: rupixen.com, Unsplash