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

Niektóre formularze zawierają pola w elementach iframe, co powoduje problemy z autouzupełnianiem w przeglądarce. W przypadku współdzielonego autouzupełniania ramka nadrzędna może wskazywać wiarygodność elementów iframe z innych domen, aby ułatwić użytkownikowi korzystanie z autouzupełniania.

Propozycja zezwolenia na autouzupełnianie w międzyźródłowym elemencie iframe jest dostępna do testów. Dzięki tej funkcji ramka nadrzędna może wskazywać ramki, których pola mają być uzupełniane automatycznie. Jest to szczególnie przydatne w przypadku formularzy płatności, gdy pola wrażliwe (na potrzeby zgodności z PCI DSS) często są ładowane z zewnętrznych źródeł, takich jak dostawca usług płatniczych (PSP).

W poniższym przykładzie imię i nazwisko posiadacza karty oraz data ważności znajdują się na stronie najwyższego poziomu (lub w głównej ramce), ale numer karty kredytowej i kod weryfikacyjny są umieszczone w ramkach iframe od 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>

Poniższy diagram przedstawia strukturę formularza:

Z punktu widzenia sprzedawców ten interfejs łączy w sobie bezpieczeństwo i elastyczność:

• Elementy iframe z innych domen izolują wrażliwe dane płatności od infrastruktury sprzedawcy, co zwiększa zgodność z PCI DSS.
• Pola formularzy w różnych ramkach można rozmieścić i dopasować do wyglądu i stylu witryny sprzedawcy.

Z perspektywy przeglądarki oznacza to, że istnieją typowe i dopuszczalne przypadki użycia formularzy wieloramkowych, co rodzi wątpliwości dotyczące modelu zabezpieczeń formularzy. W przypadku użytkowników formularze z wieloma klatkami mogą źle wpływać na działanie autouzupełniania, jak w przykładzie:

Zasada tej samej domeny stanowi solidny punkt odniesienia dla autouzupełniania w ramkach, ale nie zapewnia wystarczającej szczegółowości, aby przeglądarka mogła rozróżnić zaufane i niezaufane ramki na potrzeby autouzupełniania.

Aby usprawnić autouzupełnianie, a jednocześnie zapewnić bezpieczeństwo danych użytkownika, zespół Chrome pracuje nad ofertą umożliwiającą autouzupełnianie w elementach iframe z innych domen. Jeśli formularz zostanie zmieniony tak, aby korzystać z autouzupełniania, Chrome uzupełni numer karty kredytowej z innej domeny:

<!-- 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>

Poprawi to komfort autouzupełniania użytkowników:

Wypróbuj współdzielone dane autouzupełniania lokalnie

Możesz przetestować współdzielone autouzupełnianie dla jednego użytkownika w Chrome 93.0.4577.0 lub nowszym na komputerze i urządzeniu mobilnym, ustawiając flagi w wierszu poleceń.

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

Wykrywanie obsługi funkcji

Aby sprawdzić, czy właściwość shared-autofill jest dostępna, 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 wstępna propozycja dodania funkcji autouzupełniania do zasad uprawnień. Zespół Chrome współpracuje obecnie z innymi dostawcami przeglądarek, aby sprawdzić tę ofertę. Dyskutujemy również nad kolejnymi propozycjami poprawy komfortu autouzupełniania w elementach iframe.

Będziemy informować Cię o postępach w sprawie tej propozycji. Jeśli masz stronę płatności, na której są umieszczone poufne pola <input> (numer karty kredytowej, cvc), skontaktuj się z nami. Chętnie się dowiemy, czy wspólne autouzupełnianie w elementach iframe mogłoby poprawić wrażenia użytkowników podczas autouzupełniania podczas płatności.

Więcej informacji

• Bieżąca oferta pakietowa
• Ocena W3C TAG
• Przykładowy formularz płatności użyty w tym poście
• Czym są flagi Chrome?

---

Zdjęcie: Jessica Ruscello, strona Unsplash.