[Web] Same Origin Policy

Same Origin Policy

악의적인 페이지가 클라이언트의 권한을 이용해 대상 사이트에 HTTP 요청을 보내고, HTTP 응답 정보를 획득 하는 코드를 실행할 수 있다.

→ 클라이언트 입장에서는 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 해야한다.

→ 동일 출처 정책 (Same Origin Policy) : Same Origin일 때만 정보를 읽을 수 있다.

 

구분 방법

https://abcd.com/
https://abcd.com/first.html	Same Origin	Path만 다름
http://abcd.com/first.html	Cross Origin	Scheme 다름
https://same.abcd.com/first.html	Cross Origin	Host 다름
https://abcd.com:1234/	Cross Origin	Port 다름

 

SOP는 클라이언트 측 웹 보안에서 중요한 요소이나, 브라우저가 이에 구애받지 않고 외부 출처에 대한 접근을 허용해주는 경우가 존재한다.

1. 이미지나 자바스크립트, CSS등의 리소스를 불러오는 <img> <style> <script>등의 태그는 영향을 받지 않는다.
2. 웹 서비스에서 동일 출처 정책인 SOP를 완화하여 다른 출처의 데이터를 처리하는 경우
   특정 포털의 카페, 블로그, 메일 서비스등 Host가 다르면 Origin이 다르다고 인식한다.
   → 사용자가 리소스를 사용하기 위해서는 교차 출처 리소스 공유 (Cross Origin Resource Sharing, CORS)가 사용된다.

---

Cross Origin Resource Sharing (CORS)

HTTP 헤더에 기반하여 Cross Origin 간에 리소스를 공유하는 방법이다.

발신측에서 CORS 헤더를 설정해 요청하면, 수신측에서 헤더를 구분에 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정한다.

 

JSON with Padding (JSONP)

이미지나 자바스크립트, CSS 등의 리소스는 SOP에 구애 받지 않고 외부 출처에 대해 접근을 허용한다.

이러한 특징을 이용해 <scrip> Cross Origin의 데이터를 불러온다.

<scrip> 내에서는 데이터를 자바스크립트의 코드로 인식하기 때문에 Callback 함수를 이용해야한다.
→ Cross Origin에 요청할 때 callback 파라미터에 어떤 함수로 받아오는 데이터를 핸들링할지 넘겨주면, 대상 서버는 전달된 callback으로 데이터를 감싸 응답한다.