Webにおける「オリジン」について整理してみた

概要

最近みたニュースで「オリジン」に触れたものがありました。
「オリジン」という言葉について、理解しきれていなかったので整理してみました。

オリジンとは

IPAのサイトでは、以下のような解説がされていました。

3.2. 源泉（origin） English
原則として、ユーザエージェントは、すべての URI を絶縁された保護ドメインとして扱うことができ、ある URI から別の URI と相互作用するために取得したコンテンツについて、明示的な承諾（consent）を要求する。
残念ながら、この設計は開発者にとっては厄介である。なぜならば、Web アプリケーションは、しばしば協調してふるまう数多くのリソースから成るからである。

代わりに、ユーザエージェントは、URI を「源泉（origin）」と呼ばれる保護ドメインにまとめる。
大雑把に言うと、ふたつの URI は、それらが同一スキーム、同一ホストおよび同一ポートをもつ場合（すなわち、同一の主役（principal）を表現する場合）、同一源泉の部分となる。（詳細については 4 章を参照。）

URLの「スキーム」「ホスト」「ポート」の3つの組み合わせが「オリジン」となります。
実際の例が上記のIPAサイトでも示されています。

同一オリジンに該当するもの

http://example.com/
http://example.com:80/
http://example.com/path/file

同一オリジンではないもの

http://example.com/
http://example.com:8080/
http://www.example.com/
https://example.com:80/
https://example.com/
http://example.org/
http://ietf.org/

同一オリジンポリシー

あるWebページのオリジンから見て同じリソースであれば「同一オリジン」、異なるオリジンであれば「クロスオリジン」といいます。オリジンを境としてリソースの保護することを「同一オリジンポリシー（Same-Origin Policy）」といいます。

同一オリジンポリシーでは、あるオリジンの文書やスクリプトから、他のオリジンのリソースにアクセスを制限します。同一オリジンポリシーはウェブのセキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。

上記について、実際に試してみました。

f:id:iestudy:20200907123254p:plain — 検証した構成

上記構成では、「cloudA-jyouno.domain/index.html」にあるJavascriptが同じホスト上の別ページ（A.html）と、別ホスト上のページ（B.html）を読み込み、内容を表示するものとなります。

動作としては同一オリジンのページAの内容は表示され、クロスオリジンのページBの内容は表示されません。

f:id:iestudy:20200907124132p:plain — ページA（同一オリジン）の読み込み結果

f:id:iestudy:20200907124323p:plain — ページB（クロスオリジン）の読み込み結果

参考：作成したWebページのソース

index.html

<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>cloudA-jyouno.domain/index.html</title>

<style type="text/css">
.button {
display : inline-block;
border-radius : 5%;
font-size : 18pt;
text-align : center;
cursor : pointer;
padding : 12px 12px;
background : #000000;
color : #ffffff;
line-height : 1em;
transition : .3s;
}
</style>

</head>
<body>

<a href="JavaScript:alert(frameA.secret.innerHTML);" class="button">同一オリジン実行</a>
<br>
<iframe name="frameA" src="A.html"></iframe>

<br>
<a href="JavaScript:alert(frameB.secret.innerHTML);" class="button">違うオリジンを実行</a>
<br>
<iframe name="frameB" src="http://ckoudB-jyouno.domain/index.html"></iframe>

</body>
</html>

A.html(B.htmlもほぼ同じ内容)

<html>
<head>
<title>A HTML</title>
</head>
<body>
<div id="secret">読み込まれる内容</div>
</body>
</html>