フロントエンド開発では、 の埋め込みページと親ページの間でクロスドメインの問題が発生します。ドメインはプロトコル、ホスト名、ポート番号で構成されます。たとえば、「https」 ://example.com: 8080" の場合、埋め込まれたページのドメインが親ページのドメインと異なる場合、クロスドメインの問題が発生します。これは、ブラウザーがセキュリティ上の理由からクロスドメイン スクリプトの実行を制限しているためです。悪意のあるスクリプト攻撃を防ぐため。 </p></blockquote> <p><img src="https://img.php.cn/upload/article/202311/27/2023112711344560636.jpg" alt="iframeのドメインとは何ですか" ></p> <p># このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。 </p> <div id="chat-messages"><div><article>##フロントエンド開発では、<iframe> 埋め込みページと親ページ (つまり、<iframe> を含むページ) の間にクロスドメインの問題が発生します。 「ソース」とも呼ばれます）は異なります。 <p></p>ドメインは、https://example.com:8080 のように、プロトコル、ホスト名、ポート番号で構成されます。埋め込まれたページのドメインが親ページとは異なる場合、クロスドメインの問題が発生します。これは、悪意のあるスクリプト攻撃を防ぐために、ブラウザーがセキュリティ上の理由からクロスドメイン スクリプトの実行を制限しているためです。 <p></p>クロスドメインの問題を解決するには、次の方法で <iframe> のドメインを設定できます: <p></p> <ol style="margin-bottom: 16px; padding-left: 2em;">サンドボックス属性を使用します: サンドボックス属性は次のとおりです。ページの <iframe> 機能のインラインを制限するために使用され、それによってセキュリティ リスクが軽減されます。同時に、<iframe> のドメインの設定にも使用できます。例: <li> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><iframe src="https://example.com" sandbox="allow-same-origin">ログイン後にコピー ここでは、 のドメインが親ページと同じになるように設定されています。つまり、親ページと同じドメインに属するリソースのみが許可されます。ロードされる。 <p></p> <ol start="2" style="margin-bottom: 16px; padding-left: 2em;">埋め込みページに document.domain を設定する: 埋め込みページと親ページのメイン ドメイン名が同じ場合、両方に document.domain を設定することでクロスドメイン制限を解除できます。ページ。例: <li> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 父页面 --> <script> document.domain = 'example.com'; </script> <iframe src="https://sub.example.com">ログイン後にコピー document.domain = 'example.com'; ログイン後にコピー postMessage API を使用する: postMessage API を使用して、ウィンドウ間でメッセージを渡し、クロスドメイン通信を実現できます。安全なクロスドメイン通信は、親ページと埋め込みページで window.postMessage() メソッドを使用してそれぞれメッセージを送受信することで実現できます。 他のドメインからのコンテンツを埋め込むために を使用することは、セキュリティの脆弱性やパフォーマンスの問題を引き起こす可能性があるため、必要な場合を除いて推奨されないことに注意してください。 <p></p></article></div></div>
