IFrame에 액세스할 때 내 JavaScript 코드에 'SecurityError: Blocked a Frame with Origin...' 오류가 발생하는 이유는 무엇입니까?

차단된 교차 원본 프레임 액세스: 보안 오류 이해

웹 개발에서 iframe 내의 요소에 액세스하려고 할 때 상위 문서와 출처가 다르면 개발자에게 다음 오류가 발생할 수 있습니다.

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

이 오류 이는 웹 브라우저에서 구현하는 동일 출처 정책으로 인해 발생합니다.

동일 출처 정책

동일 출처 정책은 스크립트가 다음을 사용하는 웹사이트의 리소스에 액세스하는 것을 제한합니다. 잠재적인 보안 취약점을 방지하기 위해 다른 출처를 사용합니다. 오리진은 URL의 프로토콜, 호스트 이름 및 포트의 조합을 나타냅니다.

다음 예를 고려하세요.

• http://www.example.com/home /index.html은 http://www.example.com/home/other.html 내의 리소스에 액세스할 수 있으며 http://www.example.com:80.
• https://google.com/search?q=james bond는 http://www.example.com/home/index.html.

해결 방법 교차 원본 프레임 액세스

교차 원본 프레임에 대한 JavaScript 직접 액세스는 금지되어 있지만 데이터 교환을 위한 해결 방법은 있습니다:

• window.postMessage (): 서로 다른 두 창 사이에 제어된 메시지 전달을 허용합니다. Origins.
• postMessage() iframe의 리스너: 상위 문서에서 보낸 메시지를 수신합니다.

// In the main page:
frame.contentWindow.postMessage('message', 'https://your-second-site.example');

// In the iframe:
window.addEventListener('message', (event) => {
  if (event.origin === 'https://your-first-site.example') {
    console.log(event.data); // Received message
  }
});

동일 비활성화- 원산지 정책(주의)

비활성화 동일 출처 정책은 개발 목적으로 수행할 수 있지만 심각한 보안 위험을 초래하므로 프로덕션 환경에서는 사용해서는 안 됩니다. 다음은 다양한 브라우저에서 정책을 비활성화하기 위한 리소스 링크입니다.

[Google Chrome](https://stackoverflow.com/questions/26982875/how-to-disable-same-origin-policy) )
• [모질라 Firefox](https://superuser.com/questions/287723/temporarily-disable-same-origin-policy-in-firefox)
• [Safari](https://apple.stackexchange.com/questions) /211467/how-to-disable-same-origin-policy-in-safari)

위 내용은 IFrame에 액세스할 때 내 JavaScript 코드에 'SecurityError: Blocked a Frame with Origin...' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!