Same Origin Policy

Same Origin Policy (SOP)

• 클라이언트 입장에서, 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 하는 브라우저 보안 메커니즘인 동일 출처 정책이다.
• 동일 출처 정책, 현재 페이지의 출처가 아닌 다른 출처로부터 온 데이터를 읽지 못하게 하는 브라우저의 보안 메커니즘.
• Same Origin : 현재 페이지와 동일한 출처 / Cross Origin : 현재 페이지와 다른 출처

 

SOP의 오리진(Origin) 구분 방법

• 오리진은 프로토콜(Protocol, Scheme), 포트, 호스트로 구성되는데 이 구성 요소가 모두 일치해야 동일한 오리진이라고 할 수 있습니다.
• SOP는 Cross Origin이 아닌 Same Origin일 때만 정보를 읽을 수 있도록 해준다.

 

간단한 코드 설명

• Window.open() : 새로운 창을 띄우는 함수
• Object.location.href : 객체가 가리키고 있는 URL 주소를 읽어오는 코드
• <iframe src=“” id=“my-frame”></iframe> : 현재 웹 페이지 안에 또 다른 하나의 웹 페이지를 삽입하는 HTML 태그다. Src 요소를 설정함으로써 삽입할 웹 페이지의 주소가 결정된다.
• 객체.onload : 이벤트 핸들러로써, 해당 객체가 성공적으로 로드되었을 때 동작한다.

 

SOP Origin Policy 제한 완화

• 이미지나 자바스크립트, CSS 등의 리소스를 불러오는 <img>, <style>, <script> 등의 태그는 SOP의 영향을 받지 않는다.
• 이외에도 웹 서비스에서 동일 출처 정책인 SOP를 완화하여 다른 출처의 데이터를 처리 해야 하는 경우도 있다.

 

교차 출처 리소스 공유 (Cross Origin Resource Sharing, CORS)

• HTTP 헤더에 기반하여 Cross Origin 간에 리소스를 공유하는 방법이다.
• 발신측에서 CORS 헤더를 설정해 요청하면, 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정한다.
• 오리진이 다를 때 SOP의 제한을 받지 않고 리소스를 공유할 수 있는 방법으로 Cross Origin의 데이터를 처리할 수 있도록 해주는 메커니즘이다. 
• 교차 출처의 자원을 공유하는 방법은 CORS와 관련된 HTTP 헤더를 추가하여 전송하는 방법을 사용한다. 이 외에도 JSON with Padding(JSONP) 방법을 통해 CORS를 대체할 수 있다.

Header	설명
Access-Control-Allow-Origin	헤더 값에 해당하는 Origin에서 들어오는 요청만 처리합니다.
Access-Control-Allow-Methods	헤더 값에 해당하는 메소드의 요청만 처리합니다.
Access-Control-Allow-Credentials	쿠키 사용 여부를 판단합니다. 예시의 경우 쿠키의 사용을 허용합니다.
Access-Control-Allow-Headers	헤더 값에 해당하는 헤더의 사용 가능 여부를 나타냅니다.