CORS란 무엇인가?

1. CORS(Cross-Origin Resource Sharing)

- CORS는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다.

- 즉, 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하도록 브라우저에 알려주는 체제이다.

- 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한하는데, cross-origin 요청을 하려면 서버의 동의가 필요하다. 만약 서버가 동의한다면 브라우저에서 요청을 허락하고, 동의하지 않으면 브라우저에서 거절한다.

- 이렇게 허락을 구하고 거절하는 매커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)이라고 한다.

 

* cross-origin

- cross-origin이란 다음 중 한 가지라도 다른 경우를 말한다.

1. 프로토콜

2. 도메인

3. 포트번호

- 만약 Protocol, Host, Port 3가지가 모두 같으면 동일 출처라고 한다.

- 동일 출처 예시

http://example.com:80  http://example.com	HTTP 기본 Port인 80번이 생략되어있으므로 동일 출처
http://example.com/app1/index.html http://example.com/app2/index.html	Protocol, Host, Port(생략)이 같으며, Path부터 다르므로 동일 출처

- 다른 출처 예시

http://example.com/app1 https://example.com/app2	Protocol이 다르다
http://example.com http://www.example.com http://myapp.example.com	Host가 다르다
http://example.com http://example.com:8080	Port가 다르다

 

- 위 그림에서 domain-a.com 유저가 domain-a.com 서버에 요청하면 동일 정책이기 때문에 아무 문제가 없다.

- domain-a.com 유저가 domain-b.com 서버에 요청하면 호스트가 다르기 때문에 다른 출처 요청이다.

 

* CORS가 필요한 이유?

- CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게 되고, 이를 이용해 사용자 정보를 악의적으로 추출하거나 다른 사용자의 정보를 입력하는 등 공격을 할 수 있다.

- 즉, 브라우저에서 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 필요하다.

 

2. CORS 요청 정책

1) 단순 요청(Simple Request)

- 예비 요청(Preflight)을 보내지 않고 바로 서버에 본 요청을 하고 서버의 응답이 왔을 때, 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 CORS 정책 위반여부를 검사하는 방식이다.

- 단순요청은 GET, HEAD, POST 중 하나의 HTTP 메서드를 사용해야 한다.

- 자동 설정 헤더 제외하고 명시적으로 설정 가능한 헤더는 Accept, Accept-Language, Content-Langauge, Content-Type, DPR, Donwlink, Save-Data, Viewport-Width, Width이다.

- Content-Type이 application/x-www-form-urlencoded, multipart/form-data and text/plain 인 경우

2) preflight 요청

- prefligth는 OPTIONS 메서드로 HTTP 요청을 미리 보내 실제 요청이 전송하기에 안전한지 확인한다.

- 요청 헤더에는 origin(어디서 요청했는지 서버에 알려주는 주소), access-control-request-method(실제 요청이 보낼 HTTP 메서드), access-control-request-headers(실제 요청에 보함된 header)가 포함된다.

---

* 정리

- CORS는 브라우저에서 보안적인 이유로 다른 출처(URL의 Protocol, Host, Port 중 하나라도 다른 경우)의 자원에 접근을 안전하게 할 수 있도록 하는 메커니즘이다. 만약 CORS가 없다면, 다른 사이트에서 원래 사이트를 흉내낼 수 있고, 사용자의 정보 등 보안의 문제가 발생할 수 있다. CORS에는 단순 요청(Simple Request)가 있고, 브라우저가 실제 요청 전에 OPTIONS 메서드를 사용해 HTTP 요청을 미리 보내 실제 전송이 안전한지 확인하는 preflight 요청이 있다.

---

학습 단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 정정하도록 하겠습니다

참고 : https://hannut91.github.io/blogs/infra/cors

https://escapefromcoding.tistory.com/724