Pop-up suddivisi: un nuovo approccio ai popup web nella prova per sviluppatori

Natalia Markoborodova

A partire da Chrome 132, gli sviluppatori possono partecipare a una prova per sviluppatori per un nuovo approccio ai popup web: i popup partizionati. Questa prova per sviluppatori è disponibile solo per computer e la funzionalità non è ancora disponibile su Android.

Un pop-in partizionatoè un nuovo tipo di popup progettato per interazioni di breve durata, come accessi o conferme rapide. Carica i contenuti web con due funzionalità uniche:

• Spazio di archiviazione partizionato per opener
• Un'interfaccia utente simile a una modale

Perché abbiamo bisogno di pop-in partizionati?

I popup partizionati sono progettati per mantenere le proprietà di privacy di un iframe partizionato e le proprietà di sicurezza dei popup.

Man mano che sempre più utenti attivano la navigazione senza cookie di terze parti, i flussi che si basano sull'archiviazione dei dati in un popup per il recupero in un contesto di terze parti in un secondo momento (ad esempio, per mantenere la sessione utente tra i siti) potrebbero essere interrotti. I pop-in partizionati mirano a risolvere questo problema.

Come funzionano i pop-in partizionati?

Lo spazio di archiviazione di ogni pop-in partizionato è partizionato per il relativo opener. Il partizionamento dello spazio di archiviazione limita l'accesso ai dati cross-site, riducendo i rischi di monitoraggio e gli attacchi di iniezione di script. Scopri come funziona il partizionamento dello spazio di archiviazione nella nostra documentazione.

Prendi in considerazione un sito web opener.example che incorpora contenuti da third-party.example. Per visualizzare contenuti personalizzati su opener.example, l'utente deve accedere su third-party.example. Quando i cookie di terze parti vengono bloccati nel browser dell'utente, il flusso popup corrente è il seguente:

1. L'utente fa clic su un pulsante di accesso.
2. Si apre una finestra di dialogo.
3. L'utente accede dal contesto di primo livello di third-party.example e viene scritto un cookie di autenticazione non partizionato.
4. I contenuti di third-party.example incorporati in opener.example non hanno accesso ai propri cookie di primo livello scritti su third-party.example quando sono stati presentati in un contesto proprietario. Ciò accade perché il cookie di autenticazione non è partizionato ed è quindi un cookie di terze parti.

L'archiviazione di un pop-in partizionato è partizionata per l'apertura. In questo modo, i passaggi 3-4 dei flussi vengono modificati:

1. L'utente accede dal contesto di primo livello di third-party.example. Poiché è aperto in un pop-in partizionato, lo spazio di archiviazione è partizionato in base a opener.example.

2. I contenuti third-party.example incorporati in opener.example hanno accesso al proprio cookie impostato nel pop-in, poiché condividono lo stesso spazio di archiviazione partizionato.

Interfaccia utente simile a una finestra modale rispetto alla scheda di apertura

I popup partizionati hanno lo scopo di aiutare l'utente a capire che l'apertura e il popup sono correlati:

• Quando l'utente passa a un'altra scheda, il pop-in diventa automaticamente invisibile e inaccessibile, proprio come una finestra modale è visibile solo quando la scheda di apertura è attiva.
• Quando l'utente torna alla scheda di apertura, il pop-in viene visualizzato di nuovo.
• L'utente non può apportare modifiche nella barra degli indirizzi del browser del popup.

Prova

Chrome 132 introduce una prova per sviluppatori per la funzionalità Partitioned Popins. Ciò significa che la funzionalità sarà disponibile dietro un flag. Ecco come puoi provare i pop-in partizionati:

1. Assicurati di utilizzare Chrome 132 o versioni successive.
2. Vai a chrome://flags#partitioned-popins e attiva il flag della funzionalità.
3. Riavvia Chrome.
4. Prova la nostra demo.

Utilizzare i popup partizionati sul tuo sito web

Per utilizzare un pop-in partizionato sul tuo sito web, chiama il metodo window.open() con il parametro popin passato:

window.open("third-party-popin.example", "_blank", "popin");

Condividi il tuo feedback

Stiamo esplorando i popup partizionati e cercando feedback degli sviluppatori. Ecco alcuni potenziali scenari di casi d'uso:

• Flusso di autenticazione utente. Se hai implementato un flusso di autenticazione personalizzato e l'autenticazione avviene su un dominio diverso da quello del tuo sito (ad esempio, gli utenti di site.example accedono su auth-site.example), prova ad aprire la pagina di autenticazione in un pop-in per utilizzare il cookie di sessione nella pagina di apertura.
• Contenuti incorporati. Prova i pop-in partizionati per visualizzare contenuti aggiuntivi da un widget di terze parti, ad esempio una finestra di dialogo delle impostazioni, un'immagine o un PDF (o altri contenuti che di solito vengono caricati in un popup), visualizzati in una finestra più grande. In questo caso, i popup partizionati mirano a conservare lo stato della sessione utente tra il widget di terze parti e il tuo sito.

Se hai uno di questi scenari nelle tue soluzioni, hai in mente altri casi d'uso o vuoi contribuire a plasmare il futuro di questa funzionalità, provala e facci sapere:

• Hai riscontrato problemi?
• Hai suggerimenti per migliorare l'esperienza utente?
• Hai suggerimenti per una migliore UI? Nello specifico, ritieni che la UI indichi chiaramente che l'apertura e il pop-in sono correlati?
• Quanto ritieni che sia utile questa funzionalità?
• Esistono altri casi d'uso per cui vorresti utilizzare i popup partizionati?

Invia una segnalazione su GitHub per condividere le tue opinioni.