[web] SOP/ CORS

CORS가 무엇인지 알기 전에 먼저 SOP에대해서 알아보자

🤔 SOP란 ?

⚡️SOP(same-origin-policy) 동일 출처 정책은 WEB App이 같은 출처에서만 자원을 공유하는것을 원칙으로 하고 있다. 즉, 어떠한 출처에서 불러온 자원(문서, 스크립트)은 다른 출처에서 가져온 자원과 상호작용을 못하게 제한한다는 것이다.

"같은 출처에서만 자원을 공유해라!" - SOP

🕹 why? 보안상의 이유때문이다.

출처가 다른 App들이 마음대로 소통할 수 있는 환경은 매우 매우 매우 매우 위험한 환경이다. 사용자가 나쁜 마음을 먹는다면 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting) 등을 사용해서 필요한 정보를 손쉽게 탈취할 수 있기 때문이다.

🕹 Origin(출처)란 ?

출처는 URL 구조중 ⚡️scheme, ⚡️host, ⚡️port 이 3가지만 잘 보면 된다! (아주쉬움!)

http://www.amusesla.com:8000

scheme	: https://
host	: www.amusesla.com
port	: 8000

포트의 경우 나타나지 않을 수 있으며 따로 확인해주어야함!

CORS(Cross-Origin Resource Sharing)

하지만 서비스를 제공하는 사람과 그 서비스를 사용하는 입장에서는 같은 출처에서만 자원을 공유한다는것은 매우 슬픈이야기다..😭

그래서 추가 HTTP header를 사용해 브라우저에게 다른 출처에 자원에 접속할 수 있게 권한을 받도록 하는 방법이 바로 CORS이다!

🕹 어떻게 작동하나 ?

브라우저가 request를 보낼때 Origin에 출처를 담아 보내게 되고 서버쪽에서는 응답을 할때 Acess-Control-Allow-Origin 필드에 자원에 접근 하는것이 허용된 출처라고 표시후 response를 보내면 브라우저가 origin과 Access-Contorl Allow Origin을 비교 분석후 response가 유효한지 결정한다.

브라우저에서 응답의 유효성을 판단하는 점때문에 서비끼리와의 통신에서는 적용되지않는다

공부할 시나리오

1. Preflight Request
2. Simple Request
3. Credentialed Request