IFrame にアクセスすると、JavaScript コードで「SecurityError: Blocked a Frame with Origin...」エラーが発生するのはなぜですか?

ブロックされたクロスオリジン フレーム アクセス: SecurityError

について

Web 開発において、親ドキュメントとは起源が異なる場合、開発者は次のような問題に遭遇する可能性があります。エラー:

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

このエラーは、Web ブラウザによって実装された同一オリジン ポリシーが原因で発生します。

同一オリジン ポリシー

同一生成元ポリシーは、潜在的なセキュリティ脆弱性を防ぐために、スクリプトが生成元が異なる Web サイトのリソースにアクセスすることを制限します。オリジンとは、URL のプロトコル、ホスト名、ポートの組み合わせを指します。

次の例を考えてみましょう:

• http://www.example.com/home /index.html は http://www.example.com/home/other.html 内のリソースにアクセスできます。 http://www.example.com:80.
• https://google.com/search?q=james Bond からのリソースにアクセスできませんhttp://www.example.com/home/index.html.

クロスオリジン フレームにアクセスするための回避策

クロスオリジン フレームへの JavaScript からの直接アクセスは禁止されていますが、交換する回避策はありますdata:

• window.postMessage(): 異なる生成元の 2 つのウィンドウ間で制御されたメッセージの受け渡しを許可します。
• postMessage() リスナーiframe 内: 親から送信されたメッセージをリッスンしますdocument.

// In the main page:
frame.contentWindow.postMessage('message', 'https://your-second-site.example');

// In the iframe:
window.addEventListener('message', (event) => {
  if (event.origin === 'https://your-first-site.example') {
    console.log(event.data); // Received message
  }
});

同一オリジン ポリシーの無効化 (注意)

同一オリジン ポリシーの無効化は、開発目的で行うことができます。ただし、重大なセキュリティ リスクを引き起こすため、運用環境では決して使用しないでください。さまざまなブラウザでポリシーを無効にするためのリソースへのリンクは次のとおりです:

• [Google Chrome](https://stackoverflow.com/questions/26982875/how-to-disable-same-origin-policy) )
• [モジラFirefox](https://superuser.com/questions/287723/temporarily-disable-same-origin-policy-in-firefox)
• [Safari](https://apple.stackexchange.com/questions /211467/how-to-disable-same-origin-policy-in-safari)

以上がIFrame にアクセスすると、JavaScript コードで「SecurityError: Blocked a Frame with Origin...」エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。