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

Einige Formulare enthalten Felder in iFrames, was zu Problemen bei der automatischen Vervollständigung im Browser führt. Mit der gemeinsamen AutoFill-Funktion kann der übergeordnete Frame die Vertrauenswürdigkeit von ursprungsübergreifenden iFrames festlegen, um die AutoFill-Funktion für den Nutzer zu verbessern.

Dominik Mengelt
Sam Dutton

Ein Vorschlag, das automatische Ausfüllen in einem ursprungsübergreifenden iFrame zu ermöglichen, ist zum Testen verfügbar. Mit dieser Funktion kann ein übergeordneter Frame die Frames festlegen, deren Felder automatisch ausgefüllt werden sollen. Das ist besonders für Zahlungsformulare nützlich, bei denen sensible Felder (zur PCI DSS-Compliance) häufig von einem Drittanbieterursprung wie einem Zahlungsdienstleister (PSP) geladen werden.

Im folgenden Beispiel befinden sich der Name des Karteninhabers und das Ablaufdatum auf der Seite der obersten Ebene (oder im Hauptframe), die Kreditkartennummer und der Sicherheitscode jedoch in iFrames eines Zahlungsdienstleisters.

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

Baumdiagramm, das zeigt, wie sich verschiedene Felder in verschiedenen Frames in einem Zahlungsformular befinden

Für Händler bietet dieses Design eine Kombination aus Sicherheit und Flexibilität:

  • Die ursprungsübergreifenden iFrames isolieren die sensiblen Zahlungsdaten von der Infrastruktur des Händlers, was die Einhaltung von PCI DSS erleichtert.
  • Formularfelder in verschiedenen Frames können so angeordnet und gestaltet werden, dass sie dem Erscheinungsbild der Händlerwebsite entsprechen.

Aus Browsersicht bedeutet das, dass es gängige und legitime Anwendungsfälle für mehrteilige Formulare gibt, was Fragen zum Sicherheitsmodell für Formulare aufwirft. Für Nutzer können mehrteilige Formulare zu einer schlechten Autofill-Erfahrung führen, wie im folgenden Beispiel:

Die Richtlinie für denselben Ursprung ist eine solide Grundlage für das automatische Ausfüllen über Frames hinweg, bietet jedoch nicht genügend Granularität, damit der Browser zwischen vertrauenswürdigen und nicht vertrauenswürdigen Frames für das automatische Ausfüllen unterscheiden kann.

Um das automatische Ausfüllen zu verbessern und gleichzeitig die Sicherheit der Nutzerdaten zu gewährleisten, arbeitet das Chrome-Team an einem Vorschlag, der das automatische Ausfüllen in einem ursprungsübergreifenden iFrame ermöglicht. Wenn das Formular so geändert wird, dass es „shared-autofill“ verwendet, füllt Chrome die Kreditkartennummer erfolgreich 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 zu einer besseren Autofill-Funktion für den Nutzer führen:

Gemeinsames Autofill lokal testen

Sie können die gemeinsame Autofill-Funktion für einen einzelnen Nutzer in Chrome 93.0.4577.0 und höher auf dem Computer und auf Mobilgeräten testen, indem Sie Flags über die Befehlszeile festlegen.

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

Funktionsunterstützung erkennen

Verwenden Sie den folgenden Code, um zu erkennen, 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

Shared-Autofill 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 werden Sie weiterhin auf dem Laufenden halten, wenn wir Fortschritte bei diesem Vorschlag machen. Wenn Sie in der Zwischenzeit eine Checkout-Seite 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, wenn Sie uns mitteilen, ob die gemeinsame automatische Vervollständigung über iFrames hinweg die automatische Vervollständigung für Ihre Nutzer während des Bezahlvorgangs verbessern könnte.

Weitere Informationen

Foto von Jessica Ruscello auf Unsplash.