同一オリジン ポリシーの難問: クロスオリジン フレームのアクセスが拒否される 内の要素にアクセスしようとすると、 JavaScript を使用すると、恐ろしい「SecurityError: オリジンを持つフレームがクロスオリジン フレームにアクセスすることをブロックしました」エラーが発生する可能性があります。これは、同一オリジン ポリシーの直接の結果であり、オリジン (プロトコル、ホスト名、ポート) に基づいてリソースを分離する重要なセキュリティ対策です。</p> <p><h3>同一オリジン ポリシーとは何ですか? </h3></p> <p>同一オリジン ポリシーは、スクリプトが異なるオリジンからのコンテンツにアクセスすることを防ぎます。次の URL コンポーネントのいずれかが異なる場合、オリジンは異なるものとみなされます。</p> <ul> <li>プロトコル (例: http と https)</li> <li>ホスト名 (例: www.example.com と data. example.com)</li> <li>ポート (例: 80 vs. 2251)</li> </ul> <p><h3>イライラする制限</h3></p> <p>このポリシーは、スクリプトが外部 Web サイトのコンテンツと対話することを効果的にブロックします。たとえば、メイン ページが http://www.example.com からロードされており、<iframe> にアクセスしようとすると、 https://www.example.com からロードすると、セキュリティ エラーが発生します。</p> <p><h3>回避策: クロスオリジン通信</h3></p> <p>直接アクセスすることはできませんJavaScript を使用したクロスオリジン フレームでは、window.postMessage とそれに対応するメッセージ イベントを利用してページ間の通信を確立できます。簡単な概要は次のとおりです:</p> <ol> <li> <strong>メイン ページ内:</strong> postMessage を使用して、一致するオリジンを持つ iframe にデータを送信します。</li> <li> <strong>iframe 内:</strong> メッセージ イベントをリッスンし、オリジンが予想されるものと一致する場合にのみデータを処理しますvalue.</li> </ol> <p><h3>同一オリジン ポリシーの無効化 (注意が必要)</h3></p> <p>特定のブラウザでは同一オリジン ポリシーを無効にすることができますが、これはセキュリティ上のリスクとして考慮され、開発目的でのみ実行されるべきです。ポリシーを無効にすると、クロスオリジン リソースへの無制限のアクセスが許可され、ブラウザがセキュリティの脆弱性にさらされる可能性があることに注意してください。</p>
