在前端开发中，内嵌的页面与父页面存在跨域问题，域是由协议、主机名和端口号组成的，例如如“https://example.com:8080”，如果内嵌的页面与父页面的域不同，那么就会遇到跨域问题，这是因为浏览器出于安全考虑，限制了跨域脚本的执行，以防止恶意脚本攻击。</p></blockquote> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202311/27/2023112711344560636.jpg" class="lazy" alt="iframe的域是什么" ></p> <p>本教程操作系统：Windows 10系统、Dell G3电脑。</p> <div id="chat-messages"><div><article><p>在前端开发中，<iframe> 内嵌的页面与父页面（即包含 <iframe> 的页面）存在跨域问题，因为它们的域（也称为“来源”）不同。</p> <p>域是由协议、主机名和端口号组成的，例如 https://example.com:8080。如果内嵌的页面与父页面的域不同，那么就会遇到跨域问题。这是因为浏览器出于安全考虑，限制了跨域脚本的执行，以防止恶意脚本攻击。</p> <p>为了解决跨域问题，可以通过以下方法来设置 <iframe> 的域：</p> <ol style="margin-bottom: 16px; padding-left: 2em;"><li>使用 sandbox 属性：sandbox 属性可以用来限制 <iframe> 内嵌页面的功能，从而降低其安全风险。同时，它还可以用来设置 <iframe> 的域。例如：</li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><iframe src="https://example.com" sandbox="allow-same-origin">登录后复制 这里将 的域设置为与父页面相同，即只允许加载与父页面属于同一域的资源。</p> <ol start="2" style="margin-bottom: 16px; padding-left: 2em;"><li>在内嵌页面中设置 document.domain：如果内嵌页面和父页面的主域名相同，可以通过在两个页面中都设置 document.domain 来解除跨域限制。例如：</li></ol> <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></article></div></div>
