220826 TIL CORS가 뭐야..?

오늘도 어김없이 진행된 코딩 인터뷰 시간

코딩 인터뷰 시간에 내가 받은 질문은 cors에 대한 것이었다.

사실 이번 주 학습 키워드 중에 가장 이해가 안 되었던 개념이 cors였었는데 하필 cors를 물어보셔서 매우 당황을 했다.

매우 버벅거리면서 cors에 대해 말을 했는데 말하면서도 내가 무슨 소리를 하고 있는지도 모를 정도로 아무 말 대잔치를 한 것 같았다.

 

 

이후 꼬리 질문으로 cors를 사용하는 이유와 cors의 동작 과정을 물어보셨는데 개념도 잘 알지를 못하니 제대로 대답했을 리가..

아무튼 코딩 인터뷰 시간은 매우 부담이 되기는 하지만 이전에 진행해왔던 골든벨 시간보다는 훨씬 학습에 도움이 되고 있는 것 같다.

골든벨을 할 때는 개념만 딱 보고 키워드만 떠오를 수 있을 정도로 공부를 했다면 지금은 개념을 말로 설명할 수 있어야 하고, 개념만 아는 게 아니라 그 개념에 대해 사용하는 이유, 특징 등등 더 깊이 있게 공부를 해야 질문에 대답을 할 수 있어서 학습의 깊이가 다르다는 것을 깨닫고 있다.

 

그래서 코딩 인터뷰 시간에 제대로 말 못 한 cors에 대해 공부를 했다.

CORS(Cross-Origin Resource Sharing)란?

교차 출처 리소스 공유(cors)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제이다 - mozilla

 

여기서 출처란 보내고 받는 각각의 위치 즉, 웹사이트랑 API의 주소이다.

리소스는 주고받아지는 데이터라고 생각하면 된다.

 

cors가 발생하는 상황은 한 사이트에서 주소(도메인)가 다른 서버로 요청을 보낼 때 흔히 접하게 되는 오류다.

 

주소가 http://localhost:8080인 사이트에서 주소가 http://localhost:3000인 사이트에 API로 정보를 받아오기 위해 프론트에서 HTTP 요청을 보냈을 때 미리 어떤 설정을 해주지 않으면 cors오류가 발생한다.

 

이렇게 정의만 쭈르륵 써놓으면 이해가 되지 않아서 cors를 어려워했다. 

밑에 예시 상황을 들어 cors가 필요한 이유를 알아보자.

 

CORS가 필요한 이유

만약 cors가 없이 모든 곳에서 데이터를 요청할 수 있게 된다면, 개인정보 같은 중요한 정보들을 악의적으로 가져올 수가 있게 된다.

예를 들어 네이버 같은 사이트에 로그인을 해놓으면 데이터가 쿠키로 저장이 되어 다음에 다시 접속했을 때 이 쿠키를 보고 로그인이 유지되어있는 경우가 있다.

즉, 네이버에 API 요청 등을 보낼 때마다 이 요청이 나(사용자)로부터 왔다는 걸 증명하기 위해 같이 보내지는 인증정보들이 내 사이트에 저장이 되어 있다.

 

근데 여기서 네이버와 아주 똑같이 동작하는 사이트를 누군가 만들어서 이 유사 네이버에 로그인하도록 만들면, 로그인했던 세션을 쉽게 탈취할 수 있다.  

 

이렇게 다른 출처의 접근을 막기 위해서 동일 출처 정책(SOP)이 등장했다.

 

동일 출처 정책 (Same-Origin Pollicy) 

동일 출처 정책은 동일한 출처, URL 끼리만 API 등의 데이터 접근이 가능하도록 막아 다른 출처 공격을 예방한다.

 

근데 동일 출처 정책을 지키면 다른 출처의 리소스를 가져오지 못하게 되는데 현실적으로 외부 리소스를 가져와야 하기 때문에, 즉 다른 출처의 리소스를 가져와야 하는 상황이 발생하는데 이때 필요한 게 CORS이다.

다시 말해 외부의 리소스를 가져올 수 있게 하는 게 CORS이다.

CORS의 정의 그대로 다른 출처 간의 리소스를 공유할 수 있도록 해준다.

 

정리하자면 다른 출처끼리 요청을 주고받는 것이 안 되는 게 기본값(SOP)인데 여러 서비스들 간에 데이터를 자유롭게 주고받아질 필요가 생겨서 만들어진 게 CORS이다.

 

정의만 딱 봤을 때 다른 출처 간 리소스를 공유해준다는 게 무슨 소리인가 싶었는데 예를 들면서 정리하니까 개념이 머릿속에 쏙쏙 박혔다.

앞으로도 이해 안 되는 개념들이 있으면 정의만 주야장천 쳐다보면서 외우는 게 아니라 내 언어로 만드는 게 그 개념을 가장 빨리 이해하는 방법인 것 같다.

 

Action Plan

 - 코딩 인터뷰 시간에 내가 대답 못했던 질문뿐만 아니라 동료들이 받는 질문들도 같이 생각해보면서 대답 못하는 질문들은 노션에 따로 정리해서 공부하자

 - 코딩 인터뷰는 골든벨과 달리 하루 전에 준비한다고 잘하는 게 아니니 매일 짧게 10분이라도 개념노트 보면서 인출하는 연습하기