同一オリジン ポリシーとフェッチ リクエスト

Mariko Kosaka

この Codelab では、リソースを取得するときの同一オリジンの動作を確認します。

デモは https://same-origin-policy-fetch.glitch.me でホストされています。 このシンプルなウェブページでは、fetch を使用して https://same-origin-policy-fetch.glitch.me/fetch.html からリソースを読み込みます。index.htmlfetch.html は同じオリジンを共有しているため、ライブ プレビューに 200 が表示されます。

1. 別のオリジンからページを取得

取得 URL を https://www.google.com に変更してみてください。 ライブ プレビューには何が表示されますか?

リソースをリクエストしたため、ブラウザが取得リクエストをブロックしているはずです 取得されます。つまり、攻撃者がクロスオリジン ユーザーのブラウザを制御している場合でも、すべてのリソースにアクセスできます。

2. クロスオリジン リソースを取得する

取得 URL を https://api.thecatapi.com/v1/images/search に変更してみてください。 ライブ プレビューには何が表示されますか?

取得 URL が別のオリジンですが、ステータス コード 200 が表示されています。なぜですか? 最新のウェブ アプリケーションは、読み込みのためにクロスオリジン リソースをリクエストすることが多い API エンドポイントにクエリを実行できますこのようなユースケースに対応するため CORS(クロスオリジン リソース シェアリング)と呼ばれるメカニズムがあり、 クロスオリジン リソースの読み込みが許可されていることをブラウザに通知します。CORS の詳細については、クロスオリジン リソースを安全に共有するをご覧ください。