What Are the Key Limitations and Implications of Using Opaque Responses in JavaScript and as Page Resources?

Understanding the Limitations of Opaque Responses in JavaScript and As Page Resources

As part of the Fetch API, opaque responses represent the results of requests made to remote origins without Cross-Origin Resource Sharing (CORS) enabled. While opaque responses offer a level of security, they also bring about limitations and potential issues.

Access to Headers and Body

One crucial limitation of opaque responses is the restricted access to their headers and body content. Unlike regular responses, which provide access to properties such as headers and the Body interface, opaque responses are intentional black-box entities. This means developers cannot retrieve information like content-type or status codes.

Use as Page Resources

Despite their limitations, opaque responses can be used as page resources under specific conditions. They are valid options for elements such as script tags, stylesheets, various media elements, and objects. However, they are not supported for resources like fonts. By referring to relevant specifications, developers can determine the eligibility of opaque responses for particular resource types.

Cache Storage API and Opaque Responses

When working with the Cache Storage API, a subtle caveat arises with opaque responses. Due to their status code always defaulting to 0, regardless of request results, opaque responses are prone to rejection by the API's add() and addAll() methods. This rejection occurs when responses have a status code outside the 2XX range. To circumvent this issue, developers can explicitly fetch the opaque response and manually put it into the cache using the put() method. However, it's important to be aware of the potential risks associated with caching opaque responses that may have resulted from server errors.

Storage Quota and navigator.storage API

To prevent cross-domain information leakage, browsers add significant padding to the size of opaque responses when calculating storage quota limits and reporting usage through the navigator.storage API. In Google Chrome, each cached opaque response contributes a minimum of approximately 7 megabytes to the reported storage usage. This aspect is essential to consider when determining the number of opaque responses to cache to avoid exceeding storage quota limitations prematurely.

The above is the detailed content of What Are the Key Limitations and Implications of Using Opaque Responses in JavaScript and as Page Resources?. For more information, please follow other related articles on the PHP Chinese website!