54일차 - SOP 와 CORS

어제와 마찬가지로 오늘도 server를 만드는 과제를 했다.

전의 과제 보다 어려웠던 점이라면 클라이언트가 구현되어있던 mini node sever와 달리 클라이언트가 구현되어있지 않아서 눈으로 확인하지 못하고 서버를 구현해야 한다는 것이 어려웠다.

공부를 하면서 CORS를 사용해 봤지만, CORS에 대해 정확히 알고 사용하지는 않아서 정규 외적인 시간에 정리해 보려고 한다.

얄팍한 코딩지식 CORS와 MDN SOP, 그리고 MDN CORS를 통해 얻은 지식을 기반으로 한다.

우선 CORS에 대해 공부하려면 SOP에 대해서 알아야한다.

SOP(Same Origin Policy)는 동일 출처 정책으로 어떠한 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안정책이다.

쉽게 말하면 보안을 위해 문서의 접근을 불허 하는 것이다.

SOP는 3 가지 요소가 같아야지 동일 출처로 판단한다.

1. 프로토콜

2. 포트

3. 호스트

위의 3가지 중 하나라도 다르면 동일 출처가 아니라고 보고 차단을 하는 것이다.

그런데 어떻게 사이트들의 가입을 하려고 할때, 네이버, 구글 등의 정보를 이용해서 쉽게 회원가입을 할 수 있는 것일까? 동일출처가 될수가 없는데 말이다. 그 해답을 알려면 CORS에 대해 알아야 한다.

CORS는 요청을 받는 백엔드쪽에서 이걸 허락할 다른 출처들을 미리 명시해 두는 것이다.

한 마디로 미리 예외를 명시해 두면 SOP 3가지 원칙을 무시하고, 타 도메인 간 자원 호출을 승인 받을 수 있는 것이다.

어떻게 허가를 받는 것일까?

허가를 명시해주는 곳이 바로 헤더이다.

만약 모든 origin으로부터 요청을 허용하려면 와일드카드 "*"를 써서

Access-Control-Allow-Origin: "*"

라고 명시하면 되는 것이다.

벨로그에서 보낸 요청을 허용하려면

Access-Control-Allow-Origin : "https://velog.io"

라고 명시하면 되는 것이다.