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

불투명 한 응답 은 Fetch API의 일부로 정의되며 CORS 가 활성화되지 않은 경우 원격 오리진에 대한 요청의 결과를 나타냅니다 .

자바 스크립트와 페이지의 리소스 모두에서 불투명 한 응답을 사용할 수있는 방법과 관련하여 어떤 실질적인 제한과 "고장난"이 존재합니까?

불투명 한 응답의 헤더 / 본문에 대한 액세스

불투명 응답 주위에 가장 직접적인 제한을 사용하면 대부분에서 의미있는 정보를 다시 얻을 수 있다는 것입니다 속성 의 Response클래스 등이 headers, 또는 다양한 호출 방법 위로하기 Body와 같은 인터페이스를 json()또는 text(). 이것은 불투명 한 응답의 블랙 박스 특성과 일치합니다.

페이지의 리소스로 불투명 응답 사용

브라우저가 비 CORS 교차 출처 리소스를 사용할 수 있도록 허용 할 때마다 불투명 응답을 웹 페이지의 리소스로 사용할 수 있습니다. 다음은 비 CORS 교차 출처 리소스와 불투명 한 응답이 유효한 요소의 하위 집합이며 Mozilla 개발자 네트워크 문서에서 조정 한 것입니다 .

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

불투명 한 응답이 유효 하지 않은 주목할만한 사용 사례 는 글꼴 리소스 입니다.

일반적으로 페이지에서 특정 유형의 리소스로 불투명 응답을 사용할 수 있는지 여부를 확인하려면 관련 사양을 확인하세요. 예를 들어, HTML 사양 은 비 CORS 교차 출처 (즉, 불투명) 응답을 <script>요소에 사용할 수 있다고 설명 하지만 오류 정보 유출을 방지하기위한 몇 가지 제한 사항이 있습니다.

불투명 한 응답 및 캐시 저장소 API

개발자 가 불투명 한 응답에 부딪 힐 수있는 한 가지 "문제" 는 Cache Storage API 와 함께 사용하는 것입니다 . 두 가지 배경 정보가 관련됩니다.

• status불투명 응답 의 속성은 원래 요청이 성공했는지 실패했는지에 관계없이 항상로 설정됩니다0 .
• Cache Storage API의 add()/ addAll()메소드는 요청의 결과로 인한 응답이 2XX 범위에 있지 않은 상태 코드를 갖는 경우 모두 거부합니다 .

이 두 지점에서 add()/ addAll()호출의 일부로 수행 된 요청 이 불투명 한 응답을 생성하면 캐시에 추가되지 않습니다.

a를 명시 적으로 수행 한 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.storageAPI에서 보고 합니다 .

이 패딩의 세부 정보는 브라우저마다 다르지만 Chrome의 경우 캐시 된 단일 불투명 응답이 전체 저장소 사용량에 기여 하는 최소 크기는 약 7MB 입니다. 불투명 한 리소스의 실제 크기를 기준으로 예상했던 것보다 훨씬 빨리 스토리지 할당량 제한을 쉽게 초과 할 수 있으므로 캐시 할 불투명 응답 수를 결정할 때이 점을 염두에 두어야합니다.