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 Response
classe, comme headers
, ou appeler les différentes méthodes qui composent l' Body
interface, 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
status
proprié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'});
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 QuotaExceeded
exception est levée) et signalée par l' navigator.storage
API .
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.