同一生成元ポリシー
JavaScriptを使用して別のオリジンのにアクセスすることはできません。アクセスできる<iframe>
としたら、セキュリティ上の大きな欠陥になります。同じ生成元のポリシーの 場合、ブラウザは、異なる生成元のフレームにアクセスしようとするスクリプトをブロックします。
アドレスの次の部分の少なくとも1つが維持されていない場合、オリジンは異なると見なされます。
<protocol>://<hostname>:<port>/...
フレームにアクセスする場合は、プロトコル、ホスト名、ポートがドメインと同じである必要があります。
注:Internet Explorerはこのルールに厳密に従っていないことがわかっています。詳細については、こちらを参照してください。
例
ここから、次のURLにアクセスしようとするとどうなるでしょうか。 http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
回避策
同一生成元ポリシーは、スクリプトが異なる生成元のサイトのコンテンツにアクセスするのをブロックしますが、両方のページを所有している場合は、この問題を回避しwindow.postMessage
、その相対message
イベントを使用して、次のように2つのページ間でメッセージを送信できます。
メインページ:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
への2番目の引数は、宛先の起点に関する優先順位がないpostMessage()
こと'*'
を示すことです。他のサイトに送信するデータを開示しないように、可能な場合は常にターゲットオリジンを提供する必要があります。
あなたの<iframe>
(メインページに含まれています):
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
このメソッドは双方向に適用でき、メインページでリスナーを作成し、フレームから応答を受信します。同じロジックを、ポップアップや、メインページによって生成された新しいウィンドウ(たとえば、を使用してwindow.open()
)に実装することもできます。違いはありません。
ブラウザーで同一生成元ポリシーを無効にする
このトピックにはすでにいくつかの良い答えがあります(私はそれらをグーグルで見つけただけです)。そのため、これが可能なブラウザーについては、相対的な答えをリンクします。ただし、同一生成元ポリシーを無効にすると、ブラウザにのみ影響することに注意してください。また、同一生成元のセキュリティ設定を無効に助成金でブラウザを実行している任意のようにクロスオリジンリソースへのウェブサイトへのアクセスを、それは非常に危険なのです、あなたは、あなたがやっている内容を正確に把握していない場合(例えば開発目的)行われません。
Access-Control-Allow-Origin
だけに、のiFrameには適用されませんXHRs、フォント、WebGLのとcanvas.drawImage
。postMessage
唯一の選択肢だと思います。