동일 출처 정책(Same Origin Policy)

공부 사이트: dreamhack web

거의 클라이언트 사이드 공격은 SOP을 우회하기 위한 것

 

SOP의 Origin 구분 방법

Origin = Protocol(Scheme) + Port + Host

 

Ex

Origin: https://so106037.tistory.com/manage/newpost

URL 1:  http://so106037.tistory.com/manage/newpost 

• [Scheme가 다르다.]

URL 2:  https://hihi.so106037.tistory.com/manage/newpost 

• [Host가 다르다.]

URL 3:  https://so106037.tistory.com:9999 

• [Port가 다르다.]

 

SOP는 CrossOrigin이 아닌 SameOrigin일 때만 정보를 읽을 수 있도록 한다.

• SameOrigin: 현재 페이지와 동일한 출처
• CrossOrigin: 현재 페이지와 다른 출처

외부 출처에서 불러온 데이터를 읽으려고 할 때는 오류가 발생하여 읽을 수 없음.

그러나 읽는 것이 아닌, 데이터를 쓰는 것은 동작한다.

 

 

그런데 SOP의 영향을 받지 않는 태그가 있다?!

<img> <style> <script>

외에도 SOP을 완화하여 다른 출처의 데이터를 처리해야 하는 경우가 존재함

• 특정 포털 사이트가 카페/블로그/메일 서비스를 다음과 같이 운영하는 경우
  • https://cafe.naver.com
  • https://blog.naver.com
  • https://mail.naver.com
  • https://naver.com

host가 다르기 때문에 Origin이 다르다고 인식함.

이 때 다른 호스트의 주소의 데이터를 메인 페이지(naver.com)에서 처리하려는 경우...

개발자는 메인 페이지에서 타 호스트의 주소에 관련된 리소스를 요청하도록 해야함.

SOP 적용받지 않고 리소스 공유.

 

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

CORS와 관련된 HTTP 헤더를 추가하여 전송하는 방법 사용.

 

이 외에도 JSONP(JSON with Padding) 방법 존재함.

---

CORS

• HTTP 헤더에 기반하여 Cross Origin 간 리소스를 공유하는 방법이다.
• 발신측에서 CORS 헤더를 설정 후 요청하는 방식
• 그럼 수신 측에서 헤더를 구분하여 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 함.

JSONP

• img, js, css 등의 리소스는 SOP에 구해받지 않고 외부 출처에 대한 접근을 허용한다는 특징을 이용
• <script> 태그로 Cross Origin의 데이터를 불러오는 방식
• Callback 함수를 이용해야 함. <script> 태그 내에서는 데이터를 js 코드로 인식하기 때문.
• CrossOrigin에 요청 시 callback 파라미터에 "받아오는 데이터를 어떤 함수로 핸들링 할 것인지" 를 인자로 넘겨준다.
• 그럼 대상 서버가 전달된 Callback 으로 데이터를 감싸서 응답.
• https://URL~?callback=myCallback
• 그러나 CORS 이전에 생긴 것. 이제는 CORS를 쓴다.