Gemeinsame Autofill-Funktion für iFrames: ein erster Vorschlag

Einige Formulare enthalten Felder in iFrames, was zu Problemen beim automatischen Ausfüllen des Browsers führt. Mit gemeinsam genutztem Autofill kann der übergeordnete Frame die Vertrauenswürdigkeit von ursprungsübergreifenden iFrames kennzeichnen, um eine bessere Autofill-Erfahrung für den Nutzer zu ermöglichen.

Dominik Mengelt
Dominik Mengelt
Twitter GitHub Mastodon
Dutton

Zu Testzwecken steht ein Vorschlag zur Aktivierung der Autofill-Funktion in einem ursprungsübergreifenden iFrame zur Verfügung. Mit dieser Funktion kann ein übergeordneter Frame die Frames festlegen, deren Felder automatisch ausgefüllt werden sollen. Das ist besonders nützlich für Zahlungsformulare, bei denen es sehr üblich ist, dass sensible Felder (für die PCI-DSS-Compliance) von einem Drittanbieter wie einem Zahlungsdienstleister geladen werden.

Im folgenden Beispiel befinden sich der Name und das Ablaufdatum des Karteninhabers auf der obersten Seite (oder im Hauptframe), die Kreditkartennummer und der Bestätigungscode befinden sich jedoch in iFrames eines 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 stellt die Struktur des Formulars dar:

Baumdiagramm, das zeigt, wie verschiedene Felder in verschiedenen Frames eines Zahlungsformulars sind

Für Händler kombiniert dieses Design Sicherheit und Flexibilität:

  • Die ursprungsübergreifenden iFrames isolieren die vertraulichen Zahlungsdaten von der Infrastruktur des Händlers, was die PCI DSS-Compliance unterstützt.
  • Formularfelder in verschiedenen Frames können so angeordnet und gestaltet werden, dass sie zum Design der Händlerwebsite passen.

Aus Browserperspektive bedeutet dies, dass es gängige und legitime Anwendungsfälle für Multiframe-Formulare gibt, was Fragen zum Sicherheitsmodell für Formulare aufwirft. Für Nutzer können Multiframe-Formulare 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 über mehrere Frames hinweg, bietet jedoch nicht den erforderlichen Detaillierungsgrad für den Browser, um zwischen vertrauenswürdigen und nicht vertrauenswürdigen Frames für das automatische Ausfüllen zu unterscheiden.

Das Chrome-Team arbeitet an einem Vorschlag, der das automatische Ausfüllen in einen ursprungsübergreifenden iFrame zulässt, um die Funktion zum automatischen Ausfüllen zu verbessern und gleichzeitig die Sicherheit der Nutzerdaten zu wahren. Wenn für das Formular „Shared Autofill“ verwendet wird, füllt Chrome die Kreditkartennummer ursprungsü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>

Das kann die AutoFill-Funktion für die Nutzer verbessern:

Freigegebenes automatisches Ausfüllen lokal testen

Sie können das freigegebene Autofill 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 feststellen, ob das Attribut shared-autofill verfügbar ist:

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

Nächste Schritte

Das gemeinsame automatische Ausfüllen ist ein erster Vorschlag, der Berechtigungsrichtlinie eine AutoFill-Funktion hinzuzufügen. Das Chrome-Team arbeitet derzeit mit anderen Browseranbietern zusammen, um das Angebot prüfen zu lassen. Weitere Vorschläge zur Verbesserung der Nutzerfreundlichkeit für das automatische Ausfüllen über mehrere iFrames hinweg werden ebenfalls diskutiert.

Wir werden Sie über die Fortschritte in diesem Vorschlag auf dem Laufenden halten. Wenn Sie eine Zahlungsseite haben, auf der die vertraulichen <input>-Felder (Kreditkartennummer, CVC) von einem Drittanbieter eingebettet sind, wenden Sie sich bitte an uns. Wir würden uns freuen, zu hören, ob das gemeinsame Ausfüllen von Autofills in verschiedenen iFrames für die Nutzer während des Bezahlvorgangs mit AutoFill verbessert werden könnte.

Weitere Informationen

Foto von Jessica Ruscello auf Unsplash