내 잡다한 노트

CORS(Cross-Origin Resource Sharing) 본문

보안

CORS(Cross-Origin Resource Sharing)

peanutwalnut 2023. 11. 30. 16:10

CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 하는 보안 메커니즘입니다. 

기본적으로 웹브라우저는 같은 출처 정책(Same-Origin Policy)을 적용합니다. 

이 정책은 한 출처에서 로드된 문서 또는 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한합니다.

여기서 출처는 도메인, 프로토콜, 포트를 포함합니다.

 

### CORS가 필요한 이유

Same-Origin policy는 보안을 위해 중요합니다. 예를 들어, 이 정책이 없다면 악의적인 웹사이트가 사용자가 로그인한

다른 사이트의 데이터를 읽을 수 있게 됩니다. 하지만, 현대의 웹 애플리케이션은 종종 여러 출처의 리소스를 통합해야하는 경우가 많습니다. 예를 들어, 다른 도메인의 API에서 데이터를 가져오거나, CDN에서 스크립트 또는 스타일시트를 로드하는 경우 등입니다.

CORS는 이러한 상황에서 보안을 유지하면서도 출처 간 리소스 공유가 가능하도록 해줍니다.

 

### CORS가 작동하는 방식

1. 단순요청

특정 조건(메소드가 GET, HEAD, POST 중 하나이며, 특정 헤더만 사용하는 경우 등)을 만족하는 요청은 단순 요청으로 분류됩니다. 이 경우, 브라우저는 추가적인 CORS 체크 없이 바로 요청을 보냅니다. 하지만 응답에서 적절한 CORS 헤더('Access-Control-Allow-Origin 등 ')가 없다면 브라우저는 결과를 차단합니다.

 

2. 사전 요청

단순 요청이 아닌 경우 (ex: 사용자 정의 헤더를 사용하거나, DELETE 메소드 사용 등), 브라우저는 실제 요청을 보내기 전에 사전 요청을 서버에 보냅니다. 이는 OPTIONS 메소드를 사용하여 서버에 해당 출처에서의 요청이 허용되는지 확인하는 겁니다. 서버는 이 사전 요청에 대해 허용 여부를 나타내는 헤더( 'Access-Control-Allow-Origin' , -Methods, -Headers 등) 를 포함한 응답을 보냅니다. 브라우저는 이 응답을 기반으로 실제 요청을 보낼지 말지를 결정합니다.

 

### CORS 문제 해결 방법

CORS 오류가 발생할 때, 주로 서버 측에서 적절한 CORS 헤더를 응답에 포함시키지 않은 경우입니다.

이를 해결 하기 위해서는 서버의 응답 헤더에 'Access-Control-Allow-Origin' 을 포함시켜야 합니다.