CORS(Cross-Origin Resource Sharing)에 대한 이해와 대응 방법

CORS(Cross-Origin Resource Sharing)에 대한 이해와 대응 방법

1. CORS란?

1.1 CORS의 개념

CORS는 웹 애플리케이션의 보안을 강화하기 위해 도입된 정책 중 하나로, 웹 페이지에서 리소스가 다른 도메인에 있는 경우 브라우저에서 보안상의 이유로 이 리소스에 접근하는 것을 제한하는 정책입니다.

1.2 왜 CORS가 필요한가?

보안 상의 이유로 인해 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르고 있습니다. 이는 웹 페이지에서 리소스를 요청할 때, 해당 리소스와 웹 페이지의 출처(프로토콜, 도메인, 포트가 일치하는 경우)가 같아야만 요청이 허용된다는 규칙입니다. 하지만 현대의 웹 애플리케이션에서는 다양한 출처의 리소스에 접근해야 하는 경우가 많아졌기 때문에 CORS가 필요합니다.

2. CORS 발생 원인

CORS 오류는 주로 다음과 같은 경우에 발생합니다.

2.1 다른 출처로의 AJAX 요청

웹 페이지에서 다른 도메인의 API나 리소스에 직접 AJAX 요청을 보내는 경우, 브라우저는 Same-Origin Policy에 따라 요청을 차단합니다.

2.2 특정 헤더의 사용

특정 헤더(예: Authorization, Content-Type)를 사용하여 서버에 요청을 보내는 경우, 사전 검사(preflight) 요청이 발생하고 서버가 CORS를 허용하지 않으면 오류가 발생합니다.

3. CORS 오류 대응법

CORS 오류를 해결하기 위해 다양한 방법이 있습니다.

3.1 서버 측 설정

서버에서 CORS를 허용하도록 설정하는 방법이 있습니다. 서버에서는 응답 헤더에 Access-Control-Allow-Origin 등의 헤더를 설정하여 어떤 출처에서의 요청을 허용할지 명시합니다.

// Express.js를 사용하는 경우
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 모든 출처 허용
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// 나머지 라우팅 및 미들웨어 처리

3.2 JSONP 사용

JSONP(JSON with Padding)를 활용하여 서로 다른 출처 간에 데이터를 주고받을 수 있습니다. 단, JSONP는 GET 요청만 가능하며 보안상의 이슈가 있을 수 있습니다.

<script>
  function handleData(data) {
    // 데이터 처리 로직
  }
</script>
<script src="http://example.com/api/data?callback=handleData"></script>

3.3 프록시 서버 사용

클라이언트에서 직접 요청을 보내는 대신 동일한 도메인의 서버에 요청을 보내고, 서버에서 다른 출처로의 요청을 대신 보내는 방법을 사용할 수 있습니다.

4. CORS와 보안

CORS는 클라이언트 측에서 이루어지기 때문에 완전한 보안을 제공하지는 않습니다. 따라서 중요한 데이터의 경우 서버 측에서도 적절한 보안 조치를 취해야 합니다.

5. CORS 오류 해결을 위한 Best Practice

CORS 오류를 해결하는 가장 좋은 방법은 서버와 클라이언트

간의 소통을 원활히 하기 위해 서버 설정을 정확하게 수행하는 것입니다. 출처를 명시적으로 지정하거나 모든 출처를 허용하는 대신 필요한 출처만을 허용하는 것이 좋습니다.

이러한 CORS에 대한 기본적인 이해와 대응 방법을 통해 웹 개발에서 발생할 수 있는 오류를 최소화하고 보다 안전하게 웹 애플리케이션을 개발할 수 있습니다.