Same Origin PolicyとCORS
はじめに
最近、当社の開発では単一のホストだけでWebアプリケーションをホストせずに、フロントエンドとバックエンドを別のサーバーでホストすることが多くなってきました。
そして、これまでは遭遇してこなかったブラウザやJavaScriptに関するセキュリティの仕様に対処することが頻繁に起こるようになってきました。
この記事では、それらに対処する際に調べて把握した知識の一部であるSame Origin PolicyとCORSについてまとめます。
Originとは
WhatWGの定義に詳細が記載されていますが、Webのセキュリティモデルの基本となるものです。Originを共有するWebのリソースは互いに信用でき、それらの著作者（著作組織）も基本的には同じであると考えます。
2種類のOrigin
WhatWGの定義によると、Originには、以下の2種類があります。
An opaque origin
A tuple origin
An opaque Originは、定義によると内部的に使うオリジンで、オリジンをシリアライズして復元することはできず、シリアライズした場合はnullとなるようです。あまり利用イメージが湧きませんが、我々の普段のWeb開発ではあまり使うことはなさそうに思います。念の為に定義文を引用しておくと、以下です。
An opaque origin
An 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.
引用：https://html.spec.whatwg.org/multipage/origin.html#concept-origin-opaque
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）
の組み合わせで構成されます。
Originの比較の例
Same Origin Policyとは
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に対してはできません。
CORSとは
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のヘッダを使います。
ヘッダは、これ以外にもありますが、ここでは記載を省略します。
RailsアプリケーションにおけるCORSの設定
Railsアプリケーションでは、rack-cors というgemを使って簡単にCORSの設定を行うことができます。
インストール方法や設定方法は、上記公式サイトに記載されているので、ここでは記載を省略します。
本サイトの更新情報は、Twitterの株式会社プレセナ・ストラテジック・パートナーズエンジニア公式で発信しています。ご確認ください。
最終更新
