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の比較の例

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）

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のヘッダを使います。

HTTPヘッダ	ヘッダに記載する内容
Access-Control-Allow-Origin	どのオリジンからのアクセスを許可するか。* も指定可能。
Access-Control-Allow-Methods	どのHTTPメソッドからのアクセスを許可するか。*も指定可能。

ヘッダは、これ以外にもありますが、ここでは記載を省略します。

RailsアプリケーションにおけるCORSの設定

Railsアプリケーションでは、rack-cors というgemを使って簡単にCORSの設定を行うことができます。

GitHub - cyu/rack-cors: Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.GitHub

インストール方法や設定方法は、上記公式サイトに記載されているので、ここでは記載を省略します。

本サイトの更新情報は、Twitterの株式会社プレセナ・ストラテジック・パートナーズエンジニア公式で発信しています。ご確認ください。