[네트워크] SOP, CORS

SOP와 CORS란?

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

동일 출처 정책은 어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘이다. 인터넷의 악의적인 웹사이트가 브라우저에서 JS를 실행하여 데이터를 읽고 공격자에게 전달하는 것을 방지한다.

출처(Origin)이란?

프로토콜, 포트(명시된 경우), 호스트가 같은 경우 두 URL은 동일한 출처를 가진다.

만약 http://example.com/dir/page.html이라는 URL가 있다면

URL	결과	이유
http://example.com/dir2/page.html	동일 출처	경로만 다름
https://example.com/dir/page.html	실패	다른 프로토콜
https://example.com:81/dir/page.html	실패	http:// 는 기본적으로 80 포트기 때문에 포트가 다름
http://secondexample.com/dir/page.html	실패	다른 호스트

 

위 표와 같은 결과가 나올 수 있다. 결론은 프로토콜, 포트, 호스트가 하나라도 다르면 동일 출처가 아님에 따라 상호 작용이 제한된다.

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

CORS (교차 출처 리소스 공유)는 HTTP 헤더를 사용하여 하나의 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처(Origin)의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. SOP(Same-Origin Policy)에 따라 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

ex) https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우. (호스트가 다름)

 

1. HTTP로 다른 출처(Origin)의 API를 호출한다.

2. HTTP 요청에 응답을 주면서 HTTP 헤더에 Request Origin(요청을 처리해 줄 수 있는 출처)를 명시한다.

ex)

Access-Control-Allow-Origin: secondexample.com 

Access-Control-Allow-Origin: *

 

secondexample.com에 의해서 로딩된 자바스크립트 클라이언트 요청에 대해서만 요청해준다.

*는 Request Origin에 관계없이 사이트에서 로딩된 자바스크립트 요청에 대해서 처리해준다.

 

이미지 출처: https://techannotation.wordpress.com/2013/09/30/5-minutes-with-cross-origin-resource-sharing-cors/

 

---

 

참고한 문서

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

https://velog.io/@jesop/SOP%EC%99%80-CORS

https://hudi.blog/sop-and-cors/