Iframe 使用時の「SecurityError: Blocked Cross-Origin Access」を克服する方法?

セキュリティ エラー: クロスオリジン アクセスがブロックされました

iframe を HTML ページに統合し、JavaScript を使用してその要素にアクセスしようとすると、次のエラーが発生する場合があります。

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

このエラーは、ブラウザが同一生成元ポリシー (セキュリティ) に準拠していることが原因で発生します。スクリプトがオリジンの異なるフレームにアクセスできないようにするための措置。オリジンには、プロトコル、ホスト名、およびポートが含まれます。

回避策

クロスオリジン スクリプトへの直接アクセスは禁止されていますが、window.postMessage とそれに対応するメッセージ イベントを利用して、オリジン間の通信を確立できます。フレーム:

メインページ:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe:

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

このアプローチにより、フレーム間の双方向通信が可能になります。クロスオリジン メッセージ パッシングは、メイン ページから生成されるポップアップやその他の新しいウィンドウにも適用できます。

以上がIframe 使用時の「SecurityError: Blocked Cross-Origin Access」を克服する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。