# 今週何知った？ week:25

## 各自発表

> [name=makicamel]

## CORS とは
- Cross-Origin Resource Sharing （オリジン間リソース共有）の略称
- [オリジン間リソース共有 (CORS) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
- 追加の http ヘッダーを使用し、あるオリジンで動作している Web アプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザに指示するための仕組み。
Web アプリケーションは自分とは異なるオリジン（ドメイン、プロトコル、ポート番号）にあるリソースをリクエストする時、オリジン間 http リクエストを実行する
<img width="1930" alt="image.png (81.6 kB)" src="https://img.esa.io/uploads/production/attachments/19215/2022/09/04/49657/8d3cb10f-95f6-486a-b34a-ae70d995757d.png">

画像：[CORS & Same Origin Policy 入門 | yamory Blog](https://yamory.io/blog/about-cors/)
- 以下のいずれかの場合に実際のリクエストを送信する
- 単純リクエスト（後述）である
- プリフライトリクエスト（後述）のレスポンスで `Access-Control-Allow-Origin` ヘッダで許可されているオリジンである、つまりサーバで「認可」されている

### Same Origin Policy（同一オリジンポリシー）
- Same Origin Policy が適用されるケース
- JavaScript での非同期通信
- Next.js などでフロントエンドサーバとバックエンドサーバが別のドメインにある場合も該当する
- CSS で `@font-face` を使った Web font の読み込み
- Same Origin Policy が適用されないケース
- `img` タグの `src` 属性で読み込んだ画像
- `link` タグの `href` 属性で読み込んだ CSS
- `script` タグの `src` 属性で読み込んだ JavaScript
- `form` タグの `action` 属性で設定した送信先 URL
- `video`, `audio` タグの `src` 属性で読み込んだマルチメディアファイル
- `iframe`, `frame` タグの `src` 属性での別サイトコンテンツの読み込み ※
- ※ JavaScript を用いて iframe 内のドキュメントにアクセスすることはできない
- ※ X-Frame-Options の設定によっては読み込みがブロックされる

## 単純リクエスト（シンプルリクエスト）
- 単純リクエストとは
- サーバの情報に副作用を引き起こさないリクエスト
- プリフライトを発生させないリクエスト
- 以下のすべての条件に合致するリクエスト
- 以下のいずれかのメソッドであること
- `GET`
- `HEAD`
- `POST`
- 以下のいずれかのヘッダであること
- `Accept`
- `Accept-Language`
- `Content-Language`
- `Content-type`
- `Content-Type` ヘッダの場合以下のいずれかの値であること
- `application/x-www-form-urlencoded`
- `multipart/form-data`
- `text/plain`
- XMLHttpRequest オブジェクトを使用してリクエストを行う場合は、 XMLHttpRequest.upload プロパティから返されるオブジェクトにイベントリスナーが登録されていないこと
- リクエストに ReadableStream オブジェクトが使用されていないこと

## プリフライトリクエスト
<img width="500" src="https://img.esa.io/uploads/production/attachments/19215/2022/09/04/49657/4c66a8e2-14ba-46f6-9601-643be2384f49.png">

画像：[オリジン間リソース共有 (CORS) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#access-control-expose-headers)

- `OPTIONS` メソッドで HTTP リクエストを外部のオリジンのリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめるリクエスト。Web ブラウザが自動的に実施する。サイト間リクエストがユーザデータに影響を与える可能性があるような場合に行われる
- プリフライトリクエストのレスポンスで許可されていない場合、実際のリクエストは送信されず終了する
- ブラウザ
- リクエストの引数（リクエスト Header）に基づいてプリフライトの送信が必要だと判断する
- `Access-Control-Request-Method` `Access-Control-Request-Headers` などのヘッダが付与する。ブラウザが自動で付与する
- サーバ
- 受け取ったプリフライトリクエストにより受け入れ可能か否かを判断する
- `Access-Control-Allow-Origin` `Access-Control-Allow-Method` ヘッダを付与する
- リクエストヘッダ
- `Access-Control-Request-Method`
- `Access-Control-Request-Headers`
- レスポンスヘッダ
- `Access-Control-Allow-Origin`
- オリジンは末尾の `/` は含まない
- :ok_woman: `https://example.com`
- :no_good_man: `https://example.com/`
- 資格情報を含まないリクエストの場合、以下のいずれかを指定できる
- リソースへのアクセスを許可するオリジンをブラウザに伝えるための単一のオリジン
- どのオリジンにもリソースへのアクセスを許可することをブラウザに伝えるワイルドカード `*`
- 資格情報を含むリクエストの場合、以下を指定できる
- リソースへのアクセスを許可するオリジンをブラウザに伝えるための単一のオリジン
- `Access-Control-Allow-Headers`
- プリフライトリクエストへのレスポンスで使用され、実際のリクエストを行う際に使用される HTTP ヘッダを示す
- ブラウザの `Access-Control-Request-Headers` ヘッダに対するサーバ側のレスポンス
- `Access-Control-Max-Age`
プリフライトのレスポンスをキャッシュしてよい時間、単位は秒

## 安全リクエスト
- 読み取り専用操作に繋がる場合、メソッドは安全である
- HTTP メソッドの内 安全なメソッド
- `GET`
- `HEAD`
- `OPTIONS`

## CORS と CSP の違い
- CORS
- レスポンスを返すサーバ側がクライアントを認可または拒否する
- [CSP](https://github.com/makicamel/wwk/blob/main/20220319.md#%E3コンテンツセキュリティポリシー-csp)
- リクエストを送るクライアント側がリソースの読み込みを指定し許可または拒否する

> [name=ken3ypa]

Chrome のレコーディング機能について