CORS(Cross-Origin Resource Sharing)의 아주 쉬운 설명

CORS(Cross-Origin Resource Sharing)는 웹 보안 정책의 중요한 부분입니다. 이를 이해하면 웹 애플리케이션 개발에서 왜, 언제, 그리고 어떻게 CORS 문제가 발생하는지를 파악할 수 있습니다.

 

CORS란 무엇인가?

CORS는 "Cross-Origin Resource Sharing"의 약자로, 웹 브라우저가 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 허용하는 방법을 정의하는 보안 메커니즘입니다. 여기서 출처는 프로토콜, 호스트 및 포트의 조합을 의미합니다. 예를 들어, https://example.com과 http://example.com은 다른 출처로 간주됩니다.

 

출처 : developer.mozilla.org

 

CORS 문제 우회 방법 알아보기

 

동일 출처 정책(Same-Origin Policy)

웹 보안의 기초에는 동일 출처 정책(SOP, Same-Origin Policy)이 있습니다. SOP는 브라우저가 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스에 무단으로 접근하는 것을 방지하는 중요한 보안 규칙입니다. 이 정책은 특히 쿠키, 세션, 로컬 스토리지와 같은 중요한 데이터를 보호하기 위해 존재합니다.

예를 들어, https://mydomain.com에서 실행 중인 스크립트가 https://otherdomain.com의 리소스에 접근하려고 할 때, 브라우저는 이를 차단하여 잠재적인 보안 위험을 방지합니다.

CORS 문제의 발생

CORS 문제는 웹 애플리케이션이 다른 출처의 리소스에 접근하려 할 때 발생합니다. 웹 브라우저는 동일 출처 정책에 따라 이러한 요청을 기본적으로 차단합니다. 예를 들어, JavaScript 코드가 https://api.anotherdomain.com에서 데이터를 가져오려고 할 때, 브라우저는 CORS 요청을 허용하지 않으면 요청을 차단합니다.

예시 상황

1. API 호출: 클라이언트 측 애플리케이션이 다른 도메인에서 제공하는 API에 요청을 보내려 할 때.
   • 브라우저가 이 요청을 차단할 수 있습니다.
2. 리소스 로드: 웹 페이지가 다른 출처에서 이미지, 글꼴 또는 스크립트를 로드하려 할 때.
   • 브라우저가 이를 차단하거나 제한할 수 있습니다.

CORS 헤더의 역할

CORS는 서버 측에서 설정하는 몇 가지 HTTP 헤더를 통해 작동합니다. 이러한 헤더는 클라이언트가 다른 출처의 리소스에 접근할 수 있는지 여부를 결정합니다.

Access-Control-Allow-Origin

이 헤더는 서버가 특정 출처에서 오는 요청을 허용하는지 여부를 지정합니다. 예를 들어, 서버가 모든 출처에서 오는 요청을 허용하려면 *를 사용합니다:

Access-Control-Allow-Origin: *

특정 출처만 허용하려면 해당 출처를 지정합니다:

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods

이 헤더는 서버가 허용하는 HTTP 메서드를 지정합니다. 예를 들어, 다음과 같이 설정하면 서버가 GET과 POST 요청을 허용합니다:

Access-Control-Allow-Methods: GET, POST

Access-Control-Allow-Headers

이 헤더는 서버가 허용하는 HTTP 요청 헤더를 지정합니다. 클라이언트는 서버에 보낼 수 있는 커스텀 헤더를 포함할 수 있습니다:

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials

이 헤더는 서버가 클라이언트 요청에 자격 증명(쿠키, HTTP 인증 등)을 포함할 수 있도록 허용하는지 여부를 지정합니다:

Access-Control-Allow-Credentials: true

CORS 요청의 종류

CORS 요청은 크게 두 가지로 나뉩니다: 단순 요청과 예비 요청(Preflight Request)입니다.

단순 요청(Simple Request)

브라우저는 GET, POST, 또는 HEAD 메서드를 사용하고, 커스텀 헤더를 사용하지 않는 경우, 단순 요청으로 간주합니다. 이 경우, 브라우저는 요청을 보내고 응답을 확인하여 Access-Control-Allow-Origin 헤더가 있는지 확인합니다.

예비 요청(Preflight Request)

브라우저가 OPTIONS 메서드를 사용하여 서버에 예비 요청을 보내는 경우가 있습니다. 이는 주로 PUT, DELETE, PATCH와 같은 안전하지 않은 메서드를 사용하거나 커스텀 헤더를 포함할 때 발생합니다. 예비 요청은 실제 요청이 보내지기 전에 서버가 요청을 허용할지 결정하게 합니다.

CORS 문제 해결 방법

CORS 문제를 해결하는 방법에는 여러 가지가 있습니다:

프록시 서버 사용

클라이언트와 대상 서버 사이에 프록시 서버를 두어 클라이언트의 요청을 중계하고 응답을 다시 클라이언트에 전달합니다. 이를 통해 브라우저의 CORS 제한을 우회할 수 있습니다.

서버에서 CORS 허용 설정

대상 서버에서 적절한 CORS 헤더를 설정하여 특정 출처 또는 모든 출처에서의 요청을 허용하도록 구성합니다.

JSONP 사용

JSONP(JSON with Padding)는 <script> 태그를 사용하여 다른 출처의 데이터를 로드하는 기법입니다. 이는 주로 GET 요청에만 사용되며, 현대의 웹 개발에서는 잘 사용되지 않습니다.

 

결론

CORS는 웹 보안을 위한 중요한 메커니즘으로, 웹 애플리케이션이 다른 출처의 리소스에 접근할 때 발생할 수 있는 잠재적인 위협을 방지합니다. 이를 우회하기 위해서는 프록시 서버를 사용하거나 서버 측에서 CORS를 적절히 설정하는 것이 일반적인 해결 방법입니다. CORS에 대한 이해는 안전하고 확장 가능한 웹 애플리케이션을 개발하는 데 필수적입니다.