Какие ограничения применяются к непрозрачным ответам?

Question

Непрозрачные ответы определяются как часть Fetch API и представляют собой результат запроса к удаленному источнику, когда CORS не включен.

Какие практические ограничения и "ошибки" существуют в отношении того, как можно использовать непрозрачные ответы как из JavaScript, так и в качестве ресурсов на странице?

Answer 1

Доступ к заголовкам / телу непрозрачных ответов

Самым простым ограничением непрозрачных ответов является то, что вы не можете получить значимую информацию из большинства свойств Response класс, как headers или вызовите различные методы, которые составляют Body интерфейс, как json() или же text(), Это соответствует черному ящику непрозрачного ответа.

Использование непрозрачных ответов в качестве ресурсов на странице

Непрозрачные ответы можно использовать в качестве ресурса на веб-странице всякий раз, когда браузер разрешает использовать ресурс, не связанный с CORS. Вот подмножество элементов, для которых допустимы ресурсы, не относящиеся к CORS, и непрозрачные ответы, адаптированные из документации Mozilla Developer Network:

• <script>
• <link rel="stylesheet">
• <img>, <video>, а также <audio>
• <object> а также <embed>
• <iframe>

Известный вариант использования, для которого непрозрачные ответы недопустимы, относится к ресурсам шрифтов.

В общем, чтобы определить, можете ли вы использовать непрозрачный ответ в качестве ресурса определенного типа на странице, проверьте соответствующую спецификацию. Например, спецификация HTML объясняет, что не связанные с CORS ответы (то есть непрозрачные) могут использоваться для <script> элементы, хотя и с некоторыми ограничениями для предотвращения утечки информации об ошибках.

Непрозрачные ответы и Cache Storage API

Одна хитрость, с которой разработчик может столкнуться с непрозрачными ответами, заключается в использовании их с Cache Storage API. Уместны две части справочной информации:

• status свойство непрозрачного ответа всегда имеет значение 0 независимо от того, был ли исходный запрос успешным или нет.
• API Cache Storage add() / addAll() оба метода будут отклонять, если ответы, полученные в результате какого-либо из запросов, имеют код состояния, который не находится в диапазоне 2XX.

Из этих двух пунктов следует, что если запрос выполняется как часть add() / addAll() вызов вызывает непрозрачный ответ, он не будет добавлен в кэш.

Вы можете обойти это, явно выполнив fetch() а затем позвонив put() метод с непрозрачным ответом. Тем самым вы эффективно включаете риск того, что ответ, который вы кэшируете, мог быть ошибкой, возвращенной вашим сервером.

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

Непрозрачные ответы и API navigator.storage

Чтобы избежать утечки междоменной информации, к размеру непрозрачного ответа, используемого для расчета пределов квоты хранилища, добавлено значительное заполнение (т.е. QuotaExceeded исключение) и сообщается navigator.storage API.

Подробная информация об этом заполнении варьируется от браузера к браузеру, но для Google Chrome это означает, что минимальный размер, который любой непрозрачный отклик в кэше вносит в общее использование памяти, составляет приблизительно 7 мегабайт. Об этом следует помнить при определении количества непрозрачных ответов, которые вы хотите кэшировать, поскольку вы можете легко превысить ограничения квоты хранилища намного раньше, чем вы ожидаете, исходя из фактического размера непрозрачных ресурсов.