[개발 떠먹여 주는 남자] WTF is CORS?

console.log("Sup, lads!");

이번 포스트에서는 한 번쯤 들어보셨을, 혹은 겪어 보셨을 이 CORS 란 놈에 대해서 알아보려고 합니다. 저도 웹서버 개발을 하면서 CORS 때문에 욕 스킬이 2정도 상승했던 기억이 있습니다 ✌🏼. 그럼 아주 산산조각 내서 도대체 뭐하는 놈인지, 어떻게 해야 하는지 요리 해 보도록 하겠습니다.

 

CORS 란?

시작에 앞서 당연히 CORS 가 무엇인지 알아 보아야 하겠죠? CORS 는 Cross-Origin Resource Sharing 의 약자로서, 서로 다른 웹사이트(웹사이트 혹은 API) 사이에 리소스를 공유할 수 있도록 허용하는 것을 말합니다. 예를 들면 구글과 네이버에서 서로 데이터를 주고 받는 것을 가능토록 만들어 주는 것이죠. 

 

원래는 서로 다른 사이트들끼리 리소스를 주고 받는 것은 허용 되지 않았습니다. 이것은 SOP, 즉 Same-Origin Policy 에 의해 동일한 출처에서만 서로 리소스를 주고 받을 수 있게 디자인 되었습니다. 그러나 시간이 흐르면서 다양한 서비스들간에 데이터를 주고 받게 될 필요성이 대두되었고, 그러나 브라우저가 이를 허용하지 않았기 때문에 개발자들은 다양한 방법을 통하여 우회하는 방식으로 이를 가능케 했죠. 따라서, 합법적으로 이를 허용해 주기 위해 특정 기준 충족 시 리소스가 공유 되도록 만들어 진 메커니즘이 이 CORS 입니다.

 

CORS 는 왜 필요한가?

SOP 가 존재하는 이유는, 만약 내 정보가 해커에 의해 해킹 당했을 때, 내 로그인 정보가 담겨있는 토큰 등이 쿠키로 저장이 되어 요청에 실려 해커들에 의해 타겟 웹사이트로 보내진다고 가정을 하면 해당 웹사이트에서 받은 API 응답이나 내 정보 등이 악용 될 가능성이 있습니다. 이를 방지하기 위해 SOP 를 통하여 만약 다른 웹사이트에서 해당 웹사이트로 요청을 보낼 시 이를 차단 해 주는 것인데요.

 

하지만 위에서도 언급 되었듯이 이제는 내 웹사이트 내에서 모든 정보를 다 제공하는 시대는 끝났다고 해도 과언이 아닐 것 같습니다. 따라서, 다른 웹사이트의 API 로 내가 요청을 보냈을 시에 이를 허용해 주기 위해서 CORS 를 설정하는 것이 필요한 것입니다.

 

CORS 허용 방법

CORS 를 허용해 주기 위해서는 해당 웹사이트의 백엔드 웹 서버 쪽에서 이걸 허락할 다른 출처들을 명시 해 두면 됩니다. 백엔드 프레임워크, 예를 들면 Node.js 의 Express.js 혹은 Python 의 쟝고 등은 이런 기능을 제공하고 있습니다.

 

모든 웹사이트의 요청을 허락하려면 *, 즉 와일드카드를 넣으면 됩니다. 하지만 이는 보안 상의 문제를 야기할 수 있으므로 리소스 쉐어링이 필요한 웹사이트의 주소만 명시 해 주는 것이 더욱 안전한 방법입니다.

 

Ending the post...

이번 포스트에서는 간략하게 CORS 는 무엇인지, 왜 필요한지, 어떤 방식으로 설정하는지에 대하여 찍먹 해 보았습니다. 여기에 연결해서 다음 포스트에서는 Node.js 와 Express.js 를 통해서 어떻게 CORS 를 설정하는 지에 대하여 알아보도록 하겠습니다.