javascript - script - ¿Qué limitaciones se aplican a las respuestas opacas?

script tag module

Question

Las respuestas opacas se definen como parte de la API Fetch y representan el resultado de una solicitud realizada a un origen remoto cuando CORS no está habilitado.

¿Qué limitaciones prácticas y "trampas" existen en torno a cómo se pueden usar respuestas opacas, tanto desde JavaScript como como recursos en una página?

Answer 1

Acceso a encabezados / cuerpo de respuestas opacas

La limitación más directa en torno a las respuestas opacas es que no puede recuperar información significativa de la mayoría de las properties de la clase Response , como los headers , o llamar a los diversos methods que conforman la interfaz Body , como json() o text() . Esto está en consonancia con la naturaleza de caja negra de una respuesta opaca.

Uso de respuestas opacas como recursos en una página

Las respuestas opacas se pueden usar como un recurso en una página web siempre que el navegador permita que se use un recurso de origen cruzado que no sea CORS. Aquí hay un subconjunto de elementos para los cuales los recursos de origen cruzado que no son CORS, y por lo tanto respuestas opacas, son válidos, adaptados de la documentación de la Red de Desarrolladores de Mozilla :

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

Un caso de uso notable para el que las respuestas opacas no son válidas es para los recursos de fuentes .

En general, para determinar si puede usar una respuesta opaca como un tipo particular de recurso en una página, verifique las especificaciones relevantes. Por ejemplo, la especificación HTML explica que las respuestas de origen cruzado que no son CORS (es decir, opacas) se pueden usar para elementos <script> , aunque con algunas limitaciones para evitar la filtración de información de error.

Respuestas opacas y la API de almacenamiento en caché

Una "trampa" con la que el desarrollador podría encontrarse con respuestas opacas implica usarlas con la API de almacenamiento en caché . Dos piezas de información de fondo son relevantes:

• La propiedad de status de una respuesta opaca siempre se establece en 0 , independientemente de si la solicitud original tuvo éxito o no.
• Los métodos add() / addAll() API de almacenamiento en caché rechazarán si las respuestas resultantes de cualquiera de las solicitudes tienen un código de estado que no está en el rango 2XX .

A partir de esos dos puntos, se deduce que si la solicitud realizada como parte de la llamada add() / addAll() da como resultado una respuesta opaca, no se agregará al caché.

Puede solucionar esto ejecutando explícitamente fetch() y luego llamando al método put() con la respuesta opaca. Al hacerlo, está optando efectivamente por el riesgo de que la respuesta que está almacenando en la memoria caché haya sido un error devuelto por su servidor.

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

Respuestas opacas y la API navigator.storage

Para evitar fugas de información entre dominios, se agrega un relleno significativo al tamaño de una respuesta opaca utilizada para calcular los límites de cuota de almacenamiento (es decir, si se QuotaExceeded una excepción QuotaExceeded ) y lo informa la API navigator.storage .

Los detalles de este relleno varían de un navegador a otro, pero para Google Chrome, esto significa que el tamaño mínimo que cualquier respuesta opaca en caché contribuye al uso general de almacenamiento es de aproximadamente 7 megabytes . Debe tener esto en cuenta al determinar cuántas respuestas opacas desea almacenar en caché, ya que podría exceder fácilmente las limitaciones de la cuota de almacenamiento mucho antes de lo que esperaría de acuerdo con el tamaño real de los recursos opacos.