SOP, CORS 개념

SOP, CORS에 대해서 알아보기에 앞서 간단하게 이 출처(Origin) 라는 것이 정확히 뭘 의미하는지부터 한번 짚고 넘어가도록 해야 합니다.

 

# Origin

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin

Origin - HTTP | MDN

fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. 

즉, Protocol + Host + Port를 합친 것을 말합니다.

출처 비교

만약 현재 페이지가 https://jinnify.tistory.com 일때 Origin(출처)이 동일하면 Same Origin, 동일하지 않다면 Cross Origin

URL	Same Origin / Cross Origin	이유
https://jinnify.tistory.com/test	O	Protocal, Host, Port 동일
https://jinnify.tistory.com/test?id=1	O	Protocal, Host, Port 동일
https://jinnify.tistory.com/test#work	O	Protocal, Host, Port 동일
http://jinnify.tistory.com	X	Protocal 다름
https://jinnify.ttttt.com	X	Host 다름
https://jinnify.tistory.com:8888	X	Port 다름

💡 출처를 비교하는 로직은 서버가 아닌 브라우저의 스펙으로 브라우저에서 비교와 차단을 한다.

 

 

# Same Origin? Cross Origin?

웹에서는 다른 출처의 리소스 요청을 제한하는 것에 대해 2가지 정책이 존재한다.

 

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

Protocol, Host, Port가 일치하지 않는 것과 상호작용 하지 못하도록 요청 발생을 제한하고, Same Origin만 접근이 가능하도록 하는 정책.

즉, 동일 출처 서버에 있는 리소스는 자유롭게 가져올수 있다.

 

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

SOP에 의거해 다른 Origin의 리소스를 사용하거나 상호작용을 하지 못하도록 막는것을 말하며, CORS를 이용해 접근을 허용하도록 설정하는 것이다. 즉, 출처가 다른 리소스를 접근할 때 HTTP 헤더를 사용하여 권한을 부여하도록 브라우저에 알려주는 체제다.

 

CORS의 기본 동작

1. 기본적으로 클라이언트 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보내게 된다.
2. 이후 서버가 응답헤더에 Access-Control-Allow-Origin이라는 필드에 허용된 URL을 담아서 내려 보내준다.
3. 이후 브라우저는 클라이언트에서 보내준 Origin과 서버에서 보내준 Access-Control-Allow-Origin을 비교하여 차단할지 말지 결정을 하게 된다. (유효하지 않다면 CORS에러)

 

# 참고

• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
• https://www.youtube.com/watch?v=-2TgkKYmJt4