search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

同一生成元ポリシー （Same-Origin Plicy） #113

Open hysryt opened 5 years ago

hysryt commented 5 years ago

同一源泉ポリシー、同一オリジンポリシーとも表記される。 https://ja.wikipedia.org/wiki/同一生成元ポリシー

hysryt commented 5 years ago

概要

同一生成元ポリシーとは、生成元（オリジン）が同一でないリソース同士の干渉を制限する、ブラウザのサンドボックスに用意された仕組みである。

あるオリジンから取得したリソースと、別のオリジンから取得したリソース同士の相互作用を制限する。 リソース同士の関係を分離することで、悪意あるリソースからの攻撃を防止する。

ここでいうリソースとは、JavaScriptやHTML、画像などを指す。 相互作用とは、HTMLからの画像の読み込み、CSSからのフォントの読み込み、JavaScriptからのXMLHttpRequestなど、広い範囲を指す。

用語

オリジン（Origin）

リソースの生成元。源泉などということもある。 ホスト、スキーム、ポートの3つによって識別する。 これら3つが同じであれば「オリジンが同一」とみなす。

制限

制限は以下の3つのカテゴリにわけられる。

書き込み

書き込みは概して許可される。 書き込みとは、具体的には以下のようなものを指す。

埋め込み

埋め込みは概して許可される。 埋め込みとは、具体的には以下のようなものを指す。

読み込み

読み込みは概して許可されない。 読み込みとは、具体的には以下のようなものを指す。

hysryt commented 5 years ago

実験

XMLHttpRequest で別オリジンのリソースが読み込めないことを確認する。

流れ

  1. Webサーバが動く仮想マシンを2つ用意
  2. ドメインは一方を origin1.test 、もう一方を origin2.test に設定
  3. origin1.test に JSON ファイルを設置
  4. origin2.test に origin1.test の JSON ファイルを取得する JavaScript ファイルと、それを動かす HTML ファイルを設置
  5. origin2.test にアクセスし、JSONファイルを取得できるかを確認する。
hysryt commented 5 years ago

CORS ( Cross-Origin Resource Sharing )

クロスオリジンリソースシェアリング。オリジン間リソース共有ともいう。

悪意を持ったサイトからログイン済みの正規のサイトのユーザー情報が取得できてしまう（CSRF）のを防ぐ仕組み。

  1. Alice がサイト bob.example.com にログイン
  2. Alice がサイト evil.example.com にアクセス

この時 evil.example.com から bob.example.com への XMLHttpRequest が自由に投げられるとAliceの個人情報が evil.example.com に流出してしまう。（bob.example.comからはログイン済みのページが返ってくるため）

概要

同一生成元ポリシーによる制限を緩和するための仕組み。 リソースを別オリジンに公開したい際に使用される。

CORS によって以下のような処理が緩和される。

アクセスされる側のサーバーに、アクセスを許可するオリジンの情報を設定する。

HTTPヘッダー

アクセスする側のオリジンからのHTTPヘッダーに含める。 CORSでは新たな独自のHTTPヘッダーを使用する。

リクエスト

これらはブラウザによって指定されるため、XMLHttpRequest を使用する場合でも手動で設定する必要はない。

Origin

アクセスする側のオリジンを指定する。

Origin: https://developer.mozilla.org

Access-Control-Request-Method

プリフライトリクエストに使用する。 実際にリクエストに使用するメソッドを指定する。

Access-Control-Request-Method: PUT

Access-Control-Request-Headers

プリフライトリクエストに使用する。 実際にリクエストに使用するヘッダーを指定する。

Access-Control-Request-Headers: X-My-Custom-Header

レスポンス

アクセスされる側のオリジンからのHTTPヘッダーに含める。

Access-Control-Allow-Origin

アクセスを許可するオリジンを指定する。 すべてのオリジンに許可を与える場合は * を指定する。 特定のオリジンを指定する場合は以下のようにする。

Access-Control-Allow-Origin: http://mozilla.org

* 以外を指定する場合は、キャッシュを防ぐため Vary ヘッダーに Origin を追加する必要がある。

Access-Control-Max-Age

プリフライトリクエストの結果をキャッシュして良い時間を秒単位で指定する。

Access-Control-Allow-Methods

プリフライトリクエストに対するレスポンスに含める。 許可するHTTPメソッドを指定する。

Access-Control-Allow-Methods: PUT, OPTIONS

Access-Control-Allow-Headers

プリフライトリクエストに対するレスポンスに含める。 許可するHTTPヘッダーを指定する。

Access-Control-Allow-Headers: X-My-Custom-Header

Access-Control-Allow-Credentials

レスポンスボディを公開できるかを指定する。

Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers

アクセスする側による読み込みを許可するヘッダーを指定する。

実験

CORSによって別オリジンからのリソース読み込みを許可できることを確認する。

流れ

  1. Webサーバが動く仮想マシンを2つ用意
  2. ドメインは一方を origin1.test 、もう一方を origin2.test に設定
  3. origin1.test に JSON ファイルを設置
  4. origin2.test に origin1.test の JSON ファイルを取得する JavaScript ファイルと、それを動かす HTML ファイルを設置
  5. origin1.test に、アクセスを許可するオリジンとして origin2.test を設定する。
  6. origin2.test にアクセスし、JSONファイルを取得できるかを確認する。
hysryt commented 5 years ago

Content-Security-Policy