そもそもSOPとは?
「Same Origin Policy」の略で「Same-Origin」ではアクセスできても、「Cross-Origin」ではアクセス制限があるという仕組みです。詳しくは以下の記事で解説しています。
SOP回避はCORS(Cross-Origin Resource Sharing)を使うのが一般的になってきていますが、技術的な制約があるためにCORSがどうしても使えない場面はあります。その場合はいくつかの回避策があります。
JSONP(JSON with Padding)を用いた方法
予め用意したコールバック関数の名前をCross-Originのエンドポイントに伝えるとエンドポイントでは共有したいリソースを引数としてそのコールバック関数が呼び出されるというもの。
仕組み
クロスオリジンでも、埋め込み(JavaScriptのロード)だけは許可されているという性質を利用して値を取り出す手法です。
JSONPのデメリット
以下のデメリットがあるのでできるだけJSONPを使うのは避けてなるべくCORSを用いるべき。
- 攻撃者により、CSP(Content Security Policy)の迂回に使われることもある。
- JavaScriptの代わりにHTMLが返却されるタイプのエンドポイントの場合には、SOME(Same Origin Method Execution)と呼ばれる攻撃に使われることもある。
XMLHttpRequest2
クロスドメイン制約を回避できる。
サーバー側で「Access-Control-Allow-Origin」を設定している必要がある。
postMessageを用いた方法
Webブラウザが提供しているJavaScriptのメソッドpostMessageを用いた方法です。
postMessageとは?
当該ウインドウに対してデータを送信するためのメソッドです。以下のように使っています。
1 2 |
const w = window.open("http://xxx.com"); w.postMessage("送信したいメッセージ",送信先ウインドウのOrigin) |
document.domainによる方法
document.domainとは?
WebページのURL中のドメイン名か、それより上位のドメイン名を値として取ることができるプロパティです。2つのWebページが明示的に同じ値を設定している時は、Cross-OriginのDOMアクセスが許可される。
注意点
Cross-OriginなDOMアクセスへの制限の緩和にしか利用できない。
この記事へのコメントはありません。