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 krok 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'] }
  });
…

Wiadomość SMS musi być sformatowana 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.

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. 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 ramki, 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.

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 elementu iframe poprzedzoną ciągiem @, a następnie OTP poprzedzony ciągiem #, a następnie domenę elementu iframe poprzedzoną ciągiem @.

@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 b.com jest obsługiwane, ale w c.com nie jest.

Pamiętaj, że ten 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 wsparciem input[autocomplete="one-time-code"]. W Safari, gdy tylko dotrze SMS z kodem jednorazowym w formacie powiązanym z pochodzącym z połączeniem, klawiatura zasugeruje wprowadzenie kodu OTP 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ż pomoże nam ulepszyć interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim myślisz.

Zasoby

Zdjęcie: rupixen.com z Unsplash