Alcuni moduli hanno campi in iframe, il che causa problemi di compilazione automatica del browser. Con la compilazione automatica condivisa, il frame principale può designare l'affidabilità degli iframe cross-origin per supportare un'esperienza di compilazione automatica migliore per l'utente.
È disponibile per i test una proposta per consentire la compilazione automatica in un iframe cross-origin. Con questa funzionalità, un frame principale può designare i frame i cui campi devono essere compilati automaticamente. Questo è particolarmente utile per i moduli di pagamento, in cui è molto comune che i campi sensibili (per la conformità al PCI DSS) vengano caricati da un'origine di terze parti, come un fornitore di servizi di pagamento (PSP).
Nell'esempio seguente, il nome del titolare della carta e la data di scadenza si trovano nella pagina di primo livello (o frame principale), ma il numero della carta di credito e il codice di verifica si trovano 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 mostra la struttura del modulo:
Per i commercianti, questo design combina sicurezza e flessibilità:
- Gli iframe cross-origin isolano i dati di pagamento sensibili dall'infrastruttura del commerciante, il che contribuisce alla conformità allo standard PCI DSS.
- I campi dei moduli in frame diversi possono essere disposti e formattati in modo da rispecchiare il look and feel del sito web del commerciante.
Dal punto di vista del browser, ciò significa che esistono casi d'uso comuni e legittimi per i moduli con più frame, il che solleva domande sul modello di sicurezza per i moduli. Per gli utenti, i moduli con più frame possono portare a un'esperienza di compilazione automatica scadente, come nell'esempio seguente:
Il criterio di origine stessa è una base di riferimento solida per il completamento automatico tra i frame, ma non fornisce una granularità sufficiente per consentire al browser di distinguere i frame attendibili da quelli non attendibili per il completamento automatico.
Per offrire un'esperienza di compilazione automatica migliore, garantendo al contempo la sicurezza dei dati utente, il team di Chrome sta lavorando a una proposta che consenta la compilazione automatica in un iframe cross-origin. Se il modulo viene modificato in modo da utilizzare la compilazione automatica condivisa, Chrome compila correttamente il numero della carta di credito tra origini:
<!-- 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ò comportare un'esperienza di compilazione automatica migliore per l'utente:
Prova la compilazione automatica condivisa localmente
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
Rileva il supporto delle funzionalità
Utilizza il seguente codice 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 delle autorizzazioni. Il team di Chrome sta attualmente collaborando con altri fornitori di browser per far esaminare la proposta. Sono in discussione anche altre proposte su come migliorare l'esperienza utente per la compilazione automatica negli iframe.
Continueremo a fornire aggiornamenti man mano che avanziamo con questa proposta. Nel frattempo, se hai una pagina di pagamento in cui i campi sensibili <input> (numero di carta di credito, CVV) sono incorporati da un fornitore di terze parti, contattaci. Ci farebbe molto piacere sapere se la compilazione automatica condivisa tra gli iframe potrebbe potenzialmente migliorare l'esperienza di compilazione automatica dei tuoi utenti durante la procedura di pagamento.
Scopri di più
- Proposta attuale
- Revisione del TAG del W3C
- Esempio di modulo di pagamento utilizzato in questo post
- Che cosa sono i flag di Chrome?
Foto di Jessica Ruscello su Unsplash.