CORS

안녕하세요.

뉴진쓰 팀의 작은뉴진입니다.

 

개발을 하다보면 누구나 CORS를 겪게 될텐데요, 저도 당연히 경험을 해 보았습니다.

오늘은 CORS가 무엇인지에 대해 함께 알아가볼까요??!

 

---

 

우선 CORS(Cross-Origin Resource Sharing)란 애플리케이션을 통합하기 위한 매커니즘으로,

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제라고 해요.

 

 

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다고 합니다.

 

위와 같이 domain-a에서 동일한 출처로 요청을 했을 때는 정보를 전달 받을 수 있지만,

domain-a에서 domain-b로 요청을 하면 CORS 정책에 의해 차단되게 돼요.

 

여기서 출처(Origin)란 Protocol, Host, Port를 모두 합친 URL을 의미합니다.

 

최신 브라우저에서는 클라이언트가 동일한 오리진의 리소스로만 요청을 보낼 수 있는데, 이것을 동일 오리진 정책이라고 합니다.

 

출처가 다른 애플리케이션 간 자유롭게 소통하게 된다면 해커가 CSRF나 XSS 등의 방법으로 개인 정보를 가로채갈 수 있어요.

 

동일 오리진 정책은 매우 안전하지만, 실제 사용 사례에는 유연하지 않아요.

CORS는 이 동일 오리진 정책을 확장한 것 입니다.

 

외부의 서드 파티와 승인 하에 리소스를 공유하려면 CORS가 필요해요.

예를 들어 외부 API에서 데이터를 가져오거나 권한이 있는 서드파티가 서버 리소스에 액세스하는 것을 허용하려는 경우 COR가 필요합니다.

 

SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용하는거죠.

 

그럼 이제 브라우저의 CORS가 작동하는 방식에 대해 알아볼게요.

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달
2. 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달
3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교

 

---

오늘은 간략히 CORS가 뭔지 알아보았습니다.

 

다음에 또 만나요 안녕!!