[2019.05.05] CORS...너는 대체 누구니..?

CORS(Cross Origin Resource Sharing)란 브라우저의 현재 웹 페이지에서 다른 페이지에 있는 자원(Resource)을 이용하는 것을 뜻한다.

<img src='http://www.naver.com/images/test.jpg' />

위 코드와 같이, 현재 페이지에서 다른 웹 페이지의 이미지를 사용하는 것과 같다.

이러한 다른 웹 페이지에 있는 리소스를 사용하는 것을 CORS라고 한다.

그러면 이러한 CORS가 무엇이 문제인가?

다른 웹페이지에 있는 자원을 이용하게 되면, 웹 상에 노출되어 있는 정보를 이용하여 악의적인 목적으로 이용할 수 있고, 어떤 특정 광고의 Page View Count를 높일 수도 있다. 이렇듯 CORS 방식의 기술은 보안에 취약하여 심각한 문제를 발생할 수 있다.

 

이러한 보안 취약 문제를 어떻게 해결하나?

대부분의 브라우저는 이러한 CORS의 문제에 대해 준수하여 아래와 같은 표준화를 제시하고 있다.

일반적인 요청에 대해서 아무런 처리도 하지 않음. (아래가 일반적인 요청에 해당 됨)

• Accept, Accept-Language, Content-Alnguage, Content-Type

Content-Type은 다음만 허용

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

 

위와 다른, 일반적인 요청이 아닌 경우, 브라우저는 접근할 리소스를 가지고 있는 서버에게 preflighted 요청을 보냄

*preflighted 요청이란? 특별한 목적을 가지는 요청, 이것이 request.method OPTIONS에 해당됨!!

OPTIONS 요청을 받은 서버는 Response Header에 서버가 허용할 옵션을 설정하여 브라우저에게 전달.

브라우저는 서버가 보낸 Response 정보를 이용하여 허용되지 않은 요청인 경우 405 에러를 브라우저에게 전달하고, 실제 페이지의 요청은 서버에게 전달하지 않음. 허용된 요청에 응답이 와야, 다음의 실제 요청을 보내고 응답을 받음.

 

CORS 처리 방식

React와 같은 Single Page App 환경에서는 이런 CORS는 일반적인 상황이다.

그래서 요청과 응답에 대한 보안 때문에 CORS 설정으로, 클라이언트와 서버 간의 데이터 통신을 하는데 규칙을 설정하는 것이다. 

preflight요청, 즉, request.method가 OPTIONS인 요청이 에러가 날 시, 클라이언트 측에서는 요청이 제대로 받았는데 요청 상태 코드가 비정상 요청이 되는 것이 아니라, 그냥 에러로 처리됨.

ex)

fetch(url, cors처리부분...)
.then(response => { response.json();)
.then(data => {/* 데이터 처리 부분 */})
.catch(error => { console.log(error); }); // preflight에서 에러가 발생 시 처리되는 부분

 

찾아보니, preflight로 보낸 요청만 2xx(정상상태 코드)가 아니면 에러로 처리하는 것 같다.(OPTIONS가 아닌 POST, GET 요청은, 2xx 이외의 응답은 에러가 아닌 정상 처리!)

---

server를 구현하고 클라이언트와 통신을 하면, 꼭 아무 응답이 없어서... 내가 오타를 냈나. 코드를 잘 못 쓴 부분이 있는지 엄청 삽질을 한다... 그러다 한번 개발자 도구로 콘솔을 확인해보면 CORS 에러...-0-..

보안이랍시고 요놈의 CORS가 항상 골치였다...그래서 제대로 개념을 파보고 향후에 사용법도 좀 익혀보려고 한다.

https://ipex.tistory.com/entry/nodejs-cors-Cross-Origin-Resource-Sharing

위 링크가 CORS 사용법 설명이 잘 나와있는 것 같다. 내일 쯤 이 링크의 내용을 보고 다시 정리해 봐야겠다.