CORS란?

jjyung·2021년 11월 1일
0

JS

목록 보기
11/13
post-thumbnail

글을 쓰게된 계기

프로젝트를 진행하다보면 다양한 문제점이 발생하는데, 그 중 하나가 CORS 에러다. 사실 이 에러는 엄청 흔하게 발생하다보니(아직 마주한적은 없지만) 기술 면접에도 흔히 나오는 주제다. 그래서 프로젝트를 진행하기전에 CORS에 대해 알아보고, 만약 CORS 에러가 난다면 당황하지않고 잘 해결하기위해(?) 이 글을 적게되었다.

CORS란?

CORS(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

위의 정의는 MDN에서 정의한 CORS이다. CORS는 SOP(Same Origin Policy)에 따라 자신의 출처와 동일하지 않은 다른 서버의 위치에서 접근하고자 할 때 HTTP 요청을 제한하게되는데 이를 해결해주고자 하는 것이 CORS 정책이다. 즉, SOP가 브라우저에서 다른 출처의 접근을 막는것이고, CORS는 이 출처 제한을 해결하고자 하는 것이다.

그렇다면 이렇게 요청을 제한하는 이유는 무엇일까? 아무래도 브라우저에는 정말 많은 리소스를 가지고있다. 개발자 도구만 봐도 마크업과 스타일링, script까지 볼 수 있을뿐만 아니라 쿠키나 세션에 로그인 정보들도 가지고있기 때문에 보안에 취약하다. 그래서 브라우저에서 만약 아무런 제약이 없었다면 사용자 정보가 이미 벌써 다 털렸을 것이다. 이런 취약점이 있는데도 왜 CORS가 생겨나게 된것일까? 웹 생태계가 다양해지면서 데이터를 더 자유롭게 주고받아야 할 일들이 많이 생겼다. 이런 필요성에 의해 CORS란 정책이 생겨난 것이다. 그래서 백엔드 (우리 프로젝트에서는 아마 express...?)에서 CORS 옵션을 넣어 해당 사이트에서 접근을 허용한다면 그 데이터들을 자유롭게 사용할 수 있게 되는 것이다.

CORS의 동작 방법

  1. HTTP header에 Origin:을 함께 담아 보낸다.
  2. 서버에서 요청을 받으면 응답 헤더에 Access-Control-Allow-Origin이라는 값에 허용된 출처를 보내주게된다.
  3. 이 응답을 받은 브라우저는 Origin을 들고 다시 서버에 방문하게되는데, 이 때 서버는 Origin과 Access-Control-Allow-Origin을 비교해 유효한 응답인지 확인한다.
  4. 만약 유효한 응답이라면 해당 리소스에 접근이 가능해진다.

Preflight Request(프리플라이트)

  • 프리플라이트는 이름과 같이 한번에 요청을 보내는것이 아니라 예비(pre) 요청과 본 요청을 나누어 보내는것이다. 이렇게 예비 요청을 보내고 안전하다고 판단이 되면 그 때 엔드포인트로 본 요청을 보내게되는 것이다. 자바스크립트에는 예비 요청에 대한 판단은 넘어가지않고 본 요청에 대한 서버의 응답만 넘어가게된다.

Simple Request

  • 프리플라이트와 전반적인 flow는 같으나, 예비 요청이 없다는 점이 차이점이다. 즉, 예비 요청없이 바로 엔드포인트에 본 요청을 보내고, origin과 Access-Control-Allow-Origin을 비교해 유효성 검증을 하게된다. preflight 보다 간단(?)하다고해서 이 방식을 항상 사용하는것이 아니라 조건을 만족할때만 예비 요청을 생략할 수 있다 (preflight request를 일반적으로 사용한다...)

Credentialed Request

  • 앞서 다른 방식들보다 보완을 강화하고싶을때 사용하는 방식이다. HTTP cookies와 HTTP Authentication 정보를 인식해 만약 Access-Control-Allow-Credentials: true 헤더가 없다면 응답을 거부한다.

Access-Control-Allow-Origin

앞서서 계속 access-control-allow-origin이란 용어를 사용했는데, access-control-allow-origin 뒤에는 단일 출처를 지정해주고, 브라우저가 해당 출처의 리소스에 접근하도록 허용하는 것이다.

느낀점

CORS를 알기 전에는 마냥 어려운 용어였는데 알고보니 정보를 보완해주는 상당히 유용한 정책이라는 생각이 들었다. 토이 프로젝트를 하며 다양한 API를 사용하다보면 분명 CORS 에러를 많이 마주할 것 같은데 그 때 당황하지않고 잘 해결할 수 있겠다는 생각이 들었다. 토이 프로젝트를 진행하다 해당 에러를 마주한다면 업데이트를 할 예정이다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://evan-moon.github.io/2020/05/21/about-cors/

profile
🏃‍♀️movin' forward, developer

0개의 댓글