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 są często 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 obsługi SMS-ów w celu skopiowania i wklejenia kodu OTP lub jego ręcznego wpisania może prowadzić do pomyłek i utrudniać korzystanie z usługi.

Interfejs WebOTP API umożliwia witrynom automatyczne pobieranie hasła jednorazowego z wiadomości SMS i jego automatyczne wpisywanie w formularzu przez użytkowników za pomocą jednego kliknięcia bez przełączania aplikacji. Wiadomość SMS ma specjalny format i jest powiązana z pochodzącym z niej źródłem, co zmniejsza ryzyko, że witryny phishingowe wykradają hasło jednorazowe.

Jednym z takich przypadków, który nie jest jeszcze obsługiwany w WebOTP, było kierowanie na domenę w ramach elementu iframe. Jest to zwykle używane do potwierdzenia płatności, zwłaszcza w przypadku 3D Secure. Dzięki wspólnym formatom do obsługi iframe’ów w różnych domenach interfejs WebOTP API dostarcza teraz tokeny OTP powiązane z zagnieżdżonymi źródłami danych od wersji Chrome 91.

Jak działa interfejs WebOTP API

Interfejs WebOTP API jest dość prosty:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

Zwróć uwagę, że ostatni wiersz zawiera źródło, które ma być powiązane, poprzedzone znakiem @, a następnie klucz OTP poprzedzony znakiem #.

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

Podstawy korzystania z WebOTP znajdziesz w artykule Weryfikacja numerów telefonów w internecie za pomocą interfejsu WebOTP API.

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

W przypadku płatności często zdarza się, że użytkownik musi wpisać hasło jednorazowe w formularzu w elemencie iframe z innej domeny. Niektórzy wydawcy kart kredytowych wymagają dodatkowego kroku weryfikacji, aby sprawdzić autentyczność płatnika. Nazywamy to 3D Secure. Formularz jest zwykle wyświetlany w ramce osadzonej na tej samej stronie, jakby był 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 płatności wyświetla formularz bank.example w elemencie iframe z prośbą o potwierdzenie numeru telefonu, by umożliwić szybką płatność.
  • bank.example wysyła SMS-a z hasłem jednorazowym, aby użytkownik mógł go wpisać i potwierdzić swoją tożsamość.

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

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

  • Dodaj w SMS-ie adnotacje zarówno do źródła ramki najwyższego poziomu, jak i źródła elementu iframe.
  • Skonfiguruj zasady dotyczące uprawnień, aby umożliwić elementowi iframe w innej domenie odbieranie kodu OTP bezpośrednio od użytkownika.
Interfejs WebOTP API w elemencie iframe.

Sam możesz wypróbować wersję demonstracyjną, korzystając z adresu https://web-otp-iframe-demo.stackblitz.io.

Dołączanie adnotacji do powiązanych usług do SMS-a

Gdy interfejs WebOTP API jest wywoływany z poziomu elementu iframe, wiadomość SMS musi zawierać domenę najwyższego poziomu poprzedzoną ciągiem @, a następnie OTP poprzedzony ciągiem #, a następnie domenę elementu iframe poprzedzoną ciągiem @.

@shop.example #123456 @bank.exmple

Skonfiguruj zasady uprawnień

Aby używać WebOTP w elementach iframe z innych domen, osoba umieszczająca je na stronie musi przyznać dostęp do tego interfejsu API za pomocą zasad dotyczących uprawnień dotyczących danych logowania do usługi OTP, aby uniknąć niezamierzonego działania. Ogólnie cel ten można osiągnąć na dwa sposoby:

  • za pomocą nagłówka 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 dotyczących uprawnień.

Zastrzeżenia

Poziomy zagnieżdżenia

Obecnie Chrome obsługuje tylko wywołania interfejsu WebOTP API z elementów iframe z różnych domen, które mają nie więcej niż jedno unikalne pochodzenie w łańcuchu przodków. W tych sytuacjach:

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

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

Pamiętaj, że poniższy scenariusz również nie jest obsługiwany z powodu braku popytu i złożoności interfejsu użytkownika.

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

Interoperacyjność

Mechanizmy przeglądarki inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari korzysta z tego samego formatu SMS co obsługa input[autocomplete="one-time-code"]. Gdy tylko w Safari pojawi się SMS zawierający kod jednorazowy powiązany ze źródłem z dopasowanym źródłem, klawiatura sugeruje wpisanie hasła jednorazowego w polu do wprowadzania danych.

Od kwietnia 2021 r. Safari obsługuje element iframe z unikalnym formatem SMS-ów za pomocą %. Jednak w ramach dyskusji na temat specyfikacji zdecydowaliśmy się na @, więc mamy nadzieję, że implementacja obsługiwanego formatu SMS-a będzie zgodna.

Prześlij opinię

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

Zasoby

Autor zdjęcia: rupixen.com, Unsplash