Iframe을 사용할 때 'SecurityError: Blocked Cross-Origin Access'를 극복하는 방법은 무엇입니까?

보안 오류: 교차 원본 액세스 차단

iframe을 HTML 페이지에 통합하고 JavaScript를 사용하여 해당 요소에 액세스하려고 하면 다음 오류가 발생할 수 있습니다.

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.

이 오류는 브라우저가 동일 출처 정책을 준수하기 때문에 발생합니다. 원본이 다른 프레임에 액세스하는 스크립트입니다. 원본에는 프로토콜, 호스트 이름 및 포트가 포함됩니다.

해결 방법

직접 원본 간 스크립트 액세스는 금지되어 있지만 window.postMessage 및 해당 메시지 이벤트를 활용하여 원본 간의 통신을 설정할 수 있습니다. 프레임:

메인 페이지:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe:

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

이 접근 방식을 사용하면 프레임 간의 양방향 통신이 가능합니다. 교차 출처 메시지 전달은 메인 페이지에서 생성된 팝업 및 기타 새 창에도 적용될 수 있습니다.

위 내용은 Iframe을 사용할 때 'SecurityError: Blocked Cross-Origin Access'를 극복하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!