[PART2] 네트워크/통신/데이터 - TERMS 8

[ TERMS 08 ] CORS

CORS 오류를 설명하는 이미지 (출처 : https://www.youtube.com/watch?v=Qf2V6v1pdRY)

1. CORS(Cross-Origin Resource Sharing)의 정의

 CORS(교차 출처 리소스 공유)는 브라우저에서만 가지고 있는 체제로, 클라이언트가 자신의 도메인과 서로 다른 도메인 간의 리소스를 가져오고 싶은 경우, 정해진 규약을 통해 선택한 리소스에 접근 권한을 부여하도록 브라우저에 알려준다.

 

예를들어 'https://localhost:8080'가 'https://localhost:3000'으로부터 요청한 리소스를 받아오려고 한다면 CORS오류가 발생한다. 왜냐하면 브라우저가 제한하는 SOP(Same-Origin Policy, 동일 출처 정책)의 기준 3개(프로토콜,도메인, 포트) 중 포트가 서로 다르기 때문이다.

SOP 3가지 기준을 설명하는 이미지 (출처 : https://www.bannerbear.com/blog/what-is-a-cors-error-and-how-to-fix-it-3-ways/)

 

2. CORS는 어떻게 접하게 될까?

CORS 오류 메시지 No 'Access-Control-Allow-Origin' header is present on the requested resource. (출처 : https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9)

 외부 API 서버와 통신할때 주로 접하게 된다. CORS 오류의 원인은 동일한 도메인의 리소스만 상호 작용을 허용하는 SOP 제한으로 인한것으로 해결하려면 CORS를 구성해 줘야 한다.

 

3. CORS 알아보기

>  개념

 클라이언트는 자신의 도메인과 다른 도메인의 리소스를 가져오고 싶을때 HTTP 요청을 실행한다. 하지만 브라우저는 보안을 위해 SOP 제한을 둔다. 이때 CORS를 구성해 줌으로써 서로 다른 도메인 간에 리소스를 공유할 수 있도록 정보 요청과 응답을 가능하게 한다.

 

>  등장 배경

 브라우저에 자바스크립트가 도입된 이후, Netscape Navigator 2.02 버전에서 웹 보안을 위해 SOP가 등장했다. 이는 동일한 도메인의 리소스만 상호 작용을 허용하는 정책으로 다른 도메인의 리소스를 받아오는 것을 제한함으로 잠재적인 보안 위협으로부터 보호해 주는 정책이다. 하지만 개발을 하다보면 다른 도메인의 리소스가 필요해지기도 하기에 SOP의 예외 정책으로 CORS가 등장했다.

 

4. CORS를 사용하는 이유

 CORS는 서버에서 외부 요청을 허용할 때 Ajax(Asynchronous JavaScript and XML) 요청이 가능해지는 방식이다. Ajax의 가장 큰 특징은 '비동기성'으로 웹 개발시 자바스크립트 코드로 외부 도메인에 리소스를 비동기적으로 요청하기 위해 Ajax 요청을 한다. 이때 XMLHttpRequest(XHR 혹은 Fetch API) 객체를 사용하여 보낸다. 하지만 XMLHttpRequest는 기본적으로 SOP를 따르고 있다. 따라서 CORS를 SOP 제한을 해제하여야 한다.

CORS 적용과정(출처 : https://www.keycdn.com/support/cors)

 A에서 B에 필요한 리소스를 XMLHttpRequest 객체를 사용하여 요청한다. 그러면 B는 A에게 " Access-Control-Allow-Origin:*"(모든 도메인에서 접근할 수 있음) 라고 응답하거나  " Access-Control-Allow-Origin:A"(A에서 접근할 수 있음) 라고 응답하여야 한다. 이후 응답 받은 A는 자신이 보냈던 요청의 출처 Origin과 B의 응답 헤더의 Access-Control-Allow-Origin을 비교하여 허가를 해준다. 

 

5. CORS와 SOP의 비교

 SOP는 보안을 위해 브라우저가 가지고 있는 정책이다. 브라우저는 클라이언트와 서버 각각의 도메인 URL의 Scheme. Host, Port를 보고 판단하는데

URL의 Scheme. Host, Port 를 설명하는 이미지(출처 : https://slideplayer.com/slide/5228370/)

1. Scheme : 프로토콜이며 리소스에 접근하는 방식에 대한 클라이언트와 서버간의 약속, 규약, 규칙이다.(HTTP / HTTPS / FTP 등)
2. HOST : 도메인 명으로, IP 주소를 직접 입력할 수 있다.
3. Port : HTTP는 80포트, HTTPS는 443포트를 사용하며 생략하는 경우가 많다.

'www.example.com'을 기준으로 SOP를 설명하자면

URL	같은출처	이유
http://blog.naver.com/other.html	실패	Host가 다름
https://www.example.com/dir/other.html	실패	Scheme가 다름
http://www.example.com/dir.html	성공	Scheme, Host, Port가 동일
http://www.example.com/dir2.html	성공	Scheme, Host, Port가 동일
http://www.example.com:81/dir.html	실패	Port가 다름

와 같다.

 

6. CORS 더 알아보기

>  함께 알아 두면 좋은 용어

• HTTP
• Fetch API
• Preflight Request
• Credentialed Request
• XMLHttpRequest

 

>  혼동하기 쉬운 용어

• SOP 정책
• CORS 체제