보안 오류: 차단된 교차 출처 프레임 액세스 JavaScript를 사용하여 다른 출처에서 가져온 경우 다음 오류가 발생할 수 있습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 오류는 브라우저가 시행하는 기본 보안 조치인 동일 출처 정책의 결과입니다.</p> <p><h3> ;동일 출처 정책과 그 의미</h3></p> <p>동일 출처 정책은 스크립트가 다른 출처를 가진 리소스(예: 다른 페이지 또는 프레임)에 액세스합니다. 원본은 프로토콜(예: HTTP), 호스트 이름, URL 포트로 정의됩니다. 이러한 구성 요소의 차이는 별도의 출처를 구성합니다.</p> <p>예를 들어 "http://www.example.com"의 스크립트는 "https://www.example.com"의 리소스에 액세스할 수 없습니다. , "http://www.anothersite.com" 또는 "http://www.example.com:81".</p> <p><h3>교차 원본 프레임 액세스: A 해결 방법</h3></p> <p>교차 원본 프레임에 대한 직접 스크립트 액세스는 차단되지만 window.postMessage 및 이벤트 리스너를 사용하는 해결 방법이 있습니다. 이 접근 방식을 사용하면 기본 페이지와 프레임 간에 데이터를 교환할 수 있습니다:</p> <p><strong>기본 페이지:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*variable or object*/, 'https://your-second-site.example');</pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong><iframe> 페이지:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>window.addEventListener('message', event => { // Check the origin of the data if (event.origin === 'https://your-first-site.example') { // Data is from the main page, use event.data to process it } });</pre><div class="contentsignin">로그인 후 복사</div></div> <p>동일 출처 정책은 보안에 매우 중요하다는 점을 기억하세요. 특정 사이트 또는 전 세계적으로 브라우저에서 비활성화하는 것은 개발 목적으로만 극도의 주의를 기울여 수행해야 합니다.</p>
