웹과 React Native에서 CORS는 어떻게 다를까? (+2024년 12월 근황)

👀본론으로 들어가기 전, 근황을 먼저 공유하겠다!

 

근황

2024년 11월부터 한국어능력시험 모의테스트 플랫폼 프로젝트 [TopikOn]에서 프론트엔드를 맡고있고, 2025년 1월 출시를 목표로 하고있다. [나를 포함한 프론트 2명 + 백엔드 1명 + 디자이너 1명 + 기획자 1명 + 풀스택/기획/매니저 1명] = 총 6명과 함께한다.

모두가 리모트로 일하지만 가끔은 게더를 켜놓고 하루종일 같이 있는 기분을 느끼며 코딩할 때도 있다. 덕분에 밴쿠버에서 외롭지 않게 작업하고 있다ㅎㅎ

 

기술스택은 다음과 같다.

- 프론트엔드: React Native + Next.js

- 백엔드: NestJS

 

React Native로는 이미 [루빗]에서 서비스 운영을 경험하고 [패스트캠퍼스 강의](접속 안되면 이 링크)까지 촬영해보았지만,

NextJS를 활용한 서비스 개발은 처음이라 웹에 관련된 지식이 부족함을 느끼고 있다.

그래서 아주 기본이 되는 개념부터 실제 프로젝트를 진행하면서 발생하는 문제까지 다양한 주제로 글 발행을 할 예정이다.

단순히 개념을 나열하기보단 현업에서의 연관성을 중심으로 작성한다.

(+ 프론트엔드 기술스택 선택 기준에 대해서도 추후 다뤄보도록 하겠다.)

---

 

오늘은 웹과 React Native에서의 CORS 차이에 대해 짧게 다뤄본다.

 

CORS (Cross-Origin Resource Sharing)

브라우저 보안 정책을 이해할 때 기본이 되는 개념이다.

CORS는 동일 출처 정책(Same-Origin Policy)으로 인해 다른 출처 간의 요청이 제한되는 것을 해결하고 안전하게 리소스를 공유하는 방법을 제공한다.

 

우리 프로젝트의 백엔드는 어떻게 되어있을까?

와일드카드(*)를 사용하여 모든 출처가 허용되어있다. 그래서 팀원에게 질문했다.

 

편의를 위해 허용되어있겠다만, 제대로 처리한다면 클라이언트의 도메인만 처리되어야 한다.

예를 들어 프론트 웹뷰에서 요청하는 도메인이 https://www.yourapp.com이라면 아래와 같이 허용할 도메인을 배열에 추가하여 화이트리스트에 등록한다.

app.enableCors({
  origin: ["https://www.yourapp.com"],
  ...
});

 

하지만 웹 클라이언트가 로컬호스트 환경에서 서버로 API를 테스트해야할 땐 문제가 될 것이다.

그럴 땐 프록시(proxy)를 사용해 Header의 Host를 수동으로 요청하여 서버가 허용한 도메인에서 보낸 것처럼 처리할 수 있다. (프로덕션 환경에서는 추천하지 않음.)

그리고 서버에서는 API키, JWT토큰 등의 추가 인증방식을 통해 클라이언트의 요청을 검증하는 등 다중 보안 레이어를 적용하는 것이 바람직하겠다.

 

🤔 그런데 또 하나 생기는 궁금증.

React Native에서 서버에 요청하는 건 CORS의 영향을 받지 않는걸까?

 

그렇다. React Native는 웹 애플리케이션처럼 브라우저 환경이 아니라 네이티브 환경에서 실행되기 때문에 요청에 Origin 헤더가 포함되지 않는다. 브라우저가 아니므로 출처(Origin)라는 개념이 적용되지 않아 CORS 검사를 수행할 필요가 없는 것이다.

대신 네트워크 라이브러리(fetch, axios)를 통해 요청이 직접 서버로 전달된다. 하지만 서버가 화이트리스트 도메인만 허용한다면, 추가적인 인증방식을 통해 검증이 필요하겠다. 가장 많이 쓰는 JWT토큰처럼.

 

마무리

Native 애플리케이션과는 달리, 웹 애플리케이션을 개발할 때는 브라우저의 보안 모델과 동작 원리에 대한 이해가 필수다.

'동일 출처 정책(Same-Origin Policy)'과 이를 대응 하기 위한 CORS에 대해 정확히 알고 실제 프로덕트에서 디버깅, 프록시, 그리고 보안 인증 방식(JWT, API 키 등)과 같은 실전 기술을 활용하여 브라우저 보안을 극복해야한다.

 

오늘은 여기서 끝!🫡