CORS(Cross Origin Resource Sharing)

CORS 란

 

CORS(Cross Origin Resource Sharing)를 직역하면 “교차 출처 리소스 공유” 정도로 번역될 수 있다. 다시 말해 CORS는 출처가 다른 서버간의 리소스 공유 정책이라고 할 수 있다. 웹 브라우저는 기본적으로 동일 출처 정책(SOP : Same-Origin Policy)을 따르기 때문에 같은 출처에서만 리소스를 공유할 수 있다.

---

 

Origin(출처) 이란

 

그럼 CORS에서 말하는 출처는 어떤 것을 의미할까?

 

 

CORS에서 말하는 출처란 Protocol과 Domain(Host Name), Port로 이 중 하나라도 다르면 CORS 에러가 발생한다.

---

 

CORS 정책이 등장한 이유

 

출처가 다른 두 개의 애플리케이션이 마음대로 소통할 수 있는 환경은 매우 위험하기 때문이다.

특히 웹에서 돌아가는 클라이언트 애플리케이션은 사용자의 공격에 매우 취약하다. 브라우저의 개발자 도구만 열어도 DOM 구조, 서버와의 통신, 리소스의 출처 등 다양한 정보를 제약 없이 열람할 수 있다.

최근에는 자바스크립트 소스 코드를 난독화하여 읽기 어렵게 만들지만, 난독화는 어디까지나 가독성을 떨어뜨리는 것일 뿐 암호화가 아니다. 난독화된 소스 코드도 충분히 분석할 수 있으며 소스 코드를 직접 볼 수 있다는 사실 자체가 보안적으로 큰 취약점이다.

 

이러한 상황에서 다른 출처의 애플리케이션이 서로 자유롭게 통신할 수 있다면, 악의적인 사용자가 소스 코드를 분석한 후 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 같은 방법을 통해 여러분의 애플리케이션에서 코드가 실행된 것처럼 속여 사용자의 정보(토큰이나 쿠키 등)를 탈취하는 것이 너무나도 쉬워진다.

따라서 CORS 정책은 이러한 보안 문제를 해결하기 위해 등장했다. CORS는 서버에서 허용된 출처를 명시하여 출처가 다른 애플리케이션 간의 통신을 안전하게 제어한다. 이를 통해 클라이언트 애플리케이션의 보안을 강화하고 사용자의 데이터를 보호할 수 있다.

 

---

 

CORS 문제 해결 방법

 

1) 서버에서 HttpResponse 헤더에 Access-Control-Allow-Origin 설정

'Access-Control-Allow-Origin': <origin> | *

위와 같이 *로 설정하면 출처에 상관없이 리소스에 접근할 수 있는 와일드카드가 되어 보안에 취약해질 수 있다. 따라서 Access-Control-Allow-Origin: https://myshop.com과 같이 직접 허용할 출처를 세팅하는 방법이 더 좋다.

 

 

2) 프록시 서버 사용

 

프록시 서버를 사용하면 웹 애플리케이션이 리소스와 동일한 출처에서 요청을 보내는 것처럼 보이므로 CORS 에러를 방지할 수 있다.

예를 들어 React 어플리케이션이 http://example.com 에서 작동 중이고 SpringBoot 어플리케이션이 http://api.example.com에서 작동 중이라면 Nginx와 같은 웹 서버의 프록시 기능을 사용해서 문제를 해결할 수 있다.

 

---

출처 :  https://docs.tosspayments.com/resources/glossary/cors https://velog.io/@effirin/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

---