CORS란?
- Cross Origin Resource Sharing의 약자로, origin 간 리소스를 공유할 수 있도록 하는 정책
- 브라우저는 보통 다른 origin에서 요청을 보내는 것을 금지하고, 같은 origin 간 공유를 허용하는 정책 (SOP,same-origin-policy) 을 사용한다
- 브라우저는 http 관련 통신이 일어날 때 cors 검증을 해야하는 지 아닌 지 판단하고, 서버에 cors 검증을 요청한다.
💡 Open API 등 다른 출처(origin)에 자원을 요청하는 경우가 많아졌다. 다른 origin의 요청을 허용하기 위해 서버에서 허용한 origin과 헤더의 origin을 비교해 검사하는 것이 CORS의 핵심 원리이다.
출처(Origin)란?
Protocol,Host,port번호 를 합친 것을 의미한다.- 같은 origin은 위 3개가 모두 동일한 것을 말한다.
- origin 비교 과정
- 클라이언트에서 서버로 요청을 보내게 되면 헤더에 origin이 담겨 보내진다.
- 서버는 'Access-Control-Allow-Origin' 속성을 추가해 응답을 내려주는데, 이때 내려준 값과 헤더의 origin을 비교해 동일한 출처인지, 허용된 출처인지를 비교한다.
SOP(Same-Origin Policy)
- 브라우저에서는 보안을 위해 같은 출처인 경우만 정보를 주고 받을 수 있도록 정책
- CORS 에러는 브라우저가 보안을 위해 설정한 SOP 때문에 일어나는 것
- 인터넷상의 악의적인 사이트들의 공격들을 막는데 도움이 된다. (CSRF, XSS, Clickjacking등의 공격)
Simple Request
- 예비요청 없이 서버에 바로 요청을 보내는 방법
- 서버에 바로 본요청을 보낸 뒤, 서버는 헤더에
Access-Control-Allow-Origin값 등을 붙여 보내주면 브라우저가 CORS 정책 위반 여부를 검사한다. - 대부분의 REST API가 Content-Type 으로
application/json을 사용하기 때문에 사실상 지켜지기 어려운 조건이고, 거의 대부분은 Preflight 방식으로 처리한다.
preflight request
- 서버로 바로 요청을 보내는 Simple Request와는 다르게, 지금 보내는 요청이 유효한지를 확인하기 위해 OPTIONS 메서드로 예비 요청을 보내는 것
- 용량이 큰 데이터를 body에 담은 요청이 CORS 정책을 위반하는 요청인 경우, 서버로 바로 요청을 보낼 시 불필요하게 리소스를 낭비하게 되고 서버 부하도 커진다.
- 위와 같은 상황을 방지하기 위해 특정 조건인 경우 예비요청을 먼저 날려, 이게 유효한 요청인지 확인한다.
CORS 에러 해결 방법
- 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결
Access-Control-Allow-Origin: 특정 브라우저가 리소스에 접근이 가능하도록 허용한다Access-Control-Allow-Method: 특정 HTTP Method만 리소스에 접근이 가능하도록 허용한다Access-Control-Expose-Headers: 자바스크립트에서 헤더에 접근할 수 있도록 허용한다.credentials: 쿠키 등의 인증 정보를 전달한다.
출처
CORS
[개발자 면접 질문] CORS에 대해서 설명해보세요.
[기술면접] CORS
[Interview] CORS에 대해 말씀해주세요.
Same-origin-Policy(SOP)
CORS와 관련 있는 preflight request란?
CORS의 기본 개념과 동작 방식(부제: Preflight 요청이란?)
💻 ⚾️ 🐻