동일 출처 정책
JavaScript를 사용하여 다른 출처로 액세스 할 수 는 없습니다. 가능한 <iframe>경우 큰 보안 결함이 될 수 있습니다. 를 들어 동일 출처 정책 브라우저는 스크립트를 다른 원점 프레임에 액세스하려고 차단 .
주소의 다음 부분 중 하나 이상이 유지되지 않으면 출발지가 다른 것으로 간주됩니다.
<protocol>://<hostname>:<port>/...
프레임에 액세스하려면 프로토콜 , 호스트 이름 및 포트 가 도메인과 같아야합니다.
참고 : Internet Explorer는이 규칙을 엄격하게 따르지 않는 것으로 알려져 있습니다 . 자세한 내용 은 여기 를 참조하십시오.
예
다음에서 다음 URL에 액세스하려고하면 어떻게됩니까? http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
해결 방법
동일한 출처 정책으로 인해 스크립트가 다른 출처를 가진 사이트의 컨텐츠에 액세스하는 것을 차단하더라도 두 페이지를 모두 소유 한 경우 다음window.postMessagemessage 과 같이 두 페이지간에 메시지를 보내기 위해 관련 이벤트 를 사용하여이 문제를 해결할 수 있습니다 .
메인 페이지에서 :
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
두 번째 인수는 할 postMessage()수 있습니다 '*'대상의 기원에 대한 더 선호를 나타 내기 위해. 다른 사이트로 보내는 데이터를 공개하지 않으려면 가능한 한 항상 목표 출처를 제공해야합니다.
귀하의 <iframe>(메인 페이지에 포함) :
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
이 메소드는 양방향으로 적용되어 메인 페이지에도 리스너를 생성하고 프레임에서 응답을 수신 할 수 있습니다 . 동일한 논리를 팝업과 기본적으로 메인 페이지에 의해 생성 된 (예 :를 사용하여 window.open()) 새 창에서도 구현할 수 있습니다 .
에 동일 출처 정책을 비활성화 하여 브라우저
이미이 주제에 대한 좋은 답변이 있습니다 (방금 찾은 인터넷 검색).이 가능한 브라우저의 경우 상대 답변을 연결합니다. 그러나 기억하십시오 동일 출처 정책을 해제하는 경우에만 영향을 미칠 것이다 당신의 브라우저를 . 또한 동일한 출처 보안 설정을 사용하지 않는 브라우저를 실행하면 모든 웹 사이트에 출처 간 리소스에 대한 액세스 권한이 부여 되므로 매우 안전하지 않으므로 수행중인 작업을 정확히 모르는 경우 (예 : 개발 목적) 수행해서는 안됩니다 .
Access-Control-Allow-Origin가 iHRcanvas.drawImage에만 적용되지 않으며 XHR, Fonts, WebGL 및 에만 적용 된다는 것을 나타 냅니다. 나는postMessage유일한 옵션 이라고 생각 합니다.