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