Express 개발 강좌, CORS의 개념과 필요성

1. CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 웹 애플리케이션이 자신의 출처(origin)와 다른 출처에 있는 자원에 접근할 수 있도록 허용하는 메커니즘입니다. 출처란 프로토콜(예: http, https), 호스트(도메인), 포트 번호의 조합입니다. 예를 들어, https://example.com과 https://api.example.com은 다른 출처로 간주됩니다.

2. CORS의 필요성

기본적으로 웹 브라우저는 보안 상의 이유로 서로 다른 출처 간의 요청을 제한합니다. 이는 XSS(교차 사이트 스크립팅) 공격 및 CSRF(교차 사이트 요청 위조)와 같은 보안 위협으로부터 사용자를 보호하기 위한 것입니다. 따라서, CORS는 웹 애플리케이션이 안전하게 다양한 출처의 리소스에 접근할 수 있도록 하는 규칙을 정의합니다.

2.1 CORS의 동작 원리

CORS는 HTTP 헤더를 통해 작동합니다. 서버는 요청을 받은 후 클라이언트의 요청 출처를 검증하고, 필요에 따라 적절한 CORS 헤더를 추가하여 응답합니다. 주요 CORS 헤더는 다음과 같습니다:

Access-Control-Allow-Origin: 허용된 출처를 지정합니다.
Access-Control-Allow-Methods: 허용된 HTTP 메소드를 명시합니다.
Access-Control-Allow-Headers: 허용된 요청 헤더를 지정합니다.
Access-Control-Expose-Headers: 클라이언트가 접근할 수 있는 헤더를 정의합니다.

2.2 CORS의 실제 동작 예시

클라이언트가 CORS 요청을 보낼 때, 브라우저는 먼저 OPTIONS 메소드를 사용하여 Preflight 요청을 수행합니다. 서버는 이 요청에 대한 응답으로 CORS 헤더를 포함하여 클라이언트가 실제 요청을 진행할 수 있는지 여부를 확인합니다.

3. Express에서 CORS 설정하기

Express에서는 cors 미들웨어를 사용하여 CORS를 쉽게 설정할 수 있습니다. 먼저 cors 패키지를 설치해야 합니다:

npm install cors

3.1 기본적인 사용법

설치 후, Express 애플리케이션에 cors 미들웨어를 추가하여 모든 출처에 대해 CORS 요청을 허용할 수 있습니다.

const express = require('express');
const cors = require('cors');

const app = express();

// CORS 미들웨어 사용
app.use(cors());

app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS 설정 성공!' });
});

app.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});

3.2 특정 출처에 대한 CORS 설정

특정 출처에 대해서만 CORS 요청을 허용하고 싶다면, cors 미들웨어에 설정 객체를 전달하면 됩니다. 아래 코드는 https://example.com에서 오는 요청만 허용하는 예제입니다.

const express = require('express');
const cors = require('cors');

const app = express();

// 특정 출처에 대해서만 CORS 허용
const allowedOrigins = ['https://example.com'];

app.use(cors({
    origin: function(origin, callback){
        // 출처가 없는 경우 (예: 로컬 요청) 허용
        if(!origin) return callback(null, true);
        if(allowedOrigins.indexOf(origin) === -1){
            const msg = 'CORS 정책에 의해 접근이 거부되었습니다.';
            return callback(new Error(msg), false);
        }
        return callback(null, true);
    }
}));

app.get('/api/data', (req, res) => {
    res.json({ message: '특정 출처 CORS 설정 성공!' });
});

app.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});

4. CORS의 보안 고려사항

CORS를 설정할 때 주의해야 할 점은, 너무 많은 출처를 허용할 경우 보안에 취약해질 수 있다는 점입니다. 접근을 허용하는 출처를 엄격히 관리하고, 특히 민감한 데이터에 대한 접근은 신중하게 설정해야 합니다.

5. CORS 에러 처리

CORS가 설정되지 않았거나 잘못 설정된 경우 브라우저는 CORS 에러를 발생시킵니다. 이러한 에러는 일반적으로 콘솔에서 확인할 수 있으며, 개발자는 서버의 CORS 설정을 적절히 수정하여 문제를 해결해야 합니다.

6. 결론

CORS는 현대 웹 애플리케이션 개발에서 필수적인 요소입니다. 웹 보안을 강화하면서도, 다양한 출처의 리소스에 안전하게 접근할 수 있도록 해주기 때문에 개발자는 CORS의 개념과 설정 방법을 잘 이해하고 활용해야 합니다.

Express 애플리케이션을 구축할 때 CORS는 꼭 설정해야 할 사항이며, 위의 예제 코드를 통해 쉽게 적용할 수 있습니다. 항상 보안을 염두에 두고, 필요한 출처만 허용하는 철저한 정책을 유지하시길 바랍니다.