CORS 알아보기

CORS에러를 많이 만나봤을 것이다.

 

내 블로그에서도 

 

invalid cors request 403 해결

invalid cors request 403 해결

 

 

 

이 글이 요새 핫한(?) 편이다 ㅋㅋ

 

한 번 자세히 알아보자

 

 

1. 개념

CORS는 Cross Origin Resource Sharing의 줄임말로 출처가 다른 곳의 리소스를 요청할 때 접근 권한을 부여하는 것이다.

리소스를 주고받는 두 곳의 출처가 다르면 출처가 교차한다고 하는데, 이때 출처는 URL, 프로토콜, 포트를 포함한다. 만약 출처가 허용되지 않았다면 CORS에러가 발생할 수 있다.

 

 

 

2. CORS의 필요성

예전에는 CSRF(Cross Site Request Forgery) 문제가 있었다. A브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 공격이다. 이러한 공격을 예방하기 위헤서는 브라우저는 동일 출처 정책을 구현했다. 이를 SOP(Same Origin Policy)라고 하는데, SOP가 구현된 브라우저는 클라이언트와 동일한 출처의 리소스로만 요청을 보낼 수 있다. 하지만 요즘에는 서로 다른 출처의 리소스를 사용하는 경우가 많기 때문에 SOP를 확장한 CORS가 필요하게 된 것이다.

 

 

 

3. 광고

728x90

 

 

 

4. CORS의 작동 원리

브라우저가 요청 메시지에 Origin 헤더와 응답 메시지의 Access Control Allow Origin 헤더를 비교해서 CORS를 위반하는 지 확인한다. 이 때, Origin에는 현재 요청하는 클라이언트의 출처가 Access Control Allow Origin은 리소스 요청을 허용하는 출처가 작성된다.

 

이렇게 단순하게 요청하는 것을 Simple Request라고 한다. Simple Request는 요청 메소드(Get, Post, Head), 수동으로 설정한 요청 헤더(Accept, Accept-Language, Content-Language, Content-Type, Range), Content-Type 헤더(application/x-www-form-urlencoded, multipart/form-data, text/plain) 인 경우에만 해당한다.

 

브라우저가 사전 요청을 보내는 경우도 있는데, 이때 사전 요청을 Preflight Request라고 한다. 브라우저가 본 요청을 보내기 이전, Preflight Request를 Options 메소드로 요청을 보내 실제 요청이 안전한 지 확인한다. Preflight Request는 추가로 Access-Control-Max-Age에 담아서 보내야 한다.

 

또한 인증된 요청을 사용하는 방식도 있는데, 이는 Credential Request라고 한다. 쿠키나 토큰과 같은 인증 정보를 포함한 요청은 더욱 안전하게 처리되어야 한다. 이 때 Credential Request를 수행한다. Crequential Request를 요청하는 경우에는 서버에서 Access-Control-Allow-Credentials를 true로 설정해야 하며 Access-Control-Allow-Origin에 와일드 카드를 사용하지 못한다.

 

 

 

 

 

 

 

 

- 참고

토스페이먼츠 - CORS 대응하기

MDN - 교차 출처 리소스 공유 (CORS)

테코블 - CORS란?