Quali limitazioni si applicano alle risposte opache?

Le risposte opache sono definite come parte dell'API Fetch e rappresentano il risultato di una richiesta effettuata a un'origine remota quando CORS non è abilitato.

Quali limitazioni pratiche e "trucchi" esistono riguardo al modo in cui le risposte opache possono essere utilizzate, sia da JavaScript che come risorse su una pagina?

Accesso alle intestazioni / corpo delle risposte opache

La limitazione più diretta intorno alle risposte opache è che non puoi ottenere informazioni significative dalla maggior parte delle proprietà della Responseclasse, come headers, o chiamare i vari metodi che compongono l' Bodyinterfaccia, come json()o text(). Ciò è in linea con la natura della scatola nera di una risposta opaca.

Utilizzo di risposte opache come risorse in una pagina

Le risposte opache possono essere utilizzate come risorsa in una pagina Web ogni volta che il browser consente l'utilizzo di una risorsa cross-origin non CORS. Ecco un sottoinsieme di elementi per i quali sono valide le risorse cross-origin non CORS e quindi le risposte opache, adattato dalla documentazione di Mozilla Developer Network :

• <script>
• <link rel="stylesheet">
• <img>, <video>e<audio>
• <object> e <embed>
• <iframe>

Un caso d'uso notevole per il quale le risposte opache non sono valide è per le risorse dei caratteri .

In generale, per determinare se è possibile utilizzare una risposta opaca come un particolare tipo di risorsa su una pagina, controllare la specifica pertinente. Ad esempio, la specifica HTML spiega che le risposte cross-origin (cioè opache) non CORS possono essere utilizzate per gli <script>elementi, sebbene con alcune limitazioni per evitare la fuga di informazioni sugli errori.

Risposte opache e API di archiviazione cache

Un "trucco" in cui lo sviluppatore potrebbe imbattersi con risposte opache implica il loro utilizzo con l' API Cache Storage . Due informazioni di base sono rilevanti:

• La statusproprietà di una risposta opaca è sempre impostata su0 , indipendentemente dal fatto che la richiesta originale sia riuscita o meno.
• I metodi add()/ dell'API Cache Storage addAll()verranno rifiutati se le risposte risultanti da una qualsiasi delle richieste hanno un codice di stato che non è compreso nell'intervallo 2XX .

Da questi due punti, ne consegue che se la richiesta eseguita come parte della chiamata add()/ addAll()risulta in una risposta opaca, non verrà aggiunta alla cache.

Puoi aggirare questo problema eseguendo in modo esplicito a fetch()e quindi chiamando il put()metodo con la risposta opaca. In questo modo, stai effettivamente optando per il rischio che la risposta che stai memorizzando nella cache potrebbe essere un errore restituito dal tuo server.

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

Risposte opache e API navigator.storage

Al fine di evitare la fuga di informazioni tra domini, è stato aggiunto un riempimento significativo alla dimensione di una risposta opaca utilizzata per calcolare i limiti della quota di archiviazione (ovvero se QuotaExceededviene generata un'eccezione) e segnalata navigator.storagedall'API .

I dettagli di questo riempimento variano da browser a browser, ma per Google Chrome, ciò significa che la dimensione minima che ogni singola risposta opaca memorizzata nella cache contribuisce all'utilizzo complessivo dello spazio di archiviazione è di circa 7 megabyte . È necessario tenerlo presente quando si determina il numero di risposte opache che si desidera memorizzare nella cache, poiché è possibile superare facilmente i limiti della quota di archiviazione molto prima di quanto ci si aspetterebbe altrimenti in base alla dimensione effettiva delle risorse opache.