CORS 파헤치기

CORS (Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 페이지의 리소스가 다른 도메인의 리소스에 어떻게 접근할 수 있는지를 정의하는 웹 브라우저에서 사용하는 보안 특성이다.

웹 애플리케이션은 종종 다른 도메인에서 데이터를 가져오기 위해 XMLHttpRequest나 Fetch API를 사용한다.

보안상의 이유로, 웹 브라우저는 "동일 출처 정책"(Same-Origin Policy)을 시행하여 웹 페이지가 다른 도메인의 리소스에 기본적으로 접근하는 것을 하는데, 이 정책은 악의적인 웹사이트가 사용자 데이터에 접근하거나 변경하는 것을 방지하기 위한 목적으로 사용된다.

하지만, 이러한 동일 출처 정책 때문에 정당한 목적으로 다른 도메인의 리소스에 접근하려는 시도들도 함께 막게 되는데, CORS는 이런 다른 도메인에 접근하려는 시도를 안전한 방법으로 도메인 간 리소스 공유를 가능하게 하는 메커니즘이며, 서버 측에서 HTTP 헤더를 사용하여 특정 도메인의 접근을 허용하게 된다.

 

CORS 특징

1. 보안 목적: 웹 브라우저의 동일 출처 정책을 확장하여 사용자의 데이터를 보호하면서도 다른 출처의 리소스에 안전하게 접근할 수 있는 방법을 제공한다.
2. HTTP 헤더를 통한 제어: CORS는 HTTP 헤더를 통해 교차 출처 요청을 허용, 제한, 또는 조절한다. 이 헤더에는 요청이 허용될 출처, 메서드, 헤더 등을 지정할 수 있다.
3. Preflight 요청: 복잡한 요청의 경우, 실제 요청 전에 "preflight" 요청이라는 사전 체크 요청이 발생하는데, 이는 OPTIONS 메서드를 사용하여 서버에 전송되며, 서버는 해당 요청에 대해 어떤 것들이 허용되는지 알려주는 응답을 반환한다.
4. 자격 증명과 함께 사용: 기본적으로 CORS 요청은 브라우저의 쿠키나 HTTP 인증 정보와 같은 자격 증명을 포함하지 않는다. 만약 이러한 자격 증명을 포함하여 요청을 보내려면 특별한 설정이 필요하며, 이 때 withCredentials 옵션과 Access-Control-Allow-Credentials 헤더가 사용된다.
5. 브라우저 지원: 대부분의 현대 웹 브라우저에서는 CORS를 지원한다. 그러나 오래된 브라우저 버전에서는 지원되지 않을 수 있으므로, 호환성을 위한 폴리필이나 대체 방법을 고려해야 할 수도 있다.
6. 서버 구성: 서버는 CORS를 지원하기 위해 적절하게 설정되어야 한다. 다양한 웹 서버와 프레임워크는 CORS 설정을 지원하기 위한 도구와 라이브러리를 제공한다.
7. 에러 처리: 브라우저는 CORS 정책 위반 시 에러를 콘솔에 기록하며, 개발자는 이러한 에러 메시지를 통해 문제를 진단하고 해결할 수 있다.

 

동작 방식

cors 동작 방식

 

1. Simple Request (단순 요청):
   • 특정 HTTP 메서드 (GET, POST, HEAD)를 사용하고, 특정 헤더만 포함될 때 브라우저는 바로 실제 요청을 보낸다.
   • 서버는 응답에 Access-Control-Allow-Origin 헤더를 포함시켜 이 요청이 다른 출처에서 허용되는지 여부를 전송한다.
   • 브라우저는 이 헤더를 확인하고, 해당 출처가 허용된다면 웹 페이지에 응답 내용을 전달한다.
2. Preflighted Request (사전 요청):
   • 더 복잡한 요청들 (예: PUT 메서드 사용 또는 커스텀 헤더 포함)을 전송하기 전에, 브라우저는 실제 요청을 전송하기 위한 "사전 요청"을 보낸다. 이 사전 요청은 OPTIONS 메서드를 사용한다.
   • 서버는 OPTIONS 요청에 대한 응답으로, 어떤 메서드와 헤더가 실제 요청에서 허용되는지를 나타내는 Access-Control-Allow-Methods와 Access-Control-Allow-Headers 헤더를 반환한다.
   • 브라우저는 이 헤더들을 검사하고, 실제 요청이 서버에 의해 허용되는 경우 실제 요청을 전송한다.
3. Credentials (자격 증명) 요청:
   • 요청이 사용자의 로그인 세션 정보나 쿠키와 같은 자격 증명 정보를 포함해야 하는 경우, 요청에는 credentials flag가 포함된다.
   • 이 경우, 서버 응답은 반드시 Access-Control-Allow-Credentials: true 헤더를 포함해야 하며, Access-Control-Allow-Origin 헤더 값에는 * 대신 구체적인 도메인이 명시되어야 한다.

 

CORS 에러

CORS 에러는 웹 페이지가 다른 도메인의 리소스에 접근하려고 할 때 웹 브라우저의 동일 출처 정책(Same-Origin Policy)에 의해 발생하는 에러이다.

이 정책은 웹 페이지의 스크립트가 다른 출처의 리소스에 접근하는 것을 기본적으로 제한하여 사용자의 데이터를 보호하려는 것으로 해당 에러를 해결하기 위한 방법은 여러 가지가 있다.

해결 방법

서버에서 CORS 헤더 설정하기: 가장 일반적인 해결 방법은 서버에서 적절한 CORS 헤더를 추가하는 것이다.

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 특정 도메인이나 *로 모든 도메인을 허용한다
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

 

위 코드와 같이 Node.js에서 Express.js를 사용하는 서버에서는 다음과 같이 설정할 수 있다.

프록시 서버 사용하기: 클라이언트와 API 서버 간의 통신을 중계하는 프록시 서버를 설정하여 동일 출처 정책을 우회할 수 있다. 웹 개발 환경에서는 create-react-app이 제공하는 프록시 기능을 사용하거나 webpack-dev-server의 프록시 설정을 이용할 수 있다.

// pakage.json
{
  "name": "your-app-name",
  "proxy": "http://server-url", // 서버 url
  ...
}

 

CORS 미들웨어/라이브러리 사용하기: 일부 웹 프레임워크나 서버 플랫폼에서는 CORS 설정을 쉽게 도와주는 미들웨어나 라이브러리가 제공된다.

예를 들어, Express.js에서는 cors 미들웨어를 사용하여 CORS 설정을 간편하게 할 수 있다.

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

app.use(cors());

app.get('/data', (req, res) => {
    res.send('server open!')
    res.end()
});

app.listen(3000);