# 1.CORS의 시작
웹 개발자라면 누구도 피해갈 수 없는 부분.
# CORS란?
Cross Origin Resource Sharing의 줄임말로 직역하면 교차 출처 리소스 공유이다. 대충 생각해보면 출처가 교차된 리소스의 공유 방식에 대한 설정임을 유추할 수 있다. 웹 개발자들은 왜 이런 에러를 마주하게 될까?
내가 처음 cors에러를 맞닻뜨린것은 그 많은 코드를 입력하는 회사에서가 아닌 집에서 혼자 개인 프로젝 트를 진행할 때였다. 왜 그렇게 됐는지는 차근차근 작성하겠다.
# 교차 출처란?
cors를 이해하기 위해서는 교차 출처라는 단어를 이해해야한다. cors에러는 내가 다른 곳으로 무언가를 호출할 때 만날 수 있는 에러다. 그래서 출처를 이해하는 것이 중요하다. 우리가 ppt나 블로그에 글을 작성할 때 다른 곳에서 정보를 가져오면 출처를 적지 않는가? 바로 그 출처이다. 나의 정보가 아닌 다른 곳에서 참조 혹은 가져오는 데이터인 것이다.
# 웹에서의 출처
- Protocol : http, https
- Host : 사이트 도메인(IP...)
- Port : 포트 번호
- Path : 사이트 내부 경로
- Query string : 요청의 key와 value 값
- Fragment : 해시 태그
여기서 origin은 프로토콜, 호스트, 포트를 합친 영역을 합친 URL이라고 보면 된다.
그러니까 해당 부분이 다르다면 다른 출처라고 생각하면 된다.
# Cross-origin / Same-origin
cors가 발생되는 조건은 위처럼 출처가 다를때지만 어떤 데이터와 어떤 방식으로 요청했는지에 따라서도 달라진다. 이 부분은 Cross origin, Same-origin로 두 가지의 정책으로 분류할 수 있다.
# Cross origin
교차 출처여도 즉, 출처가 달라도 데이터를 요청할 수 있다는 것이다. 우리가 기본적으로 사용하는
<img>, <video>, <script>, <link>등의 태그가 교차 출처를 허용한다.
# Same-origin
Cross-origin과는 반대의 성격을 가지며 해당 정책은 태그가 아니라 http 요청에 의한 통신일 때 적용된다.
XMLHttpRequest와 fetch API등이 해당 되는 것이다. 자바스크립트의 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한한다. 브라우저는 기본으로 하나의 서버 연결만 허용되도록 설정되어있기 때문이다.
# 동일 출처 정책(Same-Origin-Policy)
이 정책은 말 그대로 동일한 출처에 대한 정책을 말한다. "동일 출처 서버에 있는 리소스는 자유로이 가져올 수 있지만 다른 출처 서버의 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능하다." 라고 하는 정책이다.
# 필요한 이유?
한번 상상해보자, 간단한 예시이다.
- 배고픈 사람 한명과 배고픈 해커 한명이 있다.
- 배고픈 사람은 매일 저녁 2만원 상당의 음식을 주문한다.
- 배고픈 해커는 배고픈 사람의 저녁이 너무나 부러운 나머지 나쁜 마음을 먹게 된다.
- 배고픈 사람이 매일 저녁 배달 앱으로 음식을 주문하는 것을 알아챈 해커는 배고픈 사람이 사용하는 앱에 작업을 하기로 한다.
- 배고픈 사람이 주문을 할 때마다 사용하는 카드의 정보를 가로채 자신이 만든 앱으로 결제 정보를 전송해 본인이 사용하기로 한 것이다.
- 해커는 이 과정을 반복해 매일 매일을 풍족하게 보낼 수 있었다고 한다.
SOP, 동일 출처 정책이 없었다면 이러한 일들이 펼쳐지기가 쉬울 것이다.
# Next...
cors가 어떻게 동작하는지 그러면 해결하기 위해 서버가 작업해야하는지 클라이언트에서 작업해야하는지 이 모든것을 수월하게 해겨한 프록시 서버란 무엇인지에 대한 내용을 이어서 작성합니다.
참고 블로그