CORS 란?

CORS란?

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

쉽게 말해 도메인 , 프로토콜, 포트 번호가 하나라도 다를 경우에는 출처가 다른 교차출처(Cross-Origin)라고 판단되며

브라우저의 보안으로 인해 Cross-Origin HTTP 요청을 제한해버린다.

권한을 부여 받기 위한 Cross-Origin 요청은 서버에서 허가를 받아야하는데,HTTP-header를 통해서 받을 수 있다.

 

URL의 구조

다른 출처가 무엇인지 알아보기 위해서는 우선 URL(Uniform Resource Locator)의 기본적인 구조를 알아야 한다.

위 사진의 URL구조 중에서 [[Protocol + Host + Port]]  3가지가 같으면 동일 출처(Origin)라고 합니다. 

 

 

같은 출처와 다른 출처

URL	CORS	이유
http://naver.com:80 http://naver.com	허용	HTTP 기본 Port인 80번이 생략
http://naver.com/placeA/index.html http://naver.com/placeB.index.html	허용	Protocal, Host, Port 같다
http://naver.com/placeA https://naver.com/placeB	허용X	Protocol이 다름
http://naver.com http://my.naver.com	허용X	Host가 다름
http://naver.com http://naver.com:8080	허용X	80, 8080으로 포트가 다름

다른 출처의 경우 에러로 인해 정상적인 요청이 오지 않는다

(처음 플젝 진행 할 때 프론트와 백엔드 서로 CORS 때문에 해결하기 위해 낑낑대던 기억이..)

 

 

CORS 가 필요한 이유는 ?

만약에 출처가 다른 두 개의 웹사이트가 마음대로 소통하게 된다면 어떻게 될까 ? 아마 정글이 될것이다 !

일반적인 웹사이트는 사용자 공격에 대해서 매우 취약한 구조이다.

크롬에서 개발자 도구만 열어서 본다면 javascropt 코드 등 ,, 일부 통신정보를 쉽게 열람할 수 있는데 이러한 정보들을 이용해

악용하게 된다면 중간에서 해당 사이트의 정보를 가로채 빼가거나 악용할수도 있다.  (허용되지 않은 출처에 대한 자료도 허용해줘서)

이러한 문제점을 해결하기 위해서 CORS정책이 생기게 되었다.

 

 

 

Reference

https://beomy.github.io/tech/browser/cors/

https://www.beusable.net/blog/?p=4507 

https://ko.wikipedia.org/wiki/%EB%8F%99%EC%9D%BC-%EC%B6%9C%EC%B2%98_%EC%A0%95%EC%B1%85