CORS는 왜 사이트를 만들 때 어렵게 만드는거야?

CORS(Cross-Origin Resource Sharing)는 웹 개발자들 사이에서 빈번하게 논의되는 주제입니다. 하지만 웹사이트 개발에 있어서 필수 보안 정책입니다. 웹사이트를 만들 때 마주치는 다양한 도전 중 하나인 CORS는 특히 REST API 서버 개발 시 중요한 역할을 합니다. 이 글에서는 CORS가 웹사이트 개발을 어렵게 만드는 이유와 그 중요성에 대해 설명하겠습니다.

 

 

이글을 쓴 이유는 REST API서버를 만들었는데 fetch 에러났습니다.

[Nodejs] RestAPI 서버를 만들었는데 TypeError: Failed to fetch 에러

cors 에러를 해결해야지만 이 문제가 해결이 되는데, cors의 개념이 뭔지 알고 싶어졌습니다.

 

1. CORS의 기본 개념

CORS는 웹 보안을 위한 중요한 정책으로, 브라우저가 다른 출처(origin)에서 리소스를 가져올 수 있는지 결정하는 메커니즘입니다.

이 정책은 도메인, 프로토콜, 포트가 다른 서버로부터 리소스를 요청할 때 적용됩니다.

이는 웹사이트에서 외부 리소스(예: 폰트, API)를 사용할 수 있도록 하면서도, 악의적인 교차 사이트 요청을 방지하기 위해 필요합니다.

 

2. 보안 목적

브라우저는 기본적으로 동일 출처 정책을 따르기 때문에 웹 페이지가 같은 출처의 리소스에만 기본적으로 접근할 수 있게 하여, 사용자의 데이터를 보호합니다.

CORS는 이러한 제한을 완화하여 필요에 따라 안전하게 다른 출처의 리소스에 접근할 수 있게 합니다.

올바른 CORS 설정은 웹사이트의 보안을 유지하는 동시에 필요한 리소스의 사용을 가능하게 합니다.

 

3. 설정 복잡성

CORS는 다양한 헤더(예: Access-Control-Allow-Origin, Access-Control-Allow-Methods)를 통해 구성됩니다.

이러한 옵션들로 인해 세부설정이 복잡해지며, 실수할 여지가 높아집니다.

올바른 CORS 구성을 위해서는 이러한 설정에 대한 깊은 이해와 주의가 요구됩니다.

 

4. 개발자의 고려사항

헤더들은 개발자가 출처, 메소드, 헤더 등에 대한 세밀한 제어를 할 수 있도록 합니다.

잘못된 헤더 설정은 보안 취약점으로 이어질 수 있으므로, 개발자는 CORS 설정에 대해 정확한 이해와 주의가 필요합니다.

// 기본적인 CORS 설정 예시 (Node.js Express 환경)
const express = require('express');
const cors = require('cors');

const app = express();

// CORS 설정: 특정 도메인만 허용하는 경우
app.use(cors({
  origin: 'https://example.com'
}));

// 나머지 서버 코드...

이 코드는 기본적인 CORS 설정을 보여주며, 실제 프로덕션 환경에서는 더 복잡한 설정이 필요할 수 있습니다. 예를 들어, 여러 도메인을 허용하거나, 특정 HTTP 메소드만 허용하는 등의 설정이 그 예입니다.

 

5. 개발 환경의 차이 인식

개발 환경에서는 편의를 위해 모든 출처를 허용하는 경우가 많지만, 프로덕션 환경에서는 보안을 위해 특정 출처만 허용하는 것이 일반적입니다.

이러한 차이는 개발 중에는 문제가 없어 보이지만 실제 운영 환경에서는 예상치 못한 CORS 관련 문제를 일으킬 수 있습니다. 따라서 환경별로 적절한 CORS 설정을 해야 합니다.

환경 변수 사용

• 애플리케이션의 환경(개발 또는 프로덕션)에 따라 다른 설정을 적용할 수 있도록 환경 변수를 사용합니다.
• 예를 들어, .env 파일이나 환경 설정에서 NODE_ENV 변수를 'development' 또는 'production'으로 설정하고, 이를 코드에서 확인하여 적절한 CORS 정책을 적용합니다.

조건부 CORS 설정

• 코드 내에서 환경 변수를 체크하여 개발 환경에서는 모든 출처를 허용하고, 프로덕션 환경에서는 특정 출처만 허용하도록 조건을 설정합니다.
• NODE_ENV가 'production'일 때만 특정 도메인을 허용하도록 구성할 수 있습니다.

환경별 설정 파일

• 개발과 프로덕션 환경에 대한 별도의 설정 파일을 만들고, 애플리케이션 시작 시 해당 환경에 맞는 설정 파일을 로드합니다.
• config.dev.js와 config.prod.js 파일을 생성하여 각 환경에 맞는 CORS 설정을 정의할 수 있습니다.

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

if (process.env.NODE_ENV === 'production') {
    // 프로덕션 환경: 특정 도메인만 허용
    app.use(cors({ origin: 'https://example.com' }));
} else {
    // 개발 환경: 모든 출처 허용
    app.use(cors());
}

// 나머지 서버 코드...

이렇게 환경별로 적절한 CORS 설정을 하는 것은 보안을 유지하면서 개발의 편의성을 높이는 중요한 방법입니다.

테스트 및 검증

CORS 설정 변경 시, 반드시 개발 환경 뿐만 아니라 스테이징 환경에서도 충분히 테스트하여 프로덕션 환경에 배포하기 전에 모든 경우를 검증합니다.

 

결론

CORS는 웹 보안과 사용자 경험을 향상시키는 중요한 역할을 하지만, 이를 위해 개발자는 보안과 편의 사이에서 세심한 균형을 맞추어야 합니다. 복잡한 설정과 환경 차이에 대한 이해는 웹 개발의 필수적인 부분이며, 이를 통해 안전하고 사용자 친화적인 웹사이트를 제공할 수 있습니다.