동일 출처 정책 수수께끼: 교차 출처 프레임에 대한 액세스 거부 JavaScript를 사용하면 두려운 "SecurityError: 원본이 있는 프레임이 원본 간 프레임에 액세스하지 못하도록 차단했습니다." 오류가 발생할 수 있습니다. 이는 원본(프로토콜, 호스트 이름 및 포트)을 기준으로 리소스를 격리하는 중요한 보안 조치인 동일 원본 정책의 직접적인 결과입니다.</p> <p><h3>동일 원본 정책이란 무엇입니까? </p> <p>동일 출처 정책은 스크립트가 다른 출처의 콘텐츠에 액세스하는 것을 방지합니다. 다음 URL 구성 요소 중 하나라도 다를 경우 원본은 다른 것으로 간주됩니다.</p> <ul> <li>프로토콜(예: http 및 https)</li> <li>호스트 이름(예: www.example.com 및 data. example.com)</li> <li>포트(예: 80 대 2251)</li> </ul> <p><h3>불쾌한 제한</h3></p> <p>이 정책은 스크립트가 외부 웹사이트의 콘텐츠와 상호 작용하는 것을 효과적으로 차단합니다. 예를 들어, 기본 페이지가 http://www.example.com에서 로드되고 <iframe> https://www.example.com에서 로드하면 보안 오류가 발생합니다.</p> <p><h3>해결 방법: Cross-Origin Communication</h3></p> <p>직접 액세스할 수는 없지만 JavaScript를 사용하는 교차 출처 프레임의 경우 window.postMessage 및 해당 메시지 이벤트를 활용하여 페이지 간 통신을 설정할 수 있습니다. 간략한 개요는 다음과 같습니다.</p> <ol> <li> <strong>기본 페이지에서:</strong> postMessage를 사용하여 원본이 일치하는 iframe으로 데이터를 보냅니다.</li> <li> <strong>iframe에서 :</strong> 메시지 이벤트를 수신하고 원본이 예상과 일치하는 경우에만 데이터를 처리합니다. value.</li> </ol> <p><h3>동일 출처 정책 비활성화(주의 필요)</h3></p> <p>특정 브라우저에서는 동일 출처 정책을 비활성화할 수 있지만, 이는 보안 위험으로 간주되어야 하며 개발 목적으로만 수행되어야 합니다. 정책을 비활성화하면 교차 출처 리소스에 대한 무제한 액세스가 허용되어 잠재적으로 브라우저가 보안 취약성에 노출될 수 있다는 점을 기억하세요.</p>
