javascript - What limitations apply to opaque responses? -

opaque responses defined part of fetch api, , represent result of request made remote origin when cors not enabled.

what practical limitations , "gotchas" exist around how opaque responses can used, both javascript , resources on page?

access opaque responses' headers / body

the straightforward limitation around opaque responses cannot meaningful information of properties of response class, headers, or call various methods make body interface, json() or text(). in keeping black-box nature of opaque response.

using opaque responses resources on page

opaque responses can used resource on web page whenever browser allows cross-origin resource used. here's subset of elements cross-origin resources, , therefor opaque responses, valid, adapted mozilla developer network documentation:

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

a notable use case opaque responses not valid font resources.

in general, determine whether can use opaque response particular type of resource on page, check relevant specification. example, html specification explains cross-origin (i.e. opaque) responses can used <script> elements, though limitations prevent leaking error information.

opaque responses & cache storage api

one "gotcha" developer might run into opaque responses involves using them cache storage api. 2 pieces of background information relevant:

• the status property of opaque response always set 0, regardless of whether original request succeeded or failed.
• the cache storage api's add()/addall() methods both reject if responses resulting of requests have status code isn't in 2xx range.

from 2 points, follows if request performed part of add()/addall() call results in opaque response, fail added cache.

you can work around explicitly performing fetch() , calling put() method opaque response. doing so, you're opting-in risk response you're caching might have been error returned server.

const request = new request('https://third-party-no-cors.com/', {mode: 'no-cors'}); // assume `cache` open instance of cache class. fetch(request).then(response => cache.put(request, response));