CORS完全に理解した（したい）

CORSについて簡単に紹介する資料です
https://github.com/toshi-pono/CORS-practice

Transcript

1. CORS完全に理解した(したい) @toshi00_p 2023.08.28
2. 今⽇やること たまによくあるエラー CORSでブロックされた！ってときに何が起きてるか ちょっとだけ理解する CORSと仲良く開発しよう！ 2/17
3. 今⽇やること CORS：オリジン間リソース共有 1. オリジンとは？ 2. CORSの仕組み 3. CORSの必要性 扱わないこと • プリフライトリクエスト • HTMLタグ内でのリクエスト（img, iframe, canvasなど） • Cookie 3/17
4. CORS = オリジン間リソース共有、 Cross-Origin Resource Sharing 4/17 CORSとは 
 クロスオリジンのときに リソースを使えるようにする サーバーからブラウザへの許可 APIリクエストと そのレスポンス オリジンが違う 同⼀オリジンのリクエストは常に許可 クロスオリジンのリクエストは基本は禁⽌ → （でもアクセスしたい）→ CORSで個別に許可 許可に応じて ブラウザが制御
5. CORS = オリジン間リソース共有、 Cross-Origin Resource Sharing 5/17 CORSとは 
 クロスオリジンのときに リソースを使えるようにする サーバーからブラウザへの許可 APIリクエストと そのレスポンス オリジンが違う 同⼀オリジンのリクエストは常に許可 クロスオリジンのリクエストは基本は禁⽌ → （でもアクセスしたい）→ CORSで個別に許可 許可に応じて ブラウザが制御
6. 1. クロスオリジン？ 6/17 オリジンとは https://example.com:443 host name port scheme リクエスト元 リクエスト先 https://example.com https://example.com same-origin: 完全一致 https://dev.example.com cross-origin: サブドメイン https://example.com:8080 cross-origin: 異なるポート オリジン = スキーム(プロトコル) ＋ ホスト名 ＋ ポート
7. 1. クロスオリジン？ 7/17 (おまけ) origin と site 対象：https://example.com same-origin same-site same-site かどうかは cookie の送信で関係してくる same-site: eTLD+1が同じ（雑に書くと、ドメインの持ち主が同⼀） https://example.com https://example.com:443 https://github.com https://google.com http://example.com https://dev.example.com https://example.com:8080
8. CORS = オリジン間リソース共有、 Cross-Origin Resource Sharing 8/17 CORSとは 
 クロスオリジンのときに リソースを使えるようにする サーバーからブラウザへの許可 APIリクエストと そのレスポンス オリジンが違う 同⼀オリジンのリクエストは常に許可 クロスオリジンのリクエストは基本は禁⽌ → （でもアクセスしたい）→ CORSで個別に許可 許可に応じて ブラウザが制御
9. 2. CORSの仕組み 9/17 JSエンジン*¹ ブラウザ サーバー *1: 実際には、JSエンジンはブラウザの内部に組み込まれている *2: 単純リクエストでない場合は、許可がなければリクエストも送信しない リクエストの送信を要求 レスポンス 許可されて いなければ 破棄 レスポンス リクエストを送信*² フロントエンド開発 バックエンド開発
10. 2. CORSの仕組み 10/17 CORSのヘッダー ※ 許可の申請（クライアントからサーバー）はブラウザが自動でやってくれる。FE側でやることは特にない。 許可（サーバーからクライアント） • Access-Control-Allow-Origin • Access-Control-Allow-Credentials • Access-Control-Allow-Headers • Access-Control-Allow-Methods • Access-Control-Expose-Headers • Access-Control-Max-Age 許可の申請（クライアントからサーバー※） • Origin • Access-Control-Request-Headers • Access-Control-Request-Method
11. 2. CORSの仕組み（許可の例） 11/17 Access-Control-Allow-Origin JSエンジン JSエンジン https://site.example https://evil.example https://api.example Access-Control-Allow-Origin: https://site.example 許可したオリジンのみレスポンスを取得できる
12. 2. CORSの仕組み（許可の例） 12/17 Access-Control-Expose-Headers JSエンジン JSエンジン https://site.example https://site.example https://api.example Access-Control-Expose-Headers: Myheader CORSセーフリストレスポンスヘッダーは、許可なしに取得できる （Cache-Control, Content-Length, Content-Language, Content-Type, Expires, Last-Modified, Pragma） Myheader: hogehoge Myheader: undefined 許可あり 許可なし
13. 3. CORSの必要性 13/17 CSRF脆弱性 今回のケースはCookieの設定も良くない……かも なお、CORSだけでは防げないパターンもあるので注意が必要 https://api.example https://site.example https://evil.example ログイン： Cookieがapi.exampleに 対して付与 ①ログイン ②アクセス ③勝手に 　リクエスト ④レスポンス ⑤レスポンスを覗 き見 CORSがないので リクエストできる
14. CORS = オリジン間リソース共有、 Cross-Origin Resource Sharing 14/17 CORSとは 
 クロスオリジンのときに リソースを使えるようにする サーバーからブラウザへの許可 APIリクエストと そのレスポンス オリジンが違う 同⼀オリジンのリクエストは常に許可 クロスオリジンのリクエストは基本は禁⽌ → （でもアクセスしたい）→ CORSで個別に許可 許可に応じて ブラウザが制御
15. 終わりに CORSで重要なポイント Origin Access-Controll-Allow-Origin 単純リクエスト プリフライトリクエスト CORS完全に理解した！（わからん） 15/17
16. 参考 • オリジン間リソース共有 (CORS) https://developer.mozilla.org/ja/docs/Web/HTTP/CORS • フロントエンド開発のためのセキュリティ⼊⾨ 16/17