SOP & CORS

SOP와 CORS는 웹 관련 기술을 표준화 해주는 IETF(Internet Engineering Task Force) 국제 인터넷 표준화 기구에서 SOP와 CORS를 표준으로써 정의하고 있다. 즉, 모든 브라우저에서는 이 표준을 법적으로 지켜야 할 의무가 있다는 의미이다.
결론은 모든 브라우저에서 SOP와 CORS에 대한 오류가 발생 할 수 있다는 의미임. 꼭 배워야 함.
 

SOP ( Same-Origin Policy )

Same Origin Policy는 "동일 출처 정책" 이라는 의미로 해석이 됨.
먼저 SOP를 이해하기 위해서는 Same-Origin Policy에서 Origin을 이해해야 한다.
 
Origin
console.log(location.origin) 명령어를 이용하게 되면 현재 사이트의 Origin(출처)에 대한 사이트가 나오게 된다.

console.log(location.origin); // 현재 사이트의 Origin(출처)를 알아내는 명령어
chrome://new-tab-page // -> 결과

위의 결과는 브라우저에 처음 들어갔을 때 나오는 결과이다. ( 이제 네이버로 들어가 볼 것이다. )

console.log(location.origin)
https://www.naver.com

네이버에 들어가게 되면 현재 사이트인 네이버의 출처를 알 수 있게 된다.
 
"정리하면, Origin(출처)는 단순히 내가 현재 접속하고 있는 서버의 도메인을 의미한다."
 
이제 Origin을 알아 봤으니, SOP를 알아볼 차례이다.
 
SOP(동일 출처 정책)은 동일한 출처에 대해서만 리소스를 공유할 수 있고, 다른 출처에 대해서는 리소스를 공유할 수 없는 정책이며, 출처는 프로토콜, 도메인, 포트 전체가 동일한 경우에만 해당이 된다. 쉽게 말해, "https://test.com:8080" 에서 "https://test.com:8080/user"로 요청을 보냈을 때 프로토콜, 도메인, 포트 전체가 동일하기 때문에 동일한 출처로 볼 수 있다.
 

CORS (Cross-Origin Resource Sharing)

SOP는 동일한 출처 일 경우에만 리소스를 공유할 수 있도록 하지만, 이러한 정책 때문에 다른 출처에 대한 리소스 공유에 대해 불편함이 존재하여 예외 조항을 같이 넣게 된다. 다른 출처의 리소스 요청이라도 이 조항에 해당할 경우에는 허용을 하게 된다. 이것이 CORS 정책을 지킨 리소스 요청이다.
 
CORS는 다른 출처의 리소스 공유에 대한 허용 및 비허용에 대한 정책을 의미한다.
 
보안상으로는 외부 페이지에서 다른 페이지로 강제로 이동시키는 것은 문제가 되지만, 그 외부 페이지가 보증이 되어있는 페이지라면 문제가 되지 않는다. 이러한 부분과 다른 출처간의 상호작용이 필요한 경우가 있기 때문에 CORS는 있는 것이다.
 
 
 
핵심 내용
SOP와 CORS는 자바스크립트와 관련된 보안 정책이다. 자바스크립트에서 api 요청을 보낼 때 현재 출처와 정책과 안맞으면 동일한 출처가 아니라고 오류가 나게 된다.

즉, 브라우저가 다른 사이트의 접속이나 모든 요청에서 출처를 먼저 확인하고 출처를 기반으로 도메인 프로토콜 등 다른 출처로 요청을 막은것이고, 이때 다른 출처로의 요청에 CORS가 뜨면서 CORS 설정을 해야 된다고 나타내는것이다. Cors는 sop에 대해 허용 및 비허용을 해주기 위해 도움을 주는 정책이다.

정리하면, 내 브라우저가 SOP정책을 지키기 위해 자동으로 띄우는것이다. 요청은 잘 가고 처리가 되지만 브라우저 상에서 Response를 차단하는 것이다. 서버가 CORS 설정(Access-Control-Allow-Origin)을 response 헤더에 담아서 보내주면 브라우저가 응답 헤더를 검사하는 과정에서 헤당 헤더를 보고 Cors정책이 확인이 되며 넘어가는 것이다.

반대로 생각하면 cors설정이 되어있지 않으면 응답 과정에서 브라우저가 헤더를 검사할 때 에러가 나는것이다.