家studyをつづって

IT技術に関することやセキュリティ、ガイドライン等学んだことをつづっていきます。

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>

 

ニュースで問題となった内容について
(Webリホスティングサービスとは)

Web Rehostingサービスとは、他のWebサイトのコンテンツを再ホストした上でユーザに閲覧させるサービスです。例として、WebアーカイブやWeb翻訳があります。

Web Rehostingサービスでは、異なるオリジンのコンテンツが、同一のオリジンとして表示されてしまうことで同一オリジンポリシーのアクセス制御が機能しなくなることが問題になります。

f:id:iestudy:20200907125156p:plain

問題のイメージ

Google翻訳などでWebページを翻訳すると上記のようなイメージになります。

※実際にはJavascriptは動作しませんでした。

f:id:iestudy:20200907125455p:plain

Google翻訳での結果

参考にさせていただいたサイト

jvn.jp

www.youtube.com

 

developer.mozilla.org