CORS(Cross-Origin Resource Sharing)에 대하여

노드를 사용하여 백엔드를 구축하면 초반에 필히 셋팅 해주는 것 중에하나가 바로 CORS(Cross-Origin Resource Sharing)에 관한 것이다.

직역하면 교차 출처 자원 공유인데, 이는 추가 HTTP 헤더를 사용하여 어떠한 출처에서 실행 중인 웹 앱이 다른 출처에 선택한 자원에 접근 할 수 있는 권한을 부여하는 브라우저 체제이다.

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

웹 앱은 리소스가 자신의 출처(프로토콜(https://),도메인(호스트,www.stackoverflow.com), 포트(:443))와 다를 때 교차 출처 HTTP 요청을 실행한다.(같으면 동일 출처(Same Origin)이다.)

이는 보안상의 이유로 브라우저가 스크립트에서 시작한 교차 출처 HTTP 요청의 제한으로 인한 것이며, 이러한 제약이 없다면 XSS(Cross-site Scripting) 또는 CSRF(Cross-Site Request Forgery) 같은 보안 허점을 이용한 공격을 통하여 데이터를 탈취 및 조작 당할 위험이 있기 때문이다.

이어서 이러한 기술의 적용을 간단히 설명하자면 CSS와 CDN 등과 같이 외부 API 같은 것을 실행하고자 할 때 필요하다. 이때 도메인(호스트)이 다르니 하나의 서버에서 주고 받을 수 없으며, 포트( 예) 443,80,8080 )가 다르거나 프로토콜( 예)http,https )가 다른 경우에도 CORS 정책에 의해 막힐 수 있으니 이런 기능이 생겨나게 된 것이다. 하지만 이는 브라우저에서 다른 서버로 요청 할 때 필요한 기능이고, 서버 간 통신에는 해당 policy가 적용되지 않는다.

 

CORS의 동작 방식으로는,

사전 요청(Preflight Requst)와 사전 응답(Preflight Response)가 있는데, 먼저 실제 요청에 앞서 안전한지에 대한 확인 여부로 예비 요청과 응답을 주고 받은 뒤 실제 본 요청과 응답을 주고 받는다.

또는, 단순 요청(Simple Request)인데 이는 사전 요청과 다르게 요청을 보냄과 동시에 cross origin 여부를 확인한다. 하여, 다음의 조건을 만족하는 경우를 확인한다.

1.메서드가 POST, GET, HEAD 중 하나인지.

2.헤더는 Accept, Accept-Language, Content-Language, Conten-Type 종류만 허용

3.Content-Type 헤더는 1)application/x-www-form-urlencoded 2)multipart/form-data 3)text/plain만 허용한다.