NestJS 帶你飛！ 시리즈 번역 28# CORS

이 포스팅은 「NestJS 기초실무 가이드 : 강력하고 쉬운 Node.js 웹 프레임워크로 웹사이트 만들기」
(서명: NestJS 基礎必學實務指南：使用強大且易擴展的 Node.js 框架打造網頁應用程式)
책이 출간되었습니다.

 

대부분의 개발자들은 프론트엔드와 백엔드가 서로 다른 도메인에 있을 때

교차 출처 리소스 공유 (Cross-Origin Resource Sharing, 跨來源資源共享) 문제에 부딪치곤 합니다.
약칭은 CORS입니다.

그렇다면 CORS라는건 어떤것이고 왜 발생할까요? 지금부터 알아봅시다!

 

CORS란 무엇인가요?

CORS란 다른 도메인 사이의 요청 자원을 제어하며이 CORS를 통해 한 출처에서 실행 중인 웹 애플리케이션이 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제이기도 합니다.

이 CORS는 동일 출처 정책(Same-Origin Policy, 同源政策)의 영향을 받아 만들어졌습니다.

 

동일 출처 정책

동일 출처 정책의 개념은 정말 간단합니다. 철수가 닌텐도 스위치를 가지고 있다고 가정해보겠습니다.

철수의 친구가 스위치로 게임을 하고싶은데,
친구가 철수의 스위치를 철수의 허락 없이 가져와 게임을 하고 놀면 이 행위는 용납될 수 있는 행위일까요?
당연히 아닐껍니다. 어떤일이 있더라도 확실하게 철수의 허락을 받아야만 철수의 스위치를 빌릴 수 있어야 합니다.

같은 원리로 A 도메인이 B 도메인에게 리소스 요청을 보냈습니다.
이때 B 도메인은 A 도메인의 접근을 허락했고, 도메인 접근은 성공했습니다.

이것이 바로 CORS라고 불리는 보안 방식이 출현하게된 배경입니다.

 

CORS 동작 모드

CORS는 다른 요청 상황에 따라 서로 다른 처리 방식을 적용합니다.
요청 상황은 "단순 요청"과 "비단순 요청"으로 나뉩니다.

 

단순 요청

단순 요청의 조건은 아래와 같습니다.

•  HTTP Method가 GET, POST, HEAD중 하나일 경우
• Header가 Accept, Accept-Language, Content-Langguage, Last-Event-ID, DPR, Save-Data, Viewport-Width, Width에 국한 될 경우
• Content-Type의 값을 application/x-www-form-urlencoded, multipart/form-data, text/plain만 받았을 경우

단순 요청인 경우 웹 브라우저는 해당 요청이 도메인 간 액세스인지 판단 하고 관련 정보를 Header에 추가합니다.

그러나 해당 요청이 허용된 범위에 속하지 않는다면 도메인 간 액세스는 허용되지 않습니다.

비단순 요청

비단순 요청인경우, 브라우저는 먼저 대상 도메인 서버에 OPTIONS 요청을 보냅니다.

서버는 허용 규칙을 포함한 Header를 반환해줍니다. 브라우저는 이 규칙을 확인한 후에 비단순 요청이 허용 규칙과 일치하는지 판단합니다. 일치하는 경우 브라우저는 실제 요청을 보내어 해당 리소스에 접근할 수 있습니다.

 

Nest와 CORS

Nest와 Express는 기본값이 허용하지 않음으로 같습니다. 

만약 허용하고싶다면 main.ts에 설정해주면 됩니다. app의 enableCors(options?: CorsOptions | CorsOptionsDelegate<any>) 이 메서드로 CORS를 허용할 수 있습니다.

 

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

 

Nest의 CORS 기능은 사실 Express의 cors 라이브러리를 패키징해 Nest 내장 라이브러리로써 활용하고 있습니다.

그렇기 떄문에 options을 구성함에 있어 cors 패키지의 구성 항목은 동일합니다.

 

위의 방법 외에도 한가지 방법이 더 있습니다.
바로 NestFactory의 create 메서드에 cors를 입력해주는것입니다.

아래는 해당 예제이며 값을 true로 설정한다면 enableCors()와 같은 효과를 낼 수 있습니다.

 

마치며

CORS 문제는 웹개발을 한다면 반드시 한번, 어쩌면 자주 마주칠 수 있는 문제입니다.
더욱이 프론트와 백엔드 환경이 분리되어 있는 상황이라면 더욱 더요.

해당 제품을 시장에 내놓을 때에는 일반적으로 절대 모든 도메인의 CORS를 허용하지 않습니다. 지정한 특정 도메인만을 화이트리스트에 추가해 사용합니다.

제품을 시장에 내놓기 전이라면 반드시 options를 설정하는것을 잊지 마세요!

 

 

참고 자료

MDN CORS