Skip to content

Latest commit

 

History

History
102 lines (89 loc) · 6.44 KB

20220904.md

File metadata and controls

102 lines (89 loc) · 6.44 KB
Raw

今週何知った？ week:25

各自発表

[name=makicamel]

CORS とは

  • Cross-Origin Resource Sharing （オリジン間リソース共有）の略称
  • オリジン間リソース共有 (CORS) - HTTP | MDN
  • 追加の http ヘッダーを使用し、あるオリジンで動作している Web アプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザに指示するための仕組み。 Web アプリケーションは自分とは異なるオリジン（ドメイン、プロトコル、ポート番号）にあるリソースをリクエストする時、オリジン間 http リクエストを実行する

image.png (81.6 kB)

画像：CORS & Same Origin Policy 入門 | yamory Blog

  • 以下のいずれかの場合に実際のリクエストを送信する
    • 単純リクエスト（後述）である
    • プリフライトリクエスト（後述）のレスポンスで 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 オブジェクトが使用されていないこと

プリフライトリクエスト

画像：オリジン間リソース共有 (CORS) - HTTP | MDN

  • 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
      • オリジンは末尾の / は含まない
        • 🙆‍♀️ https://example.com
        • 🙅‍♂️ https://example.com/
      • 資格情報を含まないリクエストの場合、以下のいずれかを指定できる
        • リソースへのアクセスを許可するオリジンをブラウザに伝えるための単一のオリジン
        • どのオリジンにもリソースへのアクセスを許可することをブラウザに伝えるワイルドカード *
      • 資格情報を含むリクエストの場合、以下を指定できる
        • リソースへのアクセスを許可するオリジンをブラウザに伝えるための単一のオリジン
    • Access-Control-Allow-Headers
      • プリフライトリクエストへのレスポンスで使用され、実際のリクエストを行う際に使用される HTTP ヘッダを示す
      • ブラウザの Access-Control-Request-Headers ヘッダに対するサーバ側のレスポンス
    • Access-Control-Max-Age プリフライトのレスポンスをキャッシュしてよい時間、単位は秒

安全リクエスト

  • 読み取り専用操作に繋がる場合、メソッドは安全である
  • HTTP メソッドの内 安全なメソッド
    • GET
    • HEAD
    • OPTIONS

CORS と CSP の違い

  • CORS
    • レスポンスを返すサーバ側がクライアントを認可または拒否する
  • CSP
    • リクエストを送るクライアント側がリソースの読み込みを指定し許可または拒否する

[name=ken3ypa]

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