불투명 한 응답에는 어떤 제한이 적용됩니까?

Question

Opaque responses은 Fetch API의 일부로 정의되며 CORS이 활성화되지 않은 경우 원격 원점에 대한 요청의 결과를 나타냅니다.

JavaScript 및 페이지의 자원 모두에서 불투명 한 응답을 사용할 수있는 실제적인 한계 및 "문제"가 존재합니까? 불투명 응답 '헤더에

Answer 1

액세스/바디

불투명 응답 주위에 가장 직접적인 제한은 headers처럼, 다시 Response 클래스의 properties의 대부분에서 의미있는 정보를 얻을, 또는 여러 가지를 호출 할 수 있다는 것입니다 또는 text()과 같이 Body 인터페이스를 구성하는 methods입니다. 이는 불투명 한 응답의 블랙 박스 특성과 일치합니다. 크로스 원산지 자원이 사용하는 브라우저가 허용 할 때마다

불투명 응답이 웹 페이지의 자원으로 사용할 수있는 페이지의 자료로 불투명 응답을 사용하여

. 여기 Mozilla Developer Network documentation 각색 출처 간 자원 및 그 불투명 응답이 유효하는 요소의 서브 세트가있다 :

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

불투명 한 응답이 이 아니고이 유효하지 않은 유익한 사용 예는 font resources입니다.

일반적으로 페이지에서 특정 유형의 자원으로 불투명 한 응답을 사용할 수 있는지 여부를 판별하려면 관련 사양을 확인하십시오. 예를 들어, 누출 오류 정보를 방지하기 위해 몇 가지 제한이 있지만 <script> 요소에 대해 교차 원점 (즉, 불투명) 응답 인 HTML specification explains을 사용할 수 있습니다.

불투명 응답 & 캐시 스토리지 API

한 "잡았다"불투명 한 응답을 가진 개발자 might run into는 Cache Storage API로를 사용하여 포함 것이다. 배경 정보의 두 조각과 관련된 :

• 불투명 한 응답의 status 특성에 관계없이 원래 요청 성공 또는 실패 여부에 always set to 0입니다.
• Cache Storage API의 add()/addAll() 메소드는 요청의 응답으로 인해 2XX range에없는 상태 코드가 있으면 거부됩니다.이들 두 점에서

, 요청 불투명 응답하여 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)); 

불투명 응답 & navigator.storage의 API 도메인 간 정보의 누설을 방지하기 위해

(상당한 패딩 저장 용량의 한계를 계산하기 위해 사용되는, 불투명 한 응답의 크기에 첨가 거기 즉 QuotaExceeded 예외가 발생했는지 여부)를보고 navigator.storage API에 의해보고됩니다. 이 패딩의

세부 사항은 브라우저 브라우저에서 다양하지만, 구글 크롬, 이것은 단일 캐시 불투명 응답이 전체 스토리지 사용에 기여하는 최소 크기가 approximately 7 megabytes 있음을 의미합니다. 캐시하려는 불투명 한 응답의 수를 결정할 때는이 점을 명심해야합니다. 실제 불투명 한 자원의 크기에 따라 예상보다 훨씬 빨리 스토리지 할당량 제한을 쉽게 초과 할 수 있기 때문입니다.