この Codelab では、リソースを取得する際の同一オリジンの仕組みについて説明します。
設定: 同一オリジンからページを取得する
デモは https://same-origin-policy-fetch.glitch.me でホストされています。このシンプルなウェブページでは、fetch を使用して https://same-origin-policy-fetch.glitch.me/fetch.html からリソースを読み込みます。index.html と fetch.html は同じオリジンを共有しているため、ライブ プレビューに 200 が表示されます。
1. 別のオリジンからページを取得する
フェッチ URL を https://www.google.com に変更してみてください。ライブ プレビューには何が表示されますか？
別のオリジンからリソースをリクエストしたため、ブラウザはフェッチ リクエストをブロックしたはずです。つまり、攻撃者がユーザーのブラウザを制御しても、クロスオリジン リソースを読み取ることはできません。
2. クロスオリジン リソースを取得する
フェッチ URL を https://api.thecatapi.com/v1/images/search に変更してみてください。ライブ プレビューには何が表示されますか？
フェッチ URL は別のオリジンですが、ステータス コード 200 が表示されます。なぜでしょうか？ 最新のウェブ アプリケーションでは、サードパーティ スクリプトの読み込みや API エンドポイントへのクエリのために、クロスオリジン リソースをリクエストすることがよくあります。このようなユースケースに対応するため、CORS（クロスオリジン リソース シェアリング）と呼ばれるメカニズムがあり、クロスオリジン リソースの読み込みが許可されていることをブラウザに通知します。CORS の詳細については、クロスオリジン リソースを安全に共有するをご覧ください。