https://eunjinii.tistory.com/42
동일 출처 정책(SOP)이 무엇인가요? 크로스 오리진이 금지되는 경우와 허용되는 경우 정리
1. 동일 출처 정책(Same-Origin Policy) 동일 출처 정책이란, 자바스크립트 같은 클라이언트 스크립트에서 사이트의 특정 자원에 대한 접근을 금지하는 보안상의 제한이자, 브라우저의 샌드박스에 포
eunjinii.tistory.com
2. SOP가 적용되어 크로스 도메인이 불가한 경우
2-1. 도큐먼트 내에서 데이터를 다른 origin으로부터 받아옴
https://www.eunjinii.com를 접속하여 도큐먼트를 받아왔을 때, 도큐먼트에 다음과 같은 코드가 작성돼 있다고 가정해보자.
const req = new XMLHttpRequest();
req.open("GET", "https://api.eunjinii.com/income");이 코드에서는 https://api.eunjinii.com/income에서 JSON 데이터를 받아오게 되는데, 이런 경우에 SOP가 적용이 돼서 오리진이 다르기 때문에 JSON 데이터를 읽어올 수 없다. write는 가능하지만 read 할 때는 cross-origin이면 preflight을 제외하고는 불가능하다.
2-2. 다른 origin인 url의 팝업창을 띄움
window.open('https://popup.eunjinii.com/picture');그러면 해당 팝업에도 새로운 도큐먼트가 있을 것이다. 새로운 도큐먼트의 origin과 기존 도큐먼트의 origin을 비교했을 때 다르기 때문에 서로 간의 도큐먼트에 접근할 수가 없다.
2-3. iframe 내에서 document를 불러옴
<iframe src="https://iframe.eunjinii.com"></iframe>iframe에도 SOP가 적용이 된다. iframe 내부와 외부 사이에서 서로 참조를 할 수가 없다.
2-4. 브라우저의 데이터베이스에 접근
웹에서 로컬스토리지나 세션 같은 자체 디비가 있는데, 이 디비는 origin별로 생성이 되고, same origin을 갖는 document나 스크립트만 접근이 가능하다.