프런트엔드 개발에서는 의 삽입된 페이지와 상위 페이지 사이에 도메인 간 문제가 있습니다. 도메인은 프로토콜, 호스트 이름, 포트 번호로 구성됩니다. 예: "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><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>
