この 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 の詳細については、クロスオリジン リソースを安全に共有するをご覧ください。