[책 공동 집필 프로젝트] 1주차_CORS(Cross-Origin Resource Sharing)

1주차 책 집필 용어, CORS

얼마전 책 집필한다는 포스팅을 했었는데요. 벌써 2주차 용어가 끝이 났습니다.

특히나 CORS 용어는 관련 내용을 집필하며 비전공자들 또한 쉽게 이해 할 수 있는 재미있는

예시를 만들었는데 책에서는 빼야 될 것 같아서 이 예시를 블로그에 포스팅을 해야겠다 생각했습니다.

※ 계약서에 '책 내용 전체를 포스팅에 옮길 때 제한'이 있어 일부만 포스팅했습니다.

CORS란 ?
CORS(교차 출처 리소스 공유)는 브라우저에서만 가지고 있는 체제입니다. 클라이언트가 자신의 도메인과 서로 다른 도메인 간의 리소스를 가져오고 싶은 경우, 정해진 규약을 통해 선택한 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

‘https://localhost:8080’은 ‘https://localhost:3001’로부터 요청한 리소스를 받아오려 시도하고 있지만 브라우저가 제한하는 SOP(동일 출처 정책) 기준 3개(Scheme, Host, Port) 중 Port가 8080에서 3001로 즉, 서로 다른 도메인으로 요청하고 있으므로 CORS 오류가 발생했습니다.

등장배경

브라우저에 JavaScript가 도입된 이후, Netscape Navigator 2.02 버전에서 웹 보안을 위해 SOP(동일 출처 정책)이 등장하였습니다. 이는 동일한 도메인의 리소스만 상호작용을 허용하는 정책입니다. 즉, 서로 다른 도메인 간의 리소스를 받아오는 것을 제한함으로써 잠재적인 보안 위협으로부터 보호해주는 정책입니다. 하지만 보안도 중요하지만, 개발을 하다 보면 기능상 어쩔 수 없이 다른 도메인 간의 상호작용을 해야 하는 경우가 존재합니다. 이런 경우를 대비하기 위해 SOP의 예외 정책으로 CORS(교차 출처 리소스 공유)라는 체제를 마련해두었습니다. 따라서 CORS을 구성하여 사용하면 SOP의 제한을 받지 않게 됩니다.

[그림 2-26] 웹 브라우저 Netscape Navigator 2.0.2

※아래 부분은 책 집필 과정중, 삭제된 내용입니다.

그럼 이제부터 비전공자도 쉽게 이해 할 수 있는 현실세계로 가정했을 때의 CORS를 알아보겠습니다.

길동이라는 친구가 △△이탈리안 레스토랑을 갔다고 가정해보겠습니다.

레스토랑에서 음식 주문을 다 해놨는데 갑자기 ◯◯◯짬뽕의 해물 짬뽕이 너무 먹고 싶어 졌습니다.

그래서 너무 먹고 싶으니까 집에 있는 것처럼 배달어플을 이용해서 위치를 △△이탈리안 레스토랑이라고 입력하고 주문을 할 수 있을까요? 뭐, 특정 음식점이나 장소 같은 경우는 배달음식이 가능하겠지만, 대한민국에서만큼은 상식적으로 그러는 건 말이 안 되겠죠? 그러면 만약 특이사항이라는 가정하에 꼭 ◯◯◯짬뽕의 해물짬뽕을 먹어야 한다면 △△이탈리안 레스토랑의 관리자에게 물어봐야 하겠지요. 그리고 관리자가 “주문해도 괜찮습니다”는 승낙받은 후, 길동이는 주문해서 레스토랑에서 먹을 수 있다고 할 수 있습니다. 그럼 상황 속의 △△이탈리안 레스토랑과 ◯◯◯짬뽕은 서로 다른 도메인을 가졌고, ◯◯◯짬뽕 도메인에서 판매하는 해물짬뽕을 리소스라고 가정한다면, 이 해물짬뽕(=리소스)을 △△이탈리안 레스토랑 도메인을 관리를 담당하고 있는 관리자(=브라우저)에게 “저 ◯◯◯짬뽕 도메인에서 해물짬뽕(= 리소스)을 받아와도 괜찮을까요?”라고 요청을 승낙받은 후, 주문한 해물짬뽕(=리소스)을 △△이탈리안 레스토랑 도메인 안에서 사용할 수 있게 됩니다.