Web Background - SOP, CORS

• SOP (Same Origin Policy, 동일 출처 정책)

SOP는 브라우저의 보안 메커니즘으로, 클라이언트 입장에서 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 함

 

브라우저는 인증 정보로 사용될 수 있는 쿠키를 브라우저 내부에 보관하는데 이용자가 웹 서비스에 접속할 때, 브라우저는 해당 웹 서비스에서 사용하는 쿠키를 HTTP 요청에 포함시켜 전달함

즉, 브라우저는 웹 리소스를 통해 간접적으로 타 사이트에 접근할 때도 인증 정보인 쿠키를 함께 전송하는 특징을 가짐

 

이 특징 때문에 악의적인 페이지가 클라이언트의 권한을 이요할 경우 정보 유출과 같은 보안 위협이 생길 수 있는 요소가 됨

 

• SOP의 Origin 구분 방법

Origin은 브라우저가 가져온 정보의 출처를 의미함

Origin은 Protocol(Scheme), Port, Host로 구성되어 있고 구성 요소가 모두 일치해야 동일한 Origin이 됨

 

SOP는 Cross Origin이 아닌 Same Origin일 때만 정보를 읽을 수 있도록 해줌

 

그러나, 브라우저가 SOP에 구애 받지 않고 외부 출처에 대한 접근을 허용해주는 경우도 존재함

Ex) 이미지 or 자바스크립트, css 등의 리소스를 불러오는 <img>,<style>,<script>등의 태그는 SOP의 영향을 받지 않음

 

이 경우들 외에도 웹 서비스에서 SOP를 완화하여 다른 출처의 데이터를 처리 해야 하는 경우도 있음

Ex) Host가 서로 다른 서비스는 Origin이 다르다고 인식하기 때문에 SOP를 적용받지 않고 리소스를 공유하는 방법이 필요함 이를 CORS로 해결함

 

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

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 부라우저에 알려주는 체제

 

웹 애플리케이션은 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행함

 

추가적으로, 서버 데이터에 side effect(부수 효과)를 일으킬 수 잇는 HTTP 요청 메서드에 대해, CORS 명세는 브라우저 요청을 OPTIONS 메서드로 preflight(사전 전달)하여 지원하는 메서드를 요청하고, 서버의 허가가 떨어지면 실제 요청을 보내도록 요구함

 

1. 웹 리소스 요청 -> 2. 발신측의 HTTP 요청 -> 3. 서버의 응답

 

서버의 응답 결과는 다음과 같음

Header	설명
Access-Control-Allow-Origin	헤더 값에 해당하는 Origin에서 들어오는 요청만 처리함
Access-Control-Allow-Methods	헤더 값에 해당하는 메소드의 요청만 처리함
Access-Control-Allow-Credentials	쿠키 사용 여부를 판단함
Access-Control-Allow-Headers	헤더 값에 해당하는 헤더의 사용 가능 여부를 나타냄

해당 과정을 마치면 브라우저는 수신측의 응답이 발신측의 요청과 상응하는지 확인하고, 그때야 비로소 POST 요청을 보내 수신측의 웹 리소스를 요청하는 HTTP 요청을 보냄

 

• JSON with Padding(JSONP)

JSONP는 <script> 태그를 이용하여 Cross Origin의 데이터를 불러옴

그러나, <script> 태그 내에서는 데이털르 자바스크립트 코드로 인식하기 때문에 Callback 함수를 활용해야 함

 

Cross Origin 요청시 callback 파라미터에 어떤 함수로 받아오는 데이터를 핸들링할지 넘겨주면, 대상 서버는 전달된 Callback으로 데이터를 감싸 응답함

 

 

https://moon-lab.tistory.com/8?category=1013904 

3주차 개념 스터디

(해당 링크를 들어가면 CORS와 Javascript 비동기 기술에 대해 추가적으로 알 수 있음)

 

Ref) https://dreamhack.io/ (dreamhack - Web Hacking)

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS