web-dev-qa-db-fra.com

Quelles limitations s'appliquent aux réponses opaques?

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

Quelles sont les limitations pratiques et les "pièges" concernant la manière dont les réponses opaques peuvent être utilisées, à la fois en JavaScript et en tant que ressources sur une page?

javascriptcorsservice-workerfetch-api
55
Jeff Posnick

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

La limitation la plus simple concernant les réponses opaques est que vous ne pouvez pas obtenir d'informations significatives de la plupart des propriétés de la classe Response, comme headers =, ou appelez les différentes méthodes qui constituent l'interface Body, comme json() ou text() . Cela correspond à la nature de boîte noire d’une réponse opaque.

Utilisation des réponses opaques comme ressources sur une page

Les réponses opaques peuvent être utilisées en tant que ressources sur une page Web lorsque le navigateur permet l'utilisation d'une ressource d'origine non-CORS différente. Voici un sous-ensemble d'éléments pour lesquels les ressources croisées d'origine non-CORS et les réponses opaques sont valides, adapté de la documentation de 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 est pour ressources de police .

En général, pour déterminer si vous pouvez utiliser une réponse opaque en tant que type de ressource particulier sur une page, vérifiez la spécification correspondante. Par exemple, la spécification HTML explique que les réponses non d'origine CORS (opaque) peuvent être utilisées pour les éléments <script>, Avec toutefois certaines limitations pour éviter les fuites d'informations d'erreur.

Réponses opaques et l'API de stockage de cache

Un "gotcha" que développeur peut rencontrer avec des réponses opaques implique de les utiliser avec le API de stockage en cache . Deux informations de base sont pertinentes:

  • La propriété status d'une réponse opaque est toujours définie sur 0 , que la requête d'origine ait abouti ou échoué.
  • Les méthodes add() / addAll() de la API de stockage en mémoire cache seront rejetées si les réponses résultant de l'une des demandes ont un code d'état isn 't dans la gamme 2XX .

De ces deux points, il s'ensuit que si la demande effectuée dans le cadre de l'appel add()/addAll() entraîne une réponse opaque, son ajout au cache échouera.

Vous pouvez contourner ce problème en effectuant explicitement un fetch(), puis en appelant la méthode put() avec la réponse opaque. Ce faisant, vous vous engagez effectivement dans le risque que la réponse que vous mettez en cache ait pu être 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));

Opaque Responses & l'API navigator.storage

Afin d’éviter les fuites d’informations entre 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.-à-d. Si une exception QuotaExceeded est levée) et signalée par le navigator.storage API .

Les détails de ce remplissage varient d’un navigateur à l’autre, mais pour Google Chrome, cela signifie que la taille minimum que toute réponse opaque mise en cache contribue à l’utilisation globale du stockage est environ 7 mégaoctets . Gardez 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.

93
Jeff Posnick