브라우저는 인증 정보로 사용될 수 있는 쿠키를 브라우저 내부에 보관한다. 그리고 이용자가 웹 서비스에 접속할 때, 브라우저는 해당 웹 서비스에서 사용하는 인증 정보인 쿠키를 HTTP 요청에 포함시켜 전달한다. 이와 같은 특징은 사이트에 직접 접속하는 것에만 한정되지 않는다. 브라우저는 웹 리소스를 통해 간접적으로 타 사이트에 접근할 때도 인증 정보인 쿠키를 함께 전송하는 특징을 가지고 있다.
이 특징 때문에 악의적인 페이지가 클라이언트의 권한을 이용해 대상 사이트에 HTTP 요청을 보내고, HTTP 응답 정보를 획득하는 코드를 실행할 수 있다. 이는 정보 유출과 같은 보안 위협이 생길 수 있는 요소가 된다. 따라서, 클라이언트 입장에서는 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 해야한다. 이것이 바로 브라우저의 보안 메커니즘인 동일 출처 정책(Same Origin Policy, SOP)이다.
1) Same Origin Policy의 Origin 구분 방법
먼저 오리진(Origin)은 프로토콜, 포트, 호스트로 구성된다. 구성 요소가 모두 일치해야 동일한 오리진이다. https://same-origin.com/라는 오리진과 아래URL을 비교했을 때 결과를 보면 이해할 수 있다.
2) Same Origin Policy 실습
① 먼저 해커툰 사이트(https://dreamhack.io)에 접속 후 개발자 도구를 실행한다.
② 아래의 소스를 한 줄씩 Console에서 실행한다. Same Origin
sameNewWindow = window.open('<https://dreamhack.io/lecture>');
console.log(sameNewWindow.location.href);
//결과: <https://dreamhack.io/lecture>
Cross Origin
crossNewWindow = window.open('<https://theori.io>');
console.log(crossNewWindow.location.href);
//결과: Origin 오류 발생
위와 같이 외부 출처에서 불러온 데이터를 읽으려고 할 때는 오류가 발생해 읽지 못한다. 하지만 읽는 것 외에 데이터를 쓰는 것은 문제 없이 동작한다. 즉, 아래와 같은 코드는 오류가 발생하지 않는다.
crossNewWindow = window.open('<https://theori.io>');
crossNewWindow.location.href = "<https://dreamhack.io>";
SOP는 클라이언트 사이드 웹 보안에서 중요한 요소이다. 하지만, 브라우저가 이러한 SOP에 구애 받지 않고 외부 출처에 대한 접근을 허용해주는 경우가 존재한다. 예를 들면, 이미지나 자바스크립트, CSS 등의 리소스를 불러오는 <img>, <style>, <script> 등의 태그는 SOP의 영향을 받지 않는다.
위 경우들 외에도 웹 서비스에서 동일 출처 정책인 SOP를 완화하여 다른 출처의 데이터를 처리해야하는 경우도 있다. 예를 들어 특정 포털 사이트에서 카페, 블로그, 메일 서비스 등을 운영하는데 전부 Host가 다르다고 가정하자. 이 경우 각 사이트별로 리소스 공유를 하는 경우가 발생하는데 오리진이 다르므로 SOP를 적용받아 공유가 안된다. 이와 같은 상황에서 자원을 공유하기 위해 사용할 수 있는 방법이 교차 출처 리소스 공유(Cross Origin Resource Sharing, CORS)이다.
교차 출처의 자원을 공유하는 방법은 CORS와 관련된 HTTP 헤더를 추가하여 전송하는 방법을 사용한다. 이 외에도 JSON with Padding (JSONP) 방법을 통해 CORS를 대체할 수 있다.