CORS는 Cross-Origin Resource Sharing의 약자로, 한 도메인에서 실행 중인 웹 애플리케이션이 다른 도메인의 리소스에 접근할 수 있도록 하는 보안 메커니즘입니다. 왜 쓰는 지 알아보고 적용방법에 대해 알아봅시다.
CORS 왜 써요?
한글로 번역하면 교차 출처 리소스 교환인데 매우 어려워요. 웹 어플리케이션이 자신의 리소스(도메인, 프로토콜 등)와 다를 때 사용합니다. 예를 들어 a.com이 b.com의 리소스를 호출할 수 있는 데요. 보안상 이슈로 막기 때문에 CORS를 적용해줘야 원활하게 데이터를 반환할 수 있습니다.
CORS 적용 방법
1. 서버측 설정
서버에서 HTTP 헤더를 설정해 CORS를 활성화할 수 있다. 예를 들어, Node.js의 Express를 사용한다면 다음과 같이 할 수 있다.
const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); });
2. 미들웨어 사용
여러 언어와 프레임워크에서는 CORS를 쉽게 적용할 수 있는 미들웨어가 있다. 예를 들어, Express에서는 cors
라이브러리를 사용할 수 있다.
const cors = require('cors'); app.use(cors());
3. 브라우저 측 설정
클라이언트 측에서도 CORS를 다룰 수 있다. 하지만 이 방법은 권장되지 않는다. 서버에서 처리하는 것이 더 안전하고 효과적이다.
4. Preflight 요청
HTTP OPTIONS
메서드를 사용하여 실제 요청 전에 CORS 설정을 체크하는 미리 요청을 보낼 수 있다. 이는 보통 서버에서 자동으로 처리되지만, 필요하다면 수동으로 설정할 수도 있다.
5. 특정 경로에만 적용
조건에 따라 특정 경로에만 CORS를 적용할 수 있다.
app.use('/api', cors());
6. 헤더 세부 설정
필요에 따라 다양한 CORS 헤더를 설정할 수 있다. 예를 들어, 특정 도메인만 허용하거나 쿠키를 지원하려면 다음과 같이 설정할 수 있다.
app.use(cors({ origin: 'http://example.com', credentials: true, }));
CORS의 장단점
CORS는 웹 애플리케이션에서 다른 도메인의 리소스에 접근해야 하는 경우 유용한 기능입니다. CORS를 적용할 때는 보안 위험과 성능 저하를 고려해야 합니다.
장점
- 웹 애플리케이션이 다른 도메인의 리소스에 안전하게 접근할 수 있습니다.
- 클라이언트 측 코드에서 서드 파티 API 및 리소스를 참조하는 경우가 많기 때문에 복잡한 애플리케이션을 개발하는 데 유용합니다.
단점
- 보안 위험이 증가할 수 있습니다. CORS를 잘못 적용하면 공격자가 클라이언트 측 코드를 통해 서버의 리소스에 접근할 수 있습니다.
- 성능이 저하될 수 있습니다. CORS 요청은 추가 HTTP 헤더를 포함하므로 성능이 저하될 수 있습니다.
마치며
이렇게 하면 CORS가 적용되어 다른 도메인에서도 특정 리소스에 접근이 가능합니다. 설정에 따라서는 제약을 더 세밀하게 설정할 수도 있어요.