Udostępnione autouzupełnianie w elementach iframe: początkowa oferta pakietowa

Niektóre formularze mają pola w elementach iframe, co powoduje problemy z automatycznym wypełnianiem pól w przeglądarce. Dzięki udostępnianiu autouzupełniania ramka nadrzędna może określać wiarygodność iframe między domenami, aby zapewnić użytkownikom lepsze wrażenia podczas autouzupełniania.

Dominik Mengelt
Dominik Mengelt
X GitHub Mastodon
Sam Dutton

Proponujemy umożliwienie autouzupełniania w międzyźródłowych elementach iframe. Dzięki tej funkcji ramka nadrzędna może wyznaczać ramki, których pola mają być wypełniane automatycznie. Jest to szczególnie przydatne w przypadku formularzy płatności, w których polach poufnych (zgodnie z PCI DSS) często są ładowane dane pochodzące z źródła zewnętrznego, np. dostawcy usług płatniczych (PSP).

W tym przykładzie imię i nazwisko posiadacza karty oraz data ważności znajdują się na stronie najwyższego poziomu (lub w głównym iframe), ale numer karty kredytowej i kod weryfikacyjny są w iframe’ach z dostawcy usług płatniczych.

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

Ten diagram przedstawia strukturę formularza:

Schemat drzewa pokazujący, jak różne pola znajdują się w różnych ramkach w formularzu płatności

W przypadku sprzedawców rozwiązanie to łączy bezpieczeństwo z elastycznością:

  • Iframe między domenami izoluje poufne dane płatności od infrastruktury sprzedawcy, co ułatwia zgodność z PCI DSS.
  • Pola formularza w różnych ramkach można układać i stylizować tak, aby pasowały do wyglądu i wrażenia użytkownika witryny sprzedawcy.

Z perspektywy przeglądarki oznacza to, że istnieją typowe i uprawnione przypadki użycia formularzy wieloramkowych, co powoduje pytania o model bezpieczeństwa formularzy. W przypadku użytkowników formularze wieloramkowe mogą powodować problemy z automatycznym wypełnianiem, jak w tym przykładzie:

Zasada dotycząca tego samego pochodzenia to solidna podstawa do automatycznego wypełniania w ramkach, ale nie zapewnia wystarczającej szczegółowości, aby przeglądarka mogła rozróżnić zaufane i niezaufajne ramki na potrzeby automatycznego wypełniania.

Aby zapewnić lepsze autouzupełnianie przy jednoczesnym zachowaniu bezpieczeństwa danych użytkownika, zespół Chrome pracuje nad propozycją umożliwiającą autouzupełnianie w elementach iframe w innych domenach. Jeśli formularz zostanie zmieniony tak, aby używać autouzupełniania w ramach witryn, Chrome wypełni numer karty kredytowej w innej witrynie:

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

Dzięki temu użytkownicy mogą korzystać z autouzupełniania w bardziej komfortowy sposób:

Wypróbuj lokalnie autouzupełnianie udostępnione

Możesz przetestować udostępnione autouzupełnianie dla jednego użytkownika w Chrome 93.0.4577.0 lub nowszej wersji na komputerze i na urządzeniach mobilnych, ustawiając flagi na linii poleceń.

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

Wykrywanie obsługi funkcji

Aby sprawdzić, czy jest dostępna właściwość shared-autofill, użyj tego kodu:

if (document.featurePolicy && document.featurePolicy
      .features().includes('shared-autofill')) {
  console.log('shared-autofill available!');
}

Co dalej?

Udostępnione autouzupełnianie to początkowa propozycja dodania funkcji autouzupełniania do zasad dotyczących uprawnień. Zespół Chrome współpracuje obecnie z innymi dostawcami przeglądarek, aby zaproponowane rozwiązanie zostało sprawdzone. Rozważamy też dalsze propozycje dotyczące zwiększenia wygody użytkowników w przypadku autouzupełniania w ramkach iframe.

Będziemy na bieżąco informować o postępach w realizacji tej propozycji. Jeśli masz stronę płatności, na której są osadzone poufne pola <input> (numer karty kredytowej, kod CVC) od dostawcy zewnętrznego, skontaktuj się z nami. Chcielibyśmy się dowiedzieć, czy udostępnianie danych autouzupełniania w ramkach iframe może poprawić działanie autouzupełniania podczas procesu płatności.

Więcej informacji

Zdjęcie autorstwa Jessica Ruscello z Unsplash.