オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックしました
Blocked Frame With Origin From Accessing Cross Origin Frame
序文
ipageが異なるポート番号または異なるipsにネストされている場合、親ページがサブページのメソッドを呼び出すと、エラーが報告されます。
SecurityError: Blocked a frame with origin from accessing a cross-origin frame…
問題の原因
異なるポート番号では、従来のiframeネスト呼び出しメソッドを使用できません。
document.getElementById('mainFrame').contentWindow.xxxx();
なぜなら
相同セキュリティポリシー
アクセスできません
アドレスの少なくとも一部が予約されていない場合、ソースは異なると見なされます。
://:/path/to/page.html
iframeにアクセスする場合、プロトコル、ホスト名、およびポートはドメインと同じである必要があります。
例
次の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.html -> Failure: different protocol ftp://www.example.com:21 -> Failure: different protocol & port https://google.com/search?q=james+bond -> Failure: different hostname & protocol
解決
同じソースポリシーにより、スクリプトが異なるソースサイトのコンテンツにアクセスできなくなりますが、両方のページが同時にある場合に使用できますwindow.postmessageand
関連するメッセージイベントは、この問題を解決するために2つのページ間でメッセージを送信します。
メインページ:
var frame = document.getElementById('your-frame-id') frame.contentWindow. postMessage (data, '*') Data can be string, boolean, number, array, object In the iframe subpage window. addEventListener ('message', function(event) { //event.data gets the data passed over })
注意 :親ページのpostMessageはaddEventListenerによってトリガーされます