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

 

CORS에 대해서 알아보기 전에 Origin과 SOP 정책에 대해서 먼저 알아보려 한다.

 

Origin

Origin은 출처를 뜻하며, 이를 우리가 흔히 볼 수 있는 URL을 의미한다.

출처: https://solby.tistory.com/m/95

 

출처를 구성하는 요소는 프로토콜(Protocol), 도메인(Domain), 포트(Port) 총 3개이다.

 

SOP(Same-Origin Policy) 정책

SOP 정책은 "동일한 출처에서만 리소스를 공유할 수 있다"는 정책이다.

 

따라서 프로토콜, 도메인과 포트 중 하나라도 다르면 서로 다른 출처로 간주하며,

다른 출처에서 요청한 리소스의 응답을 차단한다.

 

만약 https://jjangsudiary.tistory.com 에서 https://api.example.com/data 를 요청하면

→ SOP 정책에 의해 응답에 대한 접근을 차단한다.

하지만 https://api.example.com 에서 https://api.example.com/data 를 요청하면

→ 출처가 동일하기 때문에 응답을 허용한다.

 

---

CORS(Cross-Origin Resource Sharing)

반대로 CORS 정책은 "출처가 다른 서버간 리소스를 공유할 수 있다"는 정책이다.

서버가 응답 헤더에 다음과 같이 설정하면

Access-Control-Allow-Origin: https://jjangsudiary.tistory.com

 

명시한 출처로의 요청을 허용한 것과 같다.

만약 https://abc.com 에서 서버에 리소스를 요청하면, 서버는 요청을 거부하고 CORS 에러를 발생시킨다.

아울러 브라우저 콘솔에는 다음과 같은 메시지가 표시될 것이다.

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote source at $somesite"

 

추가로 Access-Control-Allow-Origin으로 *를 설정하면,

모든 출처의 요청을 허용한 것이므로 추가적인 서버 보안 조치가 필요하다!

 

 

:)

 

출처

https://docs.tosspayments.com/resources/glossary/cors

https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/CORS