브라우저 보안 – CORS(Cross-Origin Resource Sharing) 이해하기

1. CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 보안 정책 중 하나로, 웹 브라우저가 서로 다른 출처(origin) 간의 요청을 제어하는 방식입니다. 기본적으로 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy, SOP)을 적용하여 다른 도메인에서의 요청을 차단합니다. 즉, 스크립트가 실행된 도메인과 다른 도메인의 리소스에 접근하는 것을 제한하는 정책입니다.

하지만 현대 웹 개발에서는 API 서버와 프론트엔드 서버가 분리되는 경우가 많아, 서로 다른 출처에서 데이터를 요청해야 하는 경우가 많습니다. 이때 CORS는 이러한 교차 출처 요청을 허용하는 방법을 정의하여 보안과 기능성을 모두 충족할 수 있도록 합니다. CORS를 올바르게 이해하고 설정하는 것은 API 연동 및 웹 애플리케이션 개발에서 필수적인 요소입니다.

 

 

2. CORS의 동작 방식

CORS는 HTTP 헤더를 이용하여 브라우저가 요청을 허용할지를 결정합니다. 기본적으로 요청 방식은 두 가지로 나뉩니다.

(1) 단순 요청(Simple Request)

다음 조건을 만족하면 브라우저는 사전 요청(Preflight Request) 없이 바로 서버에 요청을 보냅니다.

• HTTP 메서드가 GET, POST, HEAD 중 하나일 것
• HTTP 헤더가 Accept, Content-Type, Authorization, X-Requested-With 등의 제한된 범위 내에 있을 것
• Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나일 것

서버가 Access-Control-Allow-Origin 헤더를 응답에 포함하면 브라우저는 요청을 정상적으로 처리합니다.

(2) 사전 요청(Preflight Request)

브라우저는 보안성을 강화하기 위해 위험성이 있는 요청(예: PUT, DELETE, PATCH 또는 특정 헤더가 포함된 요청)을 하기 전에 먼저 OPTIONS 메서드를 사용하여 서버에 해당 요청을 허용할지를 확인하는 사전 요청을 보냅니다.

사전 요청의 흐름은 다음과 같습니다.

1. 클라이언트가 OPTIONS 요청을 보내서 서버가 특정 출처의 요청을 허용하는지 확인
2. 서버가 허용하면 Access-Control-Allow-Origin 등의 CORS 관련 응답 헤더를 반환
3. 클라이언트가 실제 요청(POST, PUT 등)을 보냄

이 과정을 통해 보안성을 유지하면서도 필요한 요청을 허용할 수 있습니다.

3. CORS 설정 방법

서버에서 CORS를 설정하는 방법은 웹 서버 또는 백엔드 프레임워크에 따라 다릅니다.

(1) Express.js에서 CORS 설정

Express.js에서는 cors 미들웨어를 사용하여 쉽게 CORS를 설정할 수 있습니다.

javascript

복사편집

const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors({ origin: 'https://example.com' })); // 특정 도메인만 허용 app.get('/data', (req, res) => { res.json({ message: 'CORS 설정 완료' }); }); app.listen(3000, () => console.log('서버 실행 중'));

위 설정은 https://example.com에서의 요청만 허용합니다. 모든 출처를 허용하려면 { origin: '*' }로 설정할 수도 있습니다.

(2) Nginx에서 CORS 설정

Nginx에서는 다음과 같이 Access-Control-Allow-Origin 헤더를 추가하여 CORS를 설정할 수 있습니다.

nginx

복사편집

server { location /api/ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; if ($request_method = OPTIONS) { return 204; } } }

이 설정을 통해 모든 출처에서 API 요청을 허용할 수 있으며, OPTIONS 요청을 허용하여 사전 요청도 정상적으로 처리됩니다.

(3) Spring Boot에서 CORS 설정

Spring Boot에서는 @CrossOrigin 어노테이션을 사용하여 특정 API의 CORS를 설정할 수 있습니다.

java

복사편집

@RestController @RequestMapping("/api") @CrossOrigin(origins = "https://example.com") // 특정 출처 허용 public class ApiController { @GetMapping("/data") public String getData() { return "CORS 설정 완료"; } }

또는 전체 애플리케이션에 적용하려면 WebMvcConfigurer를 활용할 수도 있습니다.

java

복사편집

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("https://example.com") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }

4. CORS 오류 및 해결 방법

CORS는 잘못된 설정으로 인해 오류가 발생할 수 있으며, 대표적인 오류와 해결 방법을 살펴보겠습니다.

(1) Access-Control-Allow-Origin 오류

• 오류 내용:
• pgsql
  복사편집
  Access to fetch at 'https://api.example.com/data' from origin 'https://my-frontend.com' has been blocked by CORS policy.
• 원인:
  서버에서 Access-Control-Allow-Origin 헤더가 설정되지 않았거나, 클라이언트의 도메인이 허용되지 않음
• 해결 방법:
  서버에서 적절한 Access-Control-Allow-Origin 값을 설정해야 합니다.

(2) 사전 요청(OPTIONS)이 차단되는 경우

• 오류 내용:
• csharp
  복사편집
  Preflight response is not successful
• 원인:
  서버가 OPTIONS 요청을 처리하지 않거나, 허용되지 않은 HTTP 메서드 사용
• 해결 방법:
  Access-Control-Allow-Methods에 필요한 메서드를 추가하고, OPTIONS 요청을 처리해야 합니다.

5. CORS 보안 고려사항

CORS를 설정할 때는 보안성을 고려하여 신중하게 적용해야 합니다.

• Access-Control-Allow-Origin: * 사용 지양: 모든 출처를 허용하면 보안에 취약할 수 있으므로, 신뢰할 수 있는 도메인만 지정하는 것이 좋습니다.
• 자격 증명(쿠키, 인증 토큰) 허용 여부 설정: Access-Control-Allow-Credentials: true를 사용할 경우, 반드시 특정 도메인(Access-Control-Allow-Origin: <도메인>)을 지정해야 합니다.
• HTTP 메서드 제한: 불필요한 HTTP 메서드를 허용하지 않도록 설정해야 합니다.
• CORS 설정 검증: 브라우저 개발자 도구(F12)에서 네트워크 요청을 확인하여 CORS 응답 헤더가 올바르게 설정되었는지 확인하는 것이 중요합니다.

결론

CORS는 웹 애플리케이션에서 보안성과 기능성을 동시에 유지하기 위한 필수적인 요소입니다. 적절한 설정을 통해 API 통신을 원활하게 하면서도 보안 위협을 최소화할 수 있습니다. 다양한 웹 서버 및 프레임워크에서 CORS를 지원하므로, 프로젝트의 요구 사항에 맞게 최적의 설정을 적용하는 것이 중요합니다.