Compilazione automatica condivisa negli iframe: una proposta iniziale

Alcuni moduli presentano campi in iframe e questo causa problemi per la compilazione automatica del browser. Con la compilazione automatica condivisa, il frame principale può indicare l'affidabilità degli iframe multiorigine per supportare una migliore esperienza di compilazione automatica per l'utente.

Dominik Mengelt
Dominik Mengelt
Twitter GitHub Mastodon
[Nome di persona]

È disponibile per i test una proposta per consentire la compilazione automatica in un iframe multiorigine. Con questa funzionalità, un frame principale può designare i frame i cui campi devono essere compilabili automaticamente. Questa funzionalità è particolarmente utile per le forme di pagamento, dove è molto comune il caricamento di campi sensibili (per la conformità allo PCI DSS) da un'origine di terze parti, ad esempio un fornitore di servizi di pagamento (PSP).

Nell'esempio seguente, il nome e la data di scadenza del titolare della carta si trovano nella pagina di primo livello (o nel frame principale), mentre il numero della carta di credito e il codice di verifica sono inseriti negli iframe di un 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>

Il seguente diagramma rappresenta la struttura del modulo:

Diagramma ad albero che mostra come i diversi campi si trovano in frame diversi di un modulo di pagamento

Per i commercianti, questo design combina sicurezza e flessibilità:

  • Gli iframe multiorigine isolano i dati di pagamento sensibili dall'infrastruttura del commerciante, aiutando così la conformità a PCI DSS.
  • I campi del modulo in frame diversi possono essere disposti e definiti in base all'aspetto e al design del sito web del commerciante.

Dal punto di vista del browser, questo significa che esistono casi d'uso comuni e legittimi per i moduli multi-frame, che sollevano domande sul modello di sicurezza per i moduli. Per gli utenti, i moduli multiframe possono compromettere l'esperienza di compilazione automatica, come nell'esempio seguente:

Il criterio della stessa origine è una solida base di riferimento per la compilazione automatica tra i frame, ma non fornisce al browser una granularità sufficiente per distinguere tra frame attendibili e non attendibili per la compilazione automatica.

Per consentire una migliore esperienza di compilazione automatica mantenendo al contempo la sicurezza dei dati utente, il team di Chrome sta lavorando a una proposta che consenta il riempimento automatico in un iframe multiorigine. Se il modulo viene modificato in modo da utilizzare la compilazione automatica condivisa, Chrome compila correttamente il numero della carta di credito multiorigine:

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

Ciò può migliorare l'esperienza di compilazione automatica per l'utente:

Prova la compilazione automatica condivisa in locale

Puoi testare la compilazione automatica condivisa per un singolo utente in Chrome 93.0.4577.0 e versioni successive su computer e dispositivi mobili impostando i flag dalla riga di comando.

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

Supporto delle funzionalità di rilevamento

Usa il codice seguente per rilevare se la proprietà shared-autofill è disponibile:

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

Passaggi successivi

La compilazione automatica condivisa è una proposta iniziale per aggiungere una funzionalità di compilazione automatica ai criteri di autorizzazione. Il team di Chrome sta attualmente collaborando con altri fornitori di browser per far esaminare la proposta. Vengono inoltre trattate ulteriori proposte su come migliorare l'esperienza utente per il riempimento automatico negli iframe.

Continueremo a fornire aggiornamenti man mano che procediamo con questa proposta. Nel frattempo, se hai una pagina di pagamento in cui i campi sensibili <input> (numero della carta di credito, cvc) sono incorporati da un fornitore di terze parti, contattaci. Ci piacerebbe sapere se la compilazione automatica condivisa tra iframe può potenzialmente migliorare l'esperienza di compilazione automatica dei tuoi utenti durante la procedura di pagamento.

Scopri di più

Foto di Jessica Ruscello su Unsplash.