Proteggi le interazioni popup con le proprietà di limitazione

Ottieni l'isolamento multiorigine e la protezione dalle fughe tra siti durante l'interazione con i popup.

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

È disponibile un nuovo valore per Cross-Origin Opener Policy (COOP): restrict-properties. Offre vantaggi in termini di sicurezza e semplifica l'adozione dell'isolamento cross-origin, consentendo al contempo al tuo sito di interagire con popup di terze parti per pagamenti, autenticazione o altri casi d'uso.

Per iniziare a sperimentare con restrict-properties, partecipa alla prova dell'origine a partire da Chrome 116.

Perché utilizzare restrict-properties

restrict-properties ha due casi d'uso principali:

Evitare fughe di dati tra siti senza interruzioni

Per impostazione predefinita, qualsiasi sito web può aprire la tua applicazione in un popup e ottenere un riferimento.

Un sito web dannoso può sfruttare questa capacità a proprio vantaggio per eseguire attacchi come fuga di dati tra siti. Per ridurre questo rischio, puoi utilizzare l'intestazione Cross-Origin-Opener-Policy (COOP).

Fino a oggi, le opzioni per Cross-Origin-Opener-Policy erano limitate. Puoi:

  • Imposta same-origin,, che blocca tutte le interazioni cross-origin con i popup.
  • Imposta same-origin-allow-popups, che blocca tutte le interazioni tra origini che aprono il tuo sito in un popup.
  • Imposta unsafe-none, che consente tutte le interazioni cross-origin con i popup.

Di conseguenza, non era possibile applicare la COOP ai siti web che devono essere aperti in un popup e interagire con la pagina di apertura. In questo modo, i casi d'uso chiave, come il Single Sign-On e i pagamenti, non erano protetti da fughe di dati tra siti.

Cross-Origin-Opener-Policy: restrict-properties risolve il problema.

Con restrict-properties, le proprietà utilizzabili per il conteggio dei frame e altri attacchi di fuga tra siti non sono disponibili, ma è consentita la comunicazione di base tra Windows tramite postMessage e closed.

In questo modo, la sicurezza di un sito viene migliorata mantenendo i casi d'uso principali. Ad esempio:

  • Se offri un servizio in un popup, l'impostazione Cross-Origin-Opener-Policy: restrict-properties ti proteggerà da una serie di attacchi di fuga di dati tra siti. Puoi comunque aprire tutte le pagine che potevi aprire in precedenza.
  • Se devi accedere a un popup cross-origin, l'impostazione Cross-Origin-Opener-Policy: restrict-properties proteggerà allo stesso modo il tuo sito dal conteggio degli iframe. Potrai aprire lo stesso insieme di popup che puoi aprire oggi.
  • Se sia l'apertura sia la pagina aperta impostano l'intestazione e le pagine sono di origini diverse, il comportamento è simile a quello in cui è stata impostata l'intestazione da una delle due pagine. Se sono della stessa origine, viene concesso l'accesso completo.

Rendere il sito con isolamento multiorigine

Perché abbiamo bisogno dell'isolamento multiorigine

Alcune API web aumentano il rischio di attacchi lato canale come Spectre. Per attenuare questo rischio, i browser offrono un ambiente isolato basato su attivazione chiamato isolamento multiorigine. Con uno stato di isolamento cross-origin, la pagina web può utilizzare funzionalità privilegiate, tra cui SharedArrayBuffer, performance.measureUserAgentSpecificMemory() e timer ad alta precisione con una risoluzione migliore, isolando al contempo l'origine dalle altre, a meno che non siano attivate.

Fino a questo momento, per utilizzare queste API era necessario impostare Cross-Origin-Opener-Policy: same-origin. Tuttavia, questo potrebbe interrompere qualsiasi flusso popup cross-origin di cui potresti avere bisogno, ad esempio l'accesso singolo e i pagamenti.

Ora è possibile utilizzare Cross-Origin-Opener-Policy: restrict-properties anziché Cross-Origin-Opener-Policy: same-origin per attivare l'isolamento multiorigine. Invece di interrompere la relazione con l'opener, la limita al sottoinsieme di comunicazione minimo di window.postMessage() e window.closed.

Potrai abilitare l'isolamento multiorigine con le seguenti due intestazioni:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

o

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Scopri di più su credentialless in Carica risorse cross-origin senza intestazioni CORP utilizzando COEP: credentialless.

Demo

Prova varie opzioni di intestazione in questa demo di isolamento cross-origin.

Sperimenta con la prova dell'origine

Per sperimentare con Cross-Origin-Opener-Policy: restrict-properties, attiva la prova dell'origine.

Supporto browser

Cross-Origin-Opener-Policy: restrict-properties è attualmente supportato solo in Chrome. Altri browser sono attivamente coinvolti nella discussione per la standardizzazione.

Domande frequenti

Il mio sito web deve comunicare con popup della stessa origine. Devo utilizzare COOP: restrict-properties per attivare l'isolamento multiorigine?

L'impostazione di COOP: restrict-properties sia nel popup sia nella pagina principale non causerà limitazioni. Se lo imposti solo sul popup o solo sulla pagina principale, impedirai qualsiasi accesso a proprietà diverse da postMessage e closed nel browser di apertura, anche se sono della stessa origine.

L'insieme di proprietà consentite è corretto?

In base ai feedback ricevuti finora, si sospetta che window.postMessage e window.closed siano sufficienti per la maggior parte dei flussi di lavoro, ma stiamo ancora valutando la possibilità di aprirli ad altre proprietà. Se un caso d'uso non può essere risolto utilizzando solo postMessage e closed lascia un feedback nel thread Intent to Experiments.

Risorse