セキュリティ エラー: クロスオリジン フレーム アクセスがブロックされました 内の要素にアクセスしようとすると、 JavaScript を使用して別のオリジンからアクセスすると、次のエラーが発生する可能性があります:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このエラーは、ブラウザが強制する基本的なセキュリティ対策である同一オリジン ポリシーの結果です。</p> <p><h3> ;同一オリジン ポリシーとその影響</h3></p> <p>同一オリジン ポリシースクリプトが、オリジンが異なるリソース (他のページやフレームなど) にアクセスできないようにします。オリジンは、プロトコル (HTTP など)、ホスト名、URL のポートによって定義されます。これらのコンポーネントのいずれかに相違がある場合は、別のオリジンが構成されます。</p> <p>たとえば、「http://www.example.com」のスクリプトは、「https://www.example.com」のリソースにアクセスできません。 、「http://www.anothersite.com」、または「http://www.example.com:81」。</p> <p><h3>クロスオリジン フレームへのアクセス: A回避策</h3></p> <p>クロスオリジン フレームへの直接スクリプト アクセスはブロックされますが、window.postMessage とイベント リスナーを使用する回避策があります。このアプローチにより、メイン ページとフレーム間でデータを交換できます。</p> <p><strong>Main Page:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*variable or object*/, 'https://your-second-site.example');</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong><iframe>ページ:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>window.addEventListener('message', event => { // Check the origin of the data if (event.origin === 'https://your-first-site.example') { // Data is from the main page, use event.data to process it } });</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>同一生成元ポリシーはセキュリティにとって重要であることに注意してください。特定のサイトまたはグローバルでブラウザーで無効にすることは、開発目的でのみ、細心の注意を払って行う必要があります。</p>
