CORS란?

 

CORS란?

Cross-Origin Resource Sharing, 교차 출처 리소스 공유 방식이라고 할 수 있습니다. 동일 출처의 반대 개념입니다.

다른 출처 간에 리소스를 공유할 수 있도록 이 권한을 브라우저에게 알려주는 체체이며, 추가 HTTP 헤더를 사용하고 있습니다.

 

출처? 리소스?

출처는 보내고 받는 각각의 위치 즉, 웹사이트와 API의 주소이며,

리소스는 주고받아지는 데이터입니다.

 

언제 발생할까?

한 사이트에서 주소가 다른 서버로 요청을 보낼 때 접하게 되는 오류입니다.

웹사이트를 여는 곳 (브라우저)에서 일어나는 , 즉 프론트에서 일어나는 문제점입니다.

 

 

CORS가 왜 필요할까?

 

웹 생태계가 다양해지면서 여러 서비스 간에 자유로운 데이터 교환이 필요해졌습니다.

(😉 제가 만든 웹 사이트에서 지도 API. 토스트 API 등을 사용해야 하는 것처럼요!)

 

하지만 기본적으로 브라우저는 출처가 서로 다른 사이트 간의 요청을 막는 것을 원칙으로 하고 있습니다. 이를 위해서 합의된 출처들 간에 합법적으로 허용해주기 위해서 어떤 기준을 충족시키면 리소스가 공유되도록 만들어진 메커니즘이 CORS입니다.

 

우리가 보통 어떤 사이트에 로그인을 하면, 다음에 접속했을 때 다시 아이디 비번을 입력할 필요가 없도록 로그인이 유지되고 있는 경우가 있습니다. 브라우저에 토큰 등의 정보가 쿠키로 저장되고, 로그인했던 사이트에 접속할 때마다 요청에 실어 보내면, 그 사이트에서 쿠키를 보고 내가 거기 로그인돼 있다고 판단하는 것입니다.

 

이때, 악의적으로 피싱 사이트를 만들어 사용자에게 해당 URL로 들어오게끔 유도한다면, 피싱 사이트의 정보가 사용자의 브라우저에 받아지게 됩니다. 이때 피싱 사이트에서 받아온 악성 코드들로 사용자의 브라우저에서 정보를 가져갈 수 있는 것입니다.

 

사용자의 의지와는 관계없이 사용자의 브라우저에 저장된 정보를 악의적으로 사용할 수 있기 때문에 브라우저가 이것들을 방지하는 것입니다.

 

근데 CORS는 막아주는 역할이 아니라던데요?

네, CORS는 막아주는 역할이 아니라 그것을 풀어주는 역할을 의미하며, 요청을 막는 것은 SOP입니다.

Same-Origin-Policy로 동일 출처 정책이라고 합니다. 동일한 출처, 똑같은 URL끼리만 API 등의 데이터 접근이 가능하도록 막는 것이며, CORS는 이것이 가능하려면 CORS를 허용해달라는 의미입니다.

 

CORS를 하기 위해서는 어떻게 해야 할까요?

요청을 받는 백엔드 쪽에서 허락할 다른 출처들을 미리 명시하면 됩니다.

백엔드 서버를 프로그래밍할 때 쓰는 프레임워크(스프링, 장고)들의 문서를 살펴보면 CORS 옵션을 넣는 방법을 알 수 있습니다. 여기에 허용할 사이트들을 적어주면, 거기서 지정한 사이트에서 이 서버로 얼마든지 HTTP 요청을 보낼 수 있습니다.

 

 

왜 Preflight가 필요할까요?

CORS를 모르는 서버를 위해서입니다. 이를 위해서 preflight request를 진행하는데,

preflight request는 실제 요청을 보내도 안전한지 판단하기 위해 사전에 보내는 요청입니다. OPTIONS 메서드로 요청하며 CORS를 허용하는지 확인합니다. CORS가 허용된 웹서버라면 사용 가능한 리소스를 헤더에 담아 응답합니다