ミルクボーイがCORSを説明しました

はじめに

内海「どうもー ミルクボーイですー」
駒場「お願いしますー」

内海「あーありがとうございますぅー ねっ 今XSS攻撃をいただきましたけどもね」
駒場「こんなん なんぼあっても良いですからね」
内海「ねー あればあるだけ良いですからね　ほんとにね」

駒場「いきなりですけどね うちのオカンがね 好きなセキュリティに関する用語があるらしいんやけど」

内海「あっ そーなんや」
駒場「そのセキュリティに関する用語をちょっと忘れたらしくてね」
内海「好きなセキュリティに関する用語忘れてもうて どないなってんねんそれ」

駒場「でまあ色々聞くんやけどな 全然わからへんねんな」
内海「分からへんの？ ほな俺がね オカンの好きなセキュリティに関する用語 ちょっと一緒に考えてあげるから」
内海「どんな特徴ゆうてたかってのを教えてみてよー」

CORSとは

駒場「あのー Webブラウザ上で異なるオリジン間の安全なリソース共有を可能にする仕組みやって言うねんな」

内海「おー CORS(Cross-Origin Resource Sharing)やないかい」

内海「その特徴はもう完全にCORSやがな」

CORS(Cross-Origin Resource Sharing)

Webブラウザで実行されるアプリケーションが異なるオリジン（ドメイン、プロトコル、ポート）からリソースを安全に取得できるようにするための仕組みのこと。
これはセキュリティ上の制約である「同一オリジンポリシー」を緩和することを目的としている。

内海「すぐ分かったやん こんなんもー」
駒場「でもこれちょっとわからへんのやな」
内海「何が分からへんのよー」

同一オリジンポリシー

駒場「オカンが言うには 同一オリジンポリシーを完全に無効にするって言うねんな」

内海「あー ほなCORSと違うかぁ」

内海「同一オリジンポリシーを完全に無効にしてええ訳ないもんね」
駒場「そやねん」

同一オリジンポリシー

Webセキュリティの基本原則であり、一定の条件において異なるオリジンからのリソースへのアクセスを制限する仕組みのこと。
しかし、現代のWebアプリケーションでは、異なるオリジン間でのリソース共有が一般的であり、CORSがその機能をサポートします。

内海「CORSはね 同一オリジンポリシーの制約を緩和するだけなんやから」
駒場「そやねん」
内海「CORSを使って適切な許可設定を通じてセキュリティを担保しながら安全なリソース共有を可能にすんのよあれ」
駒場「そやねんそやねん」
内海「CORSってそういうもんやから ほなCORSちゃうがなこれ」
内海「あれほなもうちょっと詳しく教えてくれる？」

CORSが実行されるプロセス

駒場「オカンが言うには HTTPヘッダにOriginやAccess-Control-Allow-Originなどを使用して動作させるらしいねん」

内海「CORSやないかい」

内海「OriginやAccess-Control-Allow-OriginがCORS以外の目的で使われてるところ見たことないねんから」
駒場「そやねん」

CORSが実行されるプロセス

1. ブラウザは、リクエストにOriginを追加して、リクエスト元のオリジン情報をサーバーに送信します。
2. サーバーは、CORS設定に基づいて、リクエスト元のオリジンを許可するか判断します。
3. サーバーは、レスポンスにAccess-Control-Allow-Originを追加して、許可されたオリジンを指定します。
4. ブラウザは、レスポンスのAccess-Control-Allow-Originを確認して、リクエスト元のオリジンが許可されているか判断します。
   許可されていれば、レスポンスを利用できます。許可されていなければ、アクセスがブロックされます。

駒場「でも分からへんねん」
内海「何が分からへんのこれで」
駒場「俺もCORSやと思うてんけどな」

CORSが動作するブラウザ

駒場「オカンが言うには Internet Explorer 9でも完璧に動作するって言うねんな」

内海「ほなCORSちゃうやないかい」

内海「現代のほとんどの主要なブラウザでサポートされているけども Internet Explorer 9は古すぎて対応してるわけないんやから」
駒場「そやねん」

CORSが動作するブラウザ

Google Chrome: version4以降
Firefox: version3.5以降
Safari: version4以降
Microsoft Edge: すべてのversionでサポート
Internet Explorer: version10以降
古いブラウザの一部はCORSをサポートしていないか、部分的にしかサポートしていない場合があります。

内海「CORSはね W3Cによって2009年頃から策定が始まって、だいたい2010年頃にかけて主要なブラウザで徐々にサポートされるようになったんやから」
内海「正式にW3C勧告として承認されたのも2014年なのよ だからモダンなブラウザではサポートしてるけども古いブラウザでは動作しないんやから」
駒場「そやねんそやねん」
内海「CORSちゃうがな ほな もうちょっとなんか言ってなかった？」

シンプルリクエストとプリフライトリクエスト

駒場「オカンが言うには シンプルリクエストとプリフライトリクエストの2種類があるって言うねんな」

内海「CORSやないかい」

内海「CORSはね セキュリティ上のリスクが低い単純なリクエストと、リスクがあるリクエストを分けて制御してるんやから」
駒場「そやねん」

シンプルリクエスト

下記の条件を満たすHTTPリクエストでプリフライトリクエストを送信せずそのまま実行されるリクエストのこと。
CORSの仕様が書かれている「Fetch Standard」にて「CORS-safelisted」とみなされたHTTPメソッドやHTTPヘッダのみが送信されたリクエストのことを指します。

CORS-safelisted method

• GET
• HEAD
• POST

CORS-safelisted request-header

• Accept
• Accept-Language
• Content-Language
• Content-Type
  ただし値がapplication/x-www-form-urlencoded multipart/form-data text/plainのいずれか

プリフライトリクエスト

シンプルリクエストの条件を満たさないリクエストを送信する前に事前に問い合わせをするリクエストのこと。
PUTやDELETEといったサーバー内のリソースを変更・削除するようなHTTPメソッドが使用されたリクエストは事前に送信しても問題ないかをブラウザからサーバーへ問い合わせします。
事前に問い合わせた結果、許可されたリクエストであればブラウザは本来のリクエストを送信します。
プリフライトリクエストではHTTP OPTIONSメソッドを使って下記の情報をサーバーに送信します。

• Access-Control-Request-Method - 本来のリクエストで使用されるメソッド
• Access-Control-Request-Headers - 本来のリクエストで送信されるカスタムヘッダ

サーバーはCORS設定に基づいてプリフライトリクエストを判断し、Access-Control-Allow-Origin Access-Control-Allow-Methods Access-Control-Allow-HeadersなどのCORSヘッダを含むレスポンスを返します。これにより、ブラウザは実際のリクエストを許可するかどうかを判断できます。

内海「CORSに決まりやん」
駒場「でも分からへんねんな」
内海「分からへんことない オカンの好きなセキュリティに関する用語はCORS もぉ」

おわりに

駒場「でもオカンが言うには CORSではないって言うねん」
内海「ほなCORSちゃうやないかい オカンがCORSではないって言うんやから CORSちゃうがな」
内海「ホンマに分からへんがなこれ どうなってんねんもう」

駒場「んでオトンが言うにはな」
内海「オトン？」

駒場「CSRF（Cross-Site Request Forgery）ちゃうか？って言うねん」

内海「いや絶対ちゃうやろ もうええわー」

「「ありがとうございましたー」」

参考文献

https://www.shoeisha.co.jp/book/detail/9784798169477