Comment on page
Same Origin PolicyとCORS
最近、当社の開発では単一のホストだけでWebアプリケーションをホストせずに、フロントエンドとバックエンドを別のサーバーでホストすることが多くなってきました。
そして、これまでは遭遇してこなかったブラウザやJavaScriptに関するセキュリティの仕様に対処することが頻繁に起こるようになってきました。
この記事では、それらに対処する際に調べて把握した知識の一部であるSame Origin PolicyとCORSについてまとめます。
WhatWGの定義に詳細が記載されていますが、Webのセキュリティモデルの基本とな るものです。Originを共有するWebのリソースは互いに信用でき、それらの著作者（著作組織）も基本的には同じであると考えます。
WhatWGの定義によると、Originには、以下の2種類があります。
- An opaque origin
- A tuple origin
An opaque Originは、定義によると内部的に使うオリジンで、オリジンをシリアライズして復元することはできず、シリアライズした場合はnullとなるようです。あまり利用イメージが湧きませんが、我々の普段のWeb開発ではあまり使うことはなさそうに思います。念の為に定義文を引用しておくと、以下です。
An opaque originAn internal value, with no serialization it can be recreated from (it is serialized as "null" per serialization of an origin), for which the only meaningful operation is testing for equality.
A tuple originは、以下の要素で構成されます。
- Scheme（https、http、ftp、などURLの先頭部分につけるもの）
- Host
- Port
- Domain
Domainは、Hostの一部であるからか、一般的に、以下の3つをOriginを構成する要素と記載されることも多いようです。この記事でも以下の3つでOriginが構成される想定で、以降の説明を記載します。
- Scheme
- Host
- Port
つまり、https://www.precena.com:8080/index.html のようなURLがある場合に、A tuple originとは、
- https（Scheme）
- www.precena.com （Host）
- 8080 （Port）
の組み合わせで構成されます。
URL | 同じかどうか
（True/False） | 理由 |
http://www.precena.co.jp https://www.precena.co.jp | False | Schemeが異なる |
https://www.precena.co.jp/ https://www.precena.co.jp/company/info | True | Path（ /と/company/info）が異なるが、Scheme、Host、Portは同じ |
https://data.precena.co.jp/ https://www.precena.co.jp/ | False | Hostが異なる（ data.precena.co.jp と www.precena.co.jp） |
https://www.precena.co.jp/ https://www.precena.co.jp:3000/ | False | Portが異なる（ 80と3000） |
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy （日本語訳サイトはこちら）に詳細な説明がありますが、要するに、特定のOriginのページ（html）やスクリプト（JavaScript）が、別のOriginのリソース（APIやページなど）にアクセスするのを防ぐブラウザの仕組みです。
ブラウザにSame Origin Policyが実装されているため 、リクエスト先のOriginで、後述のCORSの許可がされていなければ、
XmlHttpReuqestやfecth API、<img>タグを使ったリクエストなどは、異なるOriginに対してはできません。Cross Origin Resource Sharingの略で、https://developer.mozilla.org/en-US/docs/Glossary/CORS （日本語訳サイトはこちら）やhttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS （日本語訳サイトはこちら）に詳しい説明が記載されています。
具体的には、Same Origin PolicyによってアクセスできないようなOriginをまたいだリソースに、あらかじめ、HTTPのヘッダをつけておくことで、アクセス可能にす る仕組みです。
例えば、以下のようなHTTPのヘッダを使います。
HTTPヘッダ | ヘッダに記載する内容 |
Access-Control-Allow-Origin | どのオリジンからのアクセスを許可するか。* も指定可能。 |
Access-Control-Allow-Methods | どのHTTPメソッドからのアクセスを許可するか。*も指定可能。 |
ヘッダは、これ以外にもありますが、ここでは記載を省略します。
Railsアプリケーションでは、
rack-cors というgemを使って簡単にCORSの設定を行うことができます。
インストール方法や設定方法は、上記公式サイトに記載されているので、ここでは記載を省略します。
最終更新 1yr ago