Sommige formulieren bevatten velden in iframes, wat problemen veroorzaakt bij het automatisch invullen van de browser. Met shared-autofill kan het bovenliggende frame de betrouwbaarheid van cross-origin iframes aangeven, wat een betere automatische invulling voor de gebruiker mogelijk maakt.
Er is een voorstel beschikbaar om automatisch invullen in een cross-origin iframe mogelijk te maken. Met deze functie kan een bovenliggend frame de frames aanwijzen waarvan de velden automatisch ingevuld moeten kunnen worden. Dit is met name handig voor betaalformulieren, waar het heel gebruikelijk is dat gevoelige velden (voor PCI DSS- naleving) worden geladen vanuit een externe bron, zoals een betalingsdienstaanbieder (PSP).
In het volgende voorbeeld staan de naam van de kaarthouder en de vervaldatum op de hoofdpagina (of het hoofdframe), maar het creditcardnummer en de verificatiecode staan 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:
Voor handelaren combineert dit ontwerp veiligheid en flexibiliteit:
- De cross-origin iframes isoleren de gevoelige betalingsgegevens van de infrastructuur van de handelaar, wat helpt bij de naleving van PCI DSS .
- Formuliervelden in verschillende kaders kunnen worden gerangschikt en gestyled zodat ze passen bij de uitstraling van de website van de handelaar.
Vanuit browserperspectief betekent dit dat er veelvoorkomende en legitieme use cases zijn voor multiframeformulieren, wat vragen oproept over het beveiligingsmodel voor formulieren. Voor gebruikers kunnen multiframeformulieren leiden tot een slechte autofill-ervaring, zoals in het volgende voorbeeld:
Het beleid van dezelfde oorsprong vormt een solide basis voor automatisch invullen in meerdere frames, maar biedt de browser niet voldoende nauwkeurigheid om onderscheid te maken tussen vertrouwde en niet-vertrouwde frames voor automatisch invullen.
Om de automatische invulling te verbeteren en tegelijkertijd de veiligheid van gebruikersgegevens te waarborgen, werkt het Chrome-team aan een voorstel waarmee automatisch invullen in een cross-origin iframe mogelijk wordt. Als het formulier wordt gewijzigd naar shared-autofill, vult Chrome het creditcardnummer succesvol cross-origin 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 autofill-ervaring voor de gebruiker:
Probeer gedeelde autofill lokaal
U kunt gedeeld automatisch invullen testen voor één gebruiker in Chrome 93.0.4577.0 en hoger op desktop en mobiel door vlaggen in te stellen via de opdrachtregel .
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Detectiefunctie-ondersteuning
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 nu?
Shared-autofill is een eerste voorstel om een functie voor automatisch invullen toe te voegen aan het machtigingsbeleid . Het Chrome-team werkt momenteel samen met andere browserleveranciers om het voorstel te laten beoordelen. Verdere voorstellen om de gebruikerservaring voor automatisch invullen in iframes te verbeteren, worden ook besproken.
We blijven updates geven naarmate we verder komen met dit voorstel. Neem in de tussentijd contact met ons op als u een betaalpagina heeft waar de gevoelige <input>-velden (creditcardnummer, cvc) van een externe provider zijn ingesloten. We horen graag of shared-autofill over iframes de automatische invulervaring van uw gebruikers tijdens het afrekenproces kan verbeteren.
Meer informatie
- Huidig voorstel
- W3C TAG-beoordeling
- Voorbeeld van een betalingsformulier dat in dit bericht wordt gebruikt
- Wat zijn Chrome-vlaggen?
Foto door Jessica Ruscello op Unsplash .