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
SMS-owe hasła jednorazowe 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ą 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 pobieranie hasła jednorazowego z wiadomości SMS i automatyczne wpisywanie go w formularzu dla 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 bardzo prosty:

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

SMS musi być sformatowany za pomocą kodów jednorazowych powiązanych z pochodzącym urządzeniem.

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.

Poznaj podstawy korzystania z WebOTP na stronie Weryfikacja numerów telefonów w internecie za pomocą interfejsu WebOTP API.

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

W sytuacjach związanych z płatnościami często występuje wpisywanie hasła jednorazowego w formularzu w elemencie iframe z innej domeny. 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 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 w ramce iframe formularz z bank.example, w którym prosi użytkownika o potwierdzenie numeru telefonu, aby umożliwić szybkie dokonanie płatności.
  • 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:

  • W tekście SMS-a dodaj adnotacje zarówno dla źródła górnego elementu, 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.
WebOTP API w ramce iframe w działaniu

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

Dodawanie adnotacji do powiązanych usług na potrzeby SMS-a tekstowego

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

@shop.example #123456 @bank.exmple

Konfigurowanie zasad dotyczących 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 istnieją 2 sposoby osiągnięcia tego celu:

  • 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.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

Korzystanie z WebOTP w domenie b.com jest obsługiwane, ale w domenie c.com nie jest obsługiwane.

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 WebOTP API)

Interoperacyjność

Silniki przeglądarek inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari udostępnia ten sam format SMS-ów z obsługą input[autocomplete="one-time-code"]. W Safari, gdy tylko dotrze SMS z kodem jednorazowym z odpowiednim źródłem, klawiatura zasugeruje wpisanie kodu jednorazowego w polu tekstowym.

Od kwietnia 2021 r. Safari obsługuje iframe z unikalnym formatem SMS-a 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ż pomaga nam ulepszać interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim myślisz.

Zasoby

Zdjęcie: rupixen.com z Unsplash