いまさらながら Same Origin Policy を理解する
CORSについて勉強していて、前提知識の部分で不足を感じました。
そのなかでSame Origin Policyやブラウザの挙動についての理解の必要性を感じてこの記事を書くに至りました！
■Origin とは
まず、Origin という言葉を改めて整理しておく。
Origin とは Schema, Host, Port を合体させたもの
Origin = Schema + Host + Port
この2つは Host 違うので異なる Origin
| URL | Scheme | Host | Port |
|---|---|---|---|
| https://jisya.example | https | jisya.example | 443 |
| https://warumono.example | https | warumono.example | 443 |
この2つは Origin が同じなので同一 Origin
| URL | Scheme | Host | Port | Path |
|---|---|---|---|---|
| https://jisya.example/users | https | jisya.example | 443 | /users |
| https://jisya.example/posts | https | jisya.example | 443 | /posts |
■Same Origin Policy とは
Same Origin Policy は、ある Origin で読み込まれたリソース（HTML, スクリプト, Cookie など）が、異なる Origin サーバへのリクエストを制限する、ブラウザが持つセキュリティ機能のこと。
Same Origin: Origin が同じであること
Cross Origin: 反対に Origin が異なること
Same Origin Policy のルール内
Origin が同じなので OK
Same Origin Policy のルール違反
Origin が異なるので NG
◎もし Same Origin Policy がなかったら
こんな状況を想定してみる
- https://jisya.example: 自社の社員のみアクセス可能な、社内ネットワークにある
- https://warumono.example: 誰でもアクセスできる、悪意ある攻撃者のサイト
攻撃者によって自社サイトっぽくみせたサイトhttps://warumono.exampleがブラウザがあるとする。
Same Origin Policy がなかったら、攻撃者から自社情報へのアクセスが簡単に成功してしまう。
◎Origin が異なる場合でもリクエストが行われないわけではない
異なる Origin へのリクエストをするとき、
Same Origin Policy でブロックされたとしてもリクエストが行われないわけではないのです。
ここを勘違いしないように注意が必要です。
CORS という仕組みを説明するうえでこの挙動を理解しておくことが重要になります。
○リクエスト送信は完了し、ブラウザがレスポンスを受けたときにエラーを起こす
①リクエストは正常に送信される
②レスポンスを受けてブラウザがエラーを起こす
リクエストを受けたサーバ: https://jisya.example/はレスポンスを返します。
そして、レスポンスを受けたブラウザ側でエラーが発生するのです。
■異なる Origin 間でもリクエストを許容したい場合がある
しかし、異なる Origin 間でもエラーを起こさずにレスポンスを共有したい場合があると思います。
例えば、子会社サイト https://kogaisya.example からは自社情報にアクセスさせたい場合など
◎Same Origin Policy の制限を受けないケースも存在する
- <img>タグのsrc属性で読み込んだ画像
- <link>タグのhref属性で読み込んだ CSS
- <script>タグのsrc属性で読み込んだ JavaScript
- <form>タグの action 属性で設定した送信先 URL
- <video>, <audio> タグのsrc属性で読み込んだマルチメディアファイル
- <iframe>, <frame> タグのsrc属性での別サイトコンテンツの読み込み
- X-Frame-Options の設定によっては読み込みがブロックされます
- JavaScript を用いて iframe 内のドキュメントにアクセスすることはできません
◎CORS によって一部のサイトには制限を緩和する
しかし、上記以外のケースに対応したい場合もあります。
そのようなシチュエーションに対応するために、
CORS(Cross-Origin Resource Sharing)という仕組みがあります。
詳細は長くなるので割愛。
■さいごに
CORSやPreflight Requestに関してこちらの記事で詳しく書いているので、ぜひ読んでください！
参考資料
Discussion