Quelles limites s'appliquent aux réponses opaques?

Les réponses opaques sont définies dans le cadre de l' API Fetch et représentent le résultat d'une demande adressée à une origine distante lorsque CORS n'est pas activé.

Quelles sont les limites pratiques et les «pièges» concernant la façon dont les réponses opaques peuvent être utilisées, à la fois à partir de JavaScript et en tant que ressources sur une page?

Accès aux en-têtes / corps des réponses opaques

La limitation la plus simple des réponses opaques est que vous ne pouvez pas récupérer d'informations significatives à partir de la plupart des propriétés de la Responseclasse, comme headers, ou appeler les différentes méthodes qui composent l' Bodyinterface, comme json()ou text(). Ceci est conforme à la nature de boîte noire d'une réponse opaque.

Utilisation de réponses opaques comme ressources sur une page

Les réponses opaques peuvent être utilisées comme ressource sur une page Web chaque fois que le navigateur autorise l'utilisation d'une ressource d'origine croisée non CORS. Voici un sous-ensemble d'éléments pour lesquels les ressources d'origine croisée non CORS, et donc les réponses opaques, sont valides, adaptés de la documentation du Mozilla Developer Network :

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

Un cas d'utilisation notable pour lequel les réponses opaques ne sont pas valides concerne les ressources de polices .

En général, pour déterminer si vous pouvez utiliser une réponse opaque comme type particulier de ressource sur une page, vérifiez la spécification appropriée. Par exemple, la spécification HTML explique que les réponses d'origine croisée non CORS (c'est-à-dire opaques) peuvent être utilisées pour les <script>éléments, mais avec certaines limitations pour éviter les fuites d'informations d'erreur.

Réponses opaques et API de stockage de cache

Un "piège" que le développeur pourrait rencontrer avec des réponses opaques consiste à les utiliser avec l' API Cache Storage . Deux informations générales sont pertinentes:

• La statuspropriété d'une réponse opaque est toujours définie sur0 , que la demande d'origine ait réussi ou échoué.
• Les méthodes add()/ de l'API Cache Storage addAll()rejetteront toutes les deux si les réponses résultant de l'une des demandes ont un code d'état qui n'est pas dans la plage 2XX .

De ces deux points, il s'ensuit que si la requête effectuée dans le cadre de l' appel add()/ addAll()entraîne une réponse opaque, elle ne pourra pas être ajoutée au cache.

Vous pouvez contourner ce problème en exécutant explicitement un fetch(), puis en appelant la put()méthode avec la réponse opaque. Ce faisant, vous acceptez efficacement le risque que la réponse que vous mettez en cache soit une erreur renvoyée par votre serveur.

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));

Réponses opaques et l'API navigator.storage

Afin d'éviter les fuites d'informations inter-domaines, un remplissage important a été ajouté à la taille d'une réponse opaque utilisée pour calculer les limites de quota de stockage (c'est-à-dire si une QuotaExceededexception est levée) et signalée par l' navigator.storageAPI .

Les détails de ce remplissage varient d'un navigateur à l'autre, mais pour Google Chrome, cela signifie que la taille minimale que toute réponse opaque mise en cache unique contribue à l'utilisation globale du stockage est d' environ 7 mégaoctets . Vous devez garder cela à l'esprit lorsque vous déterminez le nombre de réponses opaques que vous souhaitez mettre en cache, car vous pourriez facilement dépasser les limites de quota de stockage beaucoup plus tôt que prévu en fonction de la taille réelle des ressources opaques.