[CS] CORS(Cross-Origin Resource Sharing)란?

Cross-Origin Resource Sharing
프론트엔드 웹 개발을 하다보면 한 번쯤 볼 수 있는 CORS 에러! CORS가 뭘까?
 

1. Origin 헤더

브라우저는 모든 HTTP 요청 시 'Origin' 헤더를 포함한다.
이 헤더는 현재 페이지가 로드된 출처(도메인, 프로토콜 및 포트)를 나타낸다.
 
🔎 Origin

• 웹페이지 URL은 여러가지 정보를 포함하고 있다.
• https:// -> 프로토콜, www.google.com -> 도메인을 뜻하고 끝에 생략이 가능한 포트번호(HTTP: 80, HTTPS: 443)까지 합친 걸 Origin이라고 한다.

 

2. 서버 측 CORS 정책

서버는 클라이언트가 보낸 Origin 헤더를 보고 해당 요청이 허용된 출처에서 시작된 것인지 판단한다.
그래서 서버는 CORS 정책에 따라 요청을 허용하거나 거부하는데 이 정책은 서버의 구성과 응답 헤더를 통해 제어된다.
 

3. CORS 헤더

그러나 보통 서버의 endPoint와 홈페이지 domain은 다른 경우가 많기 때문에 서버에서는 홈페이지 domain을 허용해서 다른 domain이라 하더라도 요청을 보낼 수 있게 한다.
주요 헤더 중 하나는 'Access-Control-Allow-Origin' 헤더로, 이를 통해 서버는 허용되는 출처를 명시적으로 설정할 수 있다.
또한 'Access-Control-Allow-Method', 'Access-Control-Allow-Headers', 'Access-Control-Allow-Credentials' 등의 헤더도 사용할 수 있으며 이들은 요청 및 응답 헤더를 통해 설정된다.
 

4. 목적

CORS 주요 목적은 악성 script로 부터 웹사이트를 보호하고, 다른 도메인에서 시작된 요청을 제한하여 데이터 유출과 보완 위협을 방지한다.
또한, 익명 유저에 의한 DDos 공격 등을 방지 하기 위해 사용된다.
 

5. Proxy 서버

경우에 따라 서버 자체에 CORS 정책을 직접 설정할 수 없다면 Proxy 서버 등을 만들어 웹사이트와 외부 출처 간의 통신을 관리하고 보안을 강화할 수 있다.
 
요약하자면,
CORS는 다른 출처(프로토콜, 호스트, 포트)의 웹 자원에 접근할 때 발생할 수 있는 보안 문제를 제어하고 사용자 정보 탈취를 방지하기 위한 웹 표준으로, 서로 다른 도메인 간에 자원을 공유하려면 서버측에서 CORS를 허용하도록 설정해야한다.