Gedeeld automatisch aanvullen over iframes: een eerste voorstel

Sommige formulieren hebben velden in iframes, wat problemen veroorzaakt bij het automatisch invullen van de browser. Met gedeeld automatisch aanvullen kan het bovenliggende frame de betrouwbaarheid van cross-origin iframes aangeven, om een ​​betere ervaring met automatisch aanvullen voor de gebruiker te ondersteunen.

Dominik Mengelt
Sam Dutton

Er is een voorstel beschikbaar om automatisch aanvullen in een cross-origin iframe toe te staan. Met deze functie kan een ouderframe de frames aanwijzen waarvan de velden automatisch moeten worden ingevuld. Dit is met name handig voor betalingsformulieren, waarbij het heel gebruikelijk is dat gevoelige velden (voor PCI DSS- compliance) worden geladen vanaf een derde partij, zoals een betalingsdienstaanbieder (PSP).

In het volgende voorbeeld staan ​​de naam en de vervaldatum van de kaarthouder op de bovenste pagina (of het hoofdframe), maar staan ​​het creditcardnummer en de verificatiecode in iframes van een PSP.

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

Het volgende diagram geeft de structuur van het formulier weer:

Boomdiagram dat laat zien hoe verschillende velden zich in verschillende frames in een betalingsformulier bevinden

Voor handelaars combineert dit ontwerp veiligheid en flexibiliteit:

  • De cross-origin iframes isoleren de gevoelige betalingsgegevens van de infrastructuur van de handelaar, wat helpt bij PCI DSS- compliance.
  • Formuliervelden in verschillende frames kunnen worden gerangschikt en opgemaakt zodat ze passen bij het uiterlijk van de website van de verkoper.

Vanuit browserperspectief betekent dit dat er algemene en legitieme gebruiksscenario's zijn voor formulieren met meerdere frames, wat vragen oproept over het beveiligingsmodel voor formulieren. Voor gebruikers kunnen formulieren met meerdere frames leiden tot een slechte ervaring met automatisch aanvullen, zoals in het volgende voorbeeld:

Het beleid van dezelfde oorsprong is een solide basis voor het automatisch aanvullen van frames, maar biedt onvoldoende granulariteit voor de browser om onderscheid te maken tussen vertrouwde en niet-vertrouwde frames voor automatisch aanvullen.

Om een ​​betere ervaring voor automatisch aanvullen mogelijk te maken en tegelijkertijd de veiligheid van gebruikersgegevens te behouden, werkt het Chrome-team aan een voorstel dat automatisch aanvullen in een cross-origin iframe mogelijk maakt. Als het formulier wordt gewijzigd om gedeeld automatisch aanvullen te gebruiken, vult Chrome het creditcardnummer cross-origineel in:

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

Dit kan resulteren in een betere ervaring voor automatisch aanvullen voor de gebruiker:

Probeer gedeeld automatisch aanvullen lokaal

U kunt gedeeld automatisch aanvullen testen voor één gebruiker in Chrome 93.0.4577.0 en hoger op desktop en mobiel door vlaggen in te stellen vanaf de opdrachtregel .

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

Functie-ondersteuning detecteren

Gebruik de volgende code om te detecteren of de eigenschap shared-autofill beschikbaar is:

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

Wat is het volgende?

Gedeeld automatisch aanvullen is een eerste voorstel om een ​​functie voor automatisch aanvullen toe te voegen aan het machtigingsbeleid . Het Chrome-team werkt momenteel samen met andere browserleveranciers om het voorstel te laten beoordelen. Verdere voorstellen over hoe de gebruikerservaring voor automatisch aanvullen in iframes kan worden verbeterd, worden ook besproken.

We zullen updates blijven geven naarmate we vooruitgang boeken met dit voorstel. Als u in de tussentijd een betaalpagina heeft waar de gevoelige <input>-velden (creditcardnummer, cvc) zijn ingesloten van een externe provider, neem dan contact met ons op . We horen graag of gedeeld automatisch aanvullen in iframes de ervaring met automatisch aanvullen van uw gebruikers tijdens het afrekenproces mogelijk kan verbeteren.

Meer informatie

Foto door Jessica Ruscello op Unsplash .