In front-end development, there are cross-domain problems between the embedded page of and the parent page. The domain is composed of protocol, host name and port number, for example, "https://example.com: 8080", if the domain of the embedded page is different from that of the parent page, you will encounter cross-domain problems. This is because the browser limits the execution of cross-domain scripts for security reasons to prevent malicious script attacks. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202311/27/2023112711344560636.jpg" alt="What is the domain of iframe" ></p> <p># Operating system for this tutorial: Windows 10 system, Dell G3 computer. </p> <div id="chat-messages"><div><article>##In front-end development, there are cross-domain problems between <iframe> embedded pages and parent pages (that is, pages containing <iframe>) because their domains (also called "source") are different. <p></p>The domain is composed of protocol, host name and port number, such as https://example.com:8080. If the embedded page has a different domain than the parent page, you will encounter cross-domain problems. This is because browsers restrict the execution of cross-domain scripts for security reasons to prevent malicious script attacks. <p></p>In order to solve the cross-domain problem, you can set the domain of <iframe> through the following methods: <p></p> <ol style="margin-bottom: 16px; padding-left: 2em;">Use the sandbox attribute: The sandbox attribute can be used to limit the inline of <iframe> functionality of the page, thereby reducing its security risks. At the same time, it can also be used to set the domain of <iframe>. For example: <li> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><iframe src="https://example.com" sandbox="allow-same-origin">Copy after login Here, the domain of is set to be the same as the parent page, that is, only resources belonging to the same domain as the parent page are allowed to be loaded. <p></p> <ol start="2" style="margin-bottom: 16px; padding-left: 2em;">Set document.domain in the embedded page: If the main domain name of the embedded page and the parent page are the same, you can lift the cross-domain restriction by setting document.domain in both pages. For example: <li> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 父页面 --> <script> document.domain = 'example.com'; </script> <iframe src="https://sub.example.com">Copy after login document.domain = 'example.com'; Copy after login Use postMessage API: postMessage API can be used to pass messages between windows to achieve cross-domain communication. Secure cross-domain communication can be achieved by using the window.postMessage() method in the parent page and the embedded page to send and receive messages respectively. It should be noted that unless necessary, it is not recommended to use to embed content from other domains, as this may introduce security vulnerabilities and performance issues. <p></p></article></div></div>
