[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした

質問

を読み込んでいます。 <iframe> をHTMLページに挿入し、Javascriptを使ってその中の要素にアクセスしようとしていますが、コードを実行しようとすると、以下のエラーが発生します。

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

フレーム内の要素にアクセスできるよう、解決策をご教示いただけないでしょうか。

私はテストのためにこのコードを使用していますが、無駄です。

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

解決方法は？

セイムオリジンポリシー

あなた できない にアクセスします。 <iframe> JavaScript を使って異なるオリジンを使用することができれば、セキュリティ上の大きな欠陥となります。については 同一生成元ポリシー ブラウザは、異なるオリジンを持つフレームにアクセスしようとするスクリプトをブロックします。 .

アドレスの以下の部分のうち少なくとも1つが維持されていない場合、Originが異なるとみなされます。

プロトコル

://

ホスト名

:

ポート

/...

フレームにアクセスする場合、プロトコル、ホスト名、ポートが自分のドメインと同じである必要があります。

^{注：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つのページ間でメッセージを送信することができます。

• メインページで

  const 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() ) と同じように、何の違いもありません。

のセイムオリジンポリシーを無効にする。 あなたの ブラウザ

このトピックについては、すでにいくつかの良い回答があるので（私はググって見つけただけですが）、これが可能なブラウザについては、相対的な回答をリンクします。ただし、次のことを忘れないでください。 同一生成元ポリシーを無効にした場合、その影響は あなたの ブラウザ . また、同一生成元セキュリティ設定を無効にしてブラウザを実行すると、助成金 任意の のウェブサイトはクロスオリジンリソースにアクセスできるので 非常に安全ではないので、何をやっているのかよくわからない場合は絶対にやってはいけません（開発目的など）。 .

• グーグルクローム
• Mozilla Firefox
• サファリ
• オペラ
• Microsoft Edge 不可
• マイクロソフト・インターネット・エクスプローラー