Những giới hạn nào áp dụng cho các câu trả lời không rõ ràng?

Opaque responses are defined as part of the Fetch API, and represent the result of a request made to a remote origin when CORS is not enabled.

What practical limitations and "gotchas" exist around how opaque responses can be used, both from JavaScript and as resources on a page?

Access to Opaque Responses' Headers / Body

Hạn chế đơn giản nhất xung quanh các phản hồi không rõ ràng là bạn không thể lấy lại thông tin có ý nghĩa từ hầu hết các thuộc tính của Responselớp, như headershoặc gọi các phương thức khác nhau tạo nên Bodygiao diện, như json()hoặc text(). Điều này phù hợp với bản chất hộp đen của một phản hồi không trong suốt.

Sử dụng câu trả lời mờ làm tài nguyên trên trang

Các câu trả lời không rõ ràng có thể được sử dụng làm tài nguyên trên trang web bất cứ khi nào trình duyệt cho phép sử dụng tài nguyên có nguồn gốc chéo không phải CORS. Dưới đây là một tập hợp con các phần tử mà các tài nguyên nguồn gốc chéo không phải CORS và cho các phản hồi không rõ ràng, là hợp lệ, được điều chỉnh từ tài liệu của Mạng nhà phát triển Mozilla :

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

Một trường hợp sử dụng đáng chú ý mà các phản hồi không rõ ràng không hợp lệ là đối với tài nguyên phông chữ .

In general, to determine whether you can use an opaque response as a particular type of resource on a page, check the relevant specification. For example, the HTML specification explains that non-CORS cross-origin (i.e. opaque) responses can be used for <script> elements, though with some limitations to prevent leaking error information.

Opaque Responses & the Cache Storage API

One "gotcha" that developer might run into with opaque responses involves using them with the Cache Storage API. Two pieces of background information are relevant:

• The status property of an opaque response is always set to 0, regardless of whether the original request succeeded or failed.
• The Cache Storage API's add()/addAll() methods will both reject if the responses resulting from any of the requests have a status code that isn't in the 2XX range.

From those two points, it follows that if the request performed as part of the add()/addAll() call results in an opaque response, it will fail to be added to the cache.

You can work around this by explicitly performing a fetch() and then calling the put() method with the opaque response. By doing so, you're effectively opting-in to the risk that the response you're caching might have been an error returned by your server.

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 & the navigator.storage API

In order to avoid leakage of cross-domain information, there's significant padding added to the size of an opaque response used for calculating storage quota limits (i.e. whether a QuotaExceeded exception is thrown) and reported by the navigator.storage API.

The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. You should keep this in mind when determining how many opaque responses you want to cache, since you could easily exceeded storage quota limitations much sooner than you'd otherwise expect based on the actual size of the opaque resources.