안녕하세요. 꿀발자입니다. 웹 개발을 하다 보면 “CORS 오류”라는 것을 한 번쯤은 마주칠 것입니다. 이 오류는 보안상의 이유로 브라우저에서 발생하며, 초보 개발자들에게는 상당한 혼란을 줄 수 있습니다. 이번 글에서는 CORS 정책이 무엇인지, 왜 이러한 정책이 필요한지, 그리고 CORS 요청의 작동 원리와 오류 발생 이유까지 자세히 알아보겠습니다.
CORS란 무엇인가?
CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 출처의 리소스에 접근할 수 있도록 허용하는 웹 보안 메커니즘입니다. 기본적으로 브라우저는 보안을 위해 동일 출처 정책(Same-Origin Policy)을 따르며, 이는 스크립트가 자신이 로드된 도메인 이외의 도메인에 요청을 보내는 것을 제한합니다. 하지만 CORS 정책을 이용하면 특정 조건하에 이러한 제한을 완화할 수 있으며, 웹 애플리케이션이 외부 API를 안전하게 사용할 수 있게 됩니다. (mozilla doc)
동일 출처 정책(Same-Origin Policy) 이해
동일 출처 정책(Same-Origin Policy) 은 웹 애플리케이션의 보안을 강화하기 위한 브라우저의 기본 정책입니다. 여기서 ‘출처‘란 프로토콜(http/https), 호스트명, 그리고 포트 번호까지 모두 포함한 것을 의미합니다. 이 세 가지 요소가 모두 일치해야 동일한 출처로 간주됩니다.
| 요소 | 출처 |
|---|---|
| 프로토콜 다름 | http://example.com |
| https://example.com | |
| 호스트명 다름 | http://example.com |
| http://api.example.com | |
| 포트번호 다름 | http://example.com:80 |
| http://example.com:8080 |
- http != https 프로토콜이 다르기 때문에 다른 출처로 간주됩니다.
- example.com != http://api.example.com 호스트명이 다르므로 다른 출처입니다.
- 80 != 8080 포트 번호가 다르므로 다른 출처입니다.
동일 출처 정책은 악의적인 스크립트가 사용자 정보를 탈취하거나 원치 않는 동작을 수행하는 것을 방지하는 데 중요한 역할을 합니다.
왜 CORS 정책이 필요한가?
현대 웹 애플리케이션은 다양한 외부 API와 상호 작용하며, 이는 종종 다른 도메인에서 제공됩니다. 동일 출처 정책만으로는 이러한 교차 출처 요청을 허용할 수 없기 때문에, CORS 정책이 필요합니다. CORS는 서버가 특정 도메인에 대한 자신의 리소스 접근을 허용하거나 거부할 수 있는 메커니즘을 제공합니다. 이를 통해 웹 애플리케이션은 외부 API를 안전하게 사용할 수 있게 되고, 사용자 데이터를 보호할 수 있습니다.
CORS 요청의 작동 원리
CORS 요청의 작동원리는 HTTP 헤더를 사용하여 도메인 간 요청이 안전한지를 판단합니다. 웹 애플리케이션이 다른 출처의 리소스에 접근하려고 할 때, 브라우저는 사전 요청(preflight request) 를 보내어 해당 리소스가 다른 출처의 요청을 허용하는지 확인합니다. 이때 사용되는 HTTP 헤더에는 Origin, Access-Control-Allow-Origin, Access-Control-Allow-Methods 등이 있습니다. (위키백과)
- 사전 요청(Preflight Request): 실제 요청을 보내기 전에 OPTIONS 메소드를 사용하여 서버에 권한을 요청하는 것입니다.
- Access-Control-Allow-Origin: 이 헤더는 리소스에 접근할 수 있는 출처를 지정합니다.
- Access-Control-Allow-Methods: 서버가 허용하는 HTTP 메소드를 지정합니다.
- 클라이언트 요청 : 브라우저는 요청을 보낼 때 Origin 헤더에 현재 페이지의 출처를 포함합니다.
- 서버 응답 : 서버는 요청을 처리한 후 응답 헤더에 Access-Control-Allow-Origin을 포함하여 어떤 출처에서 접근이 허용되는지 명시합니다.
- 브라우저 검증 : 브라우저는 서버의 응답 헤더를 확인하고, 해당 출처에 대한 접근이 허용되었는지 판단하여 요청의 성공 여부를 결정합니다.
이를 통해 브라우저는 서버가 허용한 출처에 대해서만 데이터를 표시할 수 있습니다. 모든 출처를 허용하려면 *를 사용할 수 있지만, 이는 보안상의 위험이 있을 수 있습니다.
CORS 오류가 발생하는 이유
CORS 오류는 주로 다음과 같은 상황에서 발생합니다.(tosspayments doc)
- 서버가 Access-Control-Allow-Origin 헤더를 제공하지 않을때
- 허용되지 않은 출처에서 요청을 보낼 때
- 프리플라이트 요청(preflight request)이 실패할 때
특히 인증 정보가 포함된 요청이나 커스텀 헤더를 사용하는 경우 추가적인 보안 검증이 필요하며, 서버가 이를 허용하지 않으면 오류가 발생합니다. 이러한 문제를 해결하려면 서버 측에서 CORS 설정을 명확히 지정해야 합니다.
Final Thoughts
CORS 정책은 웹 보안과 기능성을 동시에 고려해야 하는 중요한 이슈입니다. 서버와 클라이언트 간의 원활한 통신을 위해서는 CORS에 대한 정확한 이해와 적절한 설정이 필요합니다. 이를 통해 개발자는 더 안전하고 신뢰할 수 있는 웹 애플리케이션을 구축할 수 있습니다. CORS 정책을 잘 이해하여 원활한 개발 환경을 만들어 보세요!