CORS란 무엇인가?

CORS란?

 

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. 직역하면, 교차되는 출처 자원들의 공유이다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부른다.

 

그러기 위해서는 먼저 출처가 무엇인지를 알아야 한다. 아래 그림과 함께 설명을 보자.

https://escapefromcoding.tistory.com/724

출처(Origin)란 구성 요소 중에서 Protocol + Host + Port 3가지가 같은 경우 동일 출처가 된다고 표현한다. 즉 이 구성 요소가 다른 것들을 공유할 때 CORS를 구현할 필요가 있다.

 

그럼 왜 이렇게 출처가 다를 때 CORS가 필요할까?에 대한 의문이 들 것이다. 들어야 좋다.

 

기본적으로 출처가 다르면 보안 상의 이유로 브라우저에 있는 보안 기능에 의해 연결차단이 이루어진다.

 

CORS가 없다면 우리는 아무런 제약 없이 다른 웹/앱에 Resource를 보낼 수 있다.

요즘에는 F12만 누르면 바로 개발자가 어떤 코드를 썼는지 확인할 수가 있는데,

악의적인 사람들에게 제약 없이 코드가 전달될 시에 CSRF나 XSS같은 방법을 통해 어떤 행동들을 할지 뻔하다.

그런 식으로 우리의 정보가 탈취되고 위험을 겪는다면 상당히 억울함을 겪을 것이다.

 

그렇기 때문에! CORS는 정말로 필요한 기능 중 하나이다.

https://evan-moon.github.io/2020/05/21/about-cors/

 

그럼 CORS는 어떻게 동작할까?

 

1. 프리플라이트 요청 (Preflight Request) Preflight Request는 요청을 예비 요청(Preflight)과 본 요청으로 나눈다. OPTIONS 메소드를 통해 다른 도메인의 리소스에 요청이 가능한지 (실제 요청이 전송하기에 안전한지) 확인 작업을 하고, 요청이 가능하다면 실제 요청을 보낸다. Cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 Preflight 요청을 한다.

 

아래 차트는 프리플라이트 요청의 과정이다.

 

2. 단순 요청 (Simple Request) Simple Request는 Preflight Request와 다르게 요청을 보내면서 즉시 cross origin인지 확인하는데, 다음 조건을 모두 충족해야 한다. 조건이 다소 까다롭기 때문에 잘 사용하지 않는 요청 방식이다.

1. 메서드는 GET POST HEAD 중 하나
2. 헤더는 Accept, Accept-Language, Content-Language, Content-Type만 허용
3. Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용

 

 

 

3. 인증정보 포함 요청 (Credentialed Request) 인증 관련 헤더를 포함할 때 사용하는 요청이다. 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 기본적으로 요청에 담지 않으므로, credentials 옵션을 변경하지 않고서는 cookie를 주고 받을 수 없다. 옵션으로는 omit, same-origin, include가 있다.

• omit : 절대로 cookie 들을 전송하거나 받지 않는다.
• same-origin : 동일 출처(same origin)이라면, user credentials (cookies, basic http auth 등..)을 전송한다. (default 값)
• include : cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.

same-origin이나 include와 같은 옵션을 사용하여 리소스 요청에 인증 정보가 포함된다면, 이제 브라우저는 다른 출처의 리소스를 요청할 때 단순히 Access-Control-Allow-Origin만 확인하는 것이 아니라 좀 더 빡빡한 검사 조건을 추가하게 된다.