不透明な応答にはどのような制限がありますか？

Question

Opaque responsesはFetch APIの一部として定義され、CORSが有効になっていない場合にリモート起点に対する要求の結果を表します。

JavaScriptやページのリソースの両方から、どのように不透明なレスポンスを使用できるかについては、実際上の制限や「問題」がありますか？

Answer 1

不透明な応答ヘッダ/ボディへのアクセス

不透明応答周りの最も直接的な制限は、あなたがheadersのように、バックResponseクラスのpropertiesのほとんどから意味のある情報を入手、または様々なを呼び出すことはできませんということですまたはtext()のようにBodyインターフェイスを構成するmethodsです。これは、不透明な応答のブラックボックスの性質に沿っています。クロスオリジンリソースを使用するために、ブラウザが許すたび

不透明な応答は、Webページ上のリソースとして使用することができます上のリソースとして不透明な応答を使用

。ここでのクロスオリジンリソース要素のサブセットだ、とその不透明なレスポンス、有効であり、Mozilla Developer Network documentationから適応：

• <script>
• <link rel="stylesheet">
• <img>、<video>、および<audio>
• <object>と<embed>

不透明な応答がではなく、が有効な有名なユースケースはfont resourcesです。

一般に、ページ上の特定のタイプのリソースとして不透明な応答を使用できるかどうかを判断するには、関連する仕様を確認してください。例えば、漏れたエラー情報を防止するためにいくつかの制限があるが、クロス・オリジン（すなわち不透明）応答であるHTML specification explainsを<script>要素に使用することができる。

不透明応答&キャッシュストレージAPI

不透明な応答を開発者might run intoがCache Storage APIでそれらを使用することを含むことを一つの「落とし穴」。背景情報2枚の関連する：

• 不透明応答の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によって報告されます。このパディングの

詳細は、ブラウザからブラウザに異なりますが、Google Chromeのために、これは、任意の単一のキャッシュされた不透明な応答は、全体的なストレージの使用率に寄与することを最小サイズはapproximately 7 megabytesであることを意味します。不透明なリソースの実際のサイズに基づいて予想されるよりはるかに早く、ストレージクォータの制限を簡単に超えてしまう可能性があるので、キャッシュする不透明なレスポンスの数を決定するときは、この点を念頭に置いてください。