【Web開発者必読】同一オリジンポリシー（SOP）について

IT

はじめに

同一オリジンポリシー（Same-Origin Policy）について知っていますか？ 詳しくは後述致しますが同一オリジンポリシーはGoogleやEdge,Safari等のブラウザに標準で搭載されているクロスオリジンからのアクセスを制限する機能です。

オリジンとは

同一オリジンポリシーのオリジンとはURLの「http://」や「https://」等のスキーム、「example.com」等のドメイン部分のホストとドメインの後に記載される「:443」等のポート番号の3つを組み合わせたものの事を指します。 ※httpは80、httpsは443のポート番号を既定としています。既定のポート番号の場合は入力を省略して問題ありません。

同一オリジンポリシーとは

オリジンについて説明しましたのでなんとなくイメージが出来てきたのではないかとおもうのですがクロスオリジン（異なるオリジン）からのアクセスを制限する仕組みのことを同一オリジンポリシーと呼びます。 こちらでは詳しくは説明しませんが下記が同一オリジンポリシーによって制限される例です。 ※下記は一例でありその他にも制限される機能はあります。

• JavaScriptのfetch関数やXMLHttpRequest（XHR）を使用してクロスオリジンへリクエストを送信した場合
• iframe要素内でクロスオリジンにJavaScriptでアクセスする場合
• Canvas要素内でクロスオリジンの画像等JavaScriptでアクセスする場合

同一オリジンポリシーの影響を受けない例外について

同一オリジンポリシーはセキュリティ面を強固にする為良い仕組みではあるのですが厳しすぎることでデメリットを生じる場合があります。開発者なら無意識に使用されている事も多いかと思いますがhead要素内にJSのライブラリ（jQuery等）のCDNを読み込んで開発したことがあるのではないでしょうか？ 本来ならばCDNもクロスオリジンなので同一オリジンポリシーで制限されるのですが制限されてしまうと誰もアクセスできなくなってしまい一からコードを記述する手間が発生してしまいます。 なのでCDN等はCORS(Cross-Origin Resource Sharing)の仕組みによってクロスオリジンからのアクセスを可能にしています。

まとめ

今回は同一オリジンポリシーについてまとめてみました。 Web制作の勉強等を始めて間もない方はあまり聞きなじみがなにのではないでしょうか？ 前回に引き続きブラウザとサーバー内部のやり取りに関した内容ですが意外と重要な内容かと思いますので頭の隅にでも置いておくと良いかと思います。CORSについても勉強も兼ねて後日まとめようかと思っています。

参考文献

Origin (オリジン) – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
同一オリジンポリシー – ウェブセキュリティ | MDN
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識