[Back-End] CORS란 무엇인가요?

매일메일을 통한
하루하루 CS 공부하기

 

CORS란?

Cross Origin Resource Sharing : 출처가 다른 곳의 리소스를 요청할 때 접근 권한을 부여하는 매커니즘.

 

즉, 리소스를 주고 받는 두 곳 (프론트엔드 & 백엔드)의 도메인이 다르면, 출처가 교차한다고 한다.

 

이 출처는 프로토콜 + URL + 포트까지 전부 포함하는 개념이다.

 

만약 클라이언트의 출처가 허용되지 않았다면, CORS 에러가 발생할 수 있다. 즉, 브라우저에서 특정 리소스를 요청할 때 발생하는 에러라는 것!

 

CORS는 왜 필요한가?

CSRF (Cross-Site Resource Forgery) : 피해자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 공격

 

이 CSRF를 예방하기 위해 SOP(동일 출처 정책, Same-Origin Policy)를 구현했다. SOP가 구현된 브라우저는 클라이언트와 동일한 출처의 리소스로만 요청을 보낼 수 있다.

 

하지만 이 SOP는 다른 출처의 리소스를 사용한 경우를 부분적으로 허용해주지 않았기 때문에, CORS가 필요한 것이다.

 

CORS의 작동 방식

브라우저가 Request Message의 Origin 헤더(protocol, domain, port)와 Response Message의 Access-Control-Allow-Origin 헤더(리소스 허용 출처)를 비교하여 CORS를 위반하는 지 확인한다.

 

1. Simple Request

요청 메서드, 요청 헤더, Content-Type 헤더를 담아 요청하는 것. 

 

2. Preflight Request

브라우저가 사전에 OPTIONS 메서드로 요청을 보내어 실제 요청이 안전한지 확인하는 사전 요청.

 

Access-Control-Request-Method로 실 요청 메서드와, Access-Control-Request-Headers 헤더에 실 요청의 추가 헤더 목록을 담아서 보내야 한다.

 

이에 대한 Response는 대응되는 Access-Control-Allow-Methods와 Access-Control-Headers를 보내야 하고, Preflight Request로 인한 추가 요청을 줄이기 위해 캐시 기간을 Access-Control-Max-Age에 담아서 보내야 한다.

 

3. Credential Request

쿠키나 토큰과 같은 인증 정보를 포함한 요청의 경우 안전하게 처리해야 한다.

따라서 서버에서는 Access-Control-Allow-Credentials를 true로 설정해야 하며, Access-Control-Allow-Origin에 와일드카드를 사용할 수 없다.

 

해결 방안

• 백엔드에서 CORS 허용
  • 개념적으로는 백엔드에 있는 오리진을 브라우저의 origin에 맞춰주겠다는 개념!
• 프록시 서버 사용
  • 클라이언트가 가상 서버를 앞에 두고, 이와 통신하므로서 CORS 해결