1. CORS 소개
2. SOP(Same-Origin Policy)
3. CORS의 필요성
4. CORS의 작동방식
5. CORS 문제 해결방법
- Access-Control-Allow-Origin 설정
- Webpack Dev Server 리버스 프록싱
1. CORS 소개
CORS(Cross-Origin Resource Share)는 직역하자면 교차 출처 리소스 공유라는 의미로 웹을 구성할 때 다른 출처를 사용해서 구성하는 경우가 흔하기 때문에 이런 경우에 사용되는 통신 정책이다.
출처(Origin)는 서버의 위치를 의미하는 URL의 구성을 보면 알 수 있는데
프로토콜, 호스트, 포트번호, 패스, 쿼리스트링, 프라그먼트 등의 요소가 합쳐진 것이다.
CORS 정책에 따라 출처의 일치 여부를 판단할 때는 스킴(프로토콜), 호스트, 포트 3가지 요소를 따져서 일치 여부를 결정한다.
2. SOP(Same-Origin Policy)
다른 출처의 리소스 공유를 제한하는 정책은 CORS 이외에도 SOP이라는 개념이 존재하는데 CORS가 2009년, SOP은 2011년에 등장(RFC 6454)한 정책으로 SOP이 보다 최신의 보안 정책이다.
하지만 웹 환경 특성 상 같은 출처의 리소스 외에도 다른 출처의 리소스 요청은 흔하게 일어나기 때문에 다른 출처인 경우에도 예외를 두어서 리소스 공유를 허용하도록 한다. CORS 정책 일치 여부도 이러한 예외 사항에 해당한다.
3. CORS의 필요성
CORS는 클라이언트의 애플리케이션이 개방적인 구조를 지닌 특징때문에 필요한 정책이라고 할 수 있다.
최근에는 자바스크립트 코드 난독화 등의 방법으로 소스코드 노출에 대한 위험을 줄이고 있지만 완벽하지는 않기 때문에 다른 출처 간의 통신에 대해서 제한이 필요하다.
출처 여부에 따라 제약이 없다면 오픈 된 웹의 환경 탓에 악의를 지닌 사용자는 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting) 등의 방법으로 다른 사용자의 정보를 탈취할 수도 있기 때문이다.
4. CORS의 작동방식
CORS는 같은 출처가 확인될 때 통신을 허용하는 것으로 일반적으로 예비 요청(Preflight) 시 CORS에 대한 검증이 이루어진다.
예비 요청은 HTTP 메소드 중에서 OPTIONS 메소드를 사용하며 본 요청을 보내기 전에 브라우저에서의 검증을 위한 통신이다.
CORS 정책에 따라 출처의 일치 여부를 판단할 때는 스킴(프로토콜), 호스트, 포트 3가지 요소를 따져서 일치 여부를 결정한다.
CORS 정책은 브라우저에서 이루어지는 검증이기 때문에 브라우저를 사용하지 않고 통신을 하는 경우 CORS 정책 위반 사항에 해당되지 않는다.
postman 등의 툴을 사용해서 우선적으로 API 통신을 테스트 하고 난 후 실제 브라우저를 통해서 통신을 시도할 때 에러가 발생하는 것도 이러한 이유이다.
5. CORS 문제 해결방법
Access-Control-Allow-Origin 설정
백엔드 서버 설정에서 Access-Control-Allow-Origin 헤더에 해당 클라이언트의 출처 값을 설정하는 방법으로 해결할 수 있다.
설정 시에 와일드카드인 *(asterisk)를 사용하여서 모든 출처에 대해서 요청을 허용하겠다고 설정할 수도 있지만 보안상 매우 취약하기 때문에 권장되지 않는다.
Webpack Dev Server 리버스 프록싱
프론트엔드 로컬 개발환경에서 CORS 문제에 대한 해결방법으로는 라이브러리에서 제공하는 프록시 기능을 사용해서 CORS 정책을 우회하는 방법이 있다.
<script>
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.sample.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
}
}
}
</script>위와 같은 코드를 작성하여서 localhost:3000/api로 통신되는 url을 https://api.sample.com로 프록싱하여서 브라우저 CORS 정책을 우회해서 개발환경에서의 발생하는 CORS 문제를 해결할 수 있다.
참고 사이트
해당 페이지를 참고하여 작성했습니다.
