Einige Formulare haben Felder in Iframes, was Probleme bei der automatischen Browserautofillung verursacht. Bei der gemeinsamen Autofill-Funktion kann der übergeordnete Frame die Vertrauenswürdigkeit von iframes verschiedener Herkunft festlegen, um die Autofill-Funktion für den Nutzer zu verbessern.
Ein Vorschlag zur Zulassung von Autofill in einem ursprungsübergreifenden iFrame steht zum Testen zur Verfügung. Mit dieser Funktion kann ein übergeordneter Frame die Frames angeben, deren Felder automatisch ausgefüllt werden sollen. Dies ist besonders nützlich für Zahlungsformulare, bei denen sensible Felder (zur Einhaltung der PCI DSS-Anforderungen) häufig von einem Drittanbieter wie einem Zahlungsdienstleister (Payment Service Provider, PSP) geladen werden.
Im folgenden Beispiel befinden sich der Name des Karteninhabers und das Ablaufdatum auf der obersten Seite (oder im Hauptframe), die Kreditkartennummer und der Bestätigungscode jedoch in Iframes von einem 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>
Das folgende Diagramm zeigt die Struktur des Formulars:
Für Händler bietet dieses Design Sicherheit und Flexibilität:
- Die cross-origin-Iframes isolieren die sensiblen Zahlungsdaten von der Infrastruktur des Händlers, was die Einhaltung der PCI-DSS-Anforderungen unterstützt.
- Formularfelder in verschiedenen Frames können so angeordnet und formatiert werden, dass sie zum Erscheinungsbild der Händlerwebsite passen.
Aus Sicht des Browsers bedeutet das, dass es gängige und legitime Anwendungsfälle für Formulare mit mehreren Frames gibt. Das wirft Fragen zum Sicherheitsmodell für Formulare auf. Für Nutzer können Formulare mit mehreren Frames zu einer schlechten Autofill-Funktion führen, wie im folgenden Beispiel:
Die Richtlinie für denselben Ursprung ist eine solide Grundlage für das automatische Ausfüllen in Frames, bietet dem Browser jedoch nicht genügend Details, um zwischen vertrauenswürdigen und nicht vertrauenswürdigen Frames für das automatische Ausfüllen zu unterscheiden.
Um die Funktion „Autofill“ zu verbessern und gleichzeitig die Sicherheit der Nutzerdaten zu wahren, arbeitet das Chrome-Team an einem Vorschlag, der das automatische Ausfüllen in einem plattformübergreifenden iframe ermöglicht. Wenn das Formular so geändert wird, dass „shared-autofill“ verwendet wird, füllt Chrome die Kreditkartennummer plattformübergreifend aus:
<!-- 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>
Dies kann zu einer besseren Autofill-Funktion für Nutzer führen:
Gemeinsame Autofill-Funktion lokal testen
Sie können die gemeinsame Autofill-Funktion für einen einzelnen Nutzer in Chrome 93.0.4577.0 und höher auf Computern und Mobilgeräten testen, indem Sie Flags über die Befehlszeile festlegen.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Funktionsunterstützung erkennen
Mit dem folgenden Code kannst du prüfen, ob die shared-autofill-Property verfügbar ist:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Nächste Schritte
Die gemeinsame Autofill-Funktion ist ein erster Vorschlag, der Berechtigungsrichtlinie eine Autofill-Funktion hinzuzufügen. Das Chrome-Team arbeitet derzeit mit anderen Browseranbietern zusammen, um den Vorschlag prüfen zu lassen. Weitere Vorschläge zur Verbesserung der Nutzerfreundlichkeit für das automatische Ausfüllen in Iframes werden derzeit diskutiert.
Wir halten Sie auf dem Laufenden, sobald es Neuigkeiten zu diesem Vorschlag gibt. Wenn Sie in der Zwischenzeit eine Zahlungsseite haben, auf der die vertraulichen <input>-Felder (Kreditkartennummer, CVV) von einem Drittanbieter eingebettet sind, wenden Sie sich bitte an uns. Wir würden gerne wissen, ob die gemeinsame Autofill-Funktion über Iframes die Autofill-Funktion für Ihre Nutzer während des Bezahlvorgangs verbessern könnte.
Weitere Informationen
- Aktueller Vorschlag
- W3C TAG-Überprüfung
- In diesem Beitrag verwendetes Beispiel für ein Zahlungsformular
- Was sind Chrome-Flags?
Foto von Jessica Ruscello bei Unsplash.