CORS

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때 보안 상의 이유로 제한된 리소스 공유를 가능하게 해주는 메커니즘
웹 애플리케이션이 다른 출처에서 제공하는 리소스에 접근할 때 특정 조건을 만족하는 경우에만 접근이 허용되도록 한다. 이로 인해 악의적인 웹사이트가 사용자의 데이터를 도용하는 것을 방지할 수 있다.

CORS 기본 개념

• Origin(출처): 도메인, 프로토콜, 포트를 조합한 것을 말한다.
  예를 들어, https://example.com:8080은 하나의 출처로 간주된다.
• Same-Origin Policy: 기본적으로 브라우저는 같은 출처에서만 리소스를 요청할 수 있다. 다른 출처에서 리소스를 요청하려면 CORS를 사용해야 한다.

여기에서 중요한 것은 출처!

출처

출처 : https://beomy.github.io/tech/browser/cors/
위의 구성요소 중 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)이라고 한다.

다른 출처 요청을 왜 막아야 하는가?

다양한 태그들이 웹에 등장하면서, 페이지 로딩 이후에 브라우저에서 이러한 하위 자원들을 가져올 수 있게 되었다. 때문에 동일 출처, 다른 출처 모두 호출이 가능하게 된 것이다.

여기에서 문제가 발생할 수가 있는 것이다.

예를 들어 어떤 홈페이지를 사용하고 있을 때 script태그가 심어진 페이지를 열었다고 가정해보자.
이 때 script태그가 구글에 'delete/user'를 요청하도록 되어있다면, 내 구글 아이디가 삭제되는 사고가 발생하게 되는 것이다.

따라서, 이렇게 다른 출처의 접근을 막기 위해 동일 출처 정책이 등장한 것이다.

동일 출처 정책(Same-origin policy)

동일 출처 정책(Same-origin policy)는 다른 출처로부터 조회된 자원들의 읽기 접근을 막아 다른 출처 공격을 예방한다.
그러나, 다른 출처에서 얻은 이미지를 담는 이미지 태그나 외부 주소를 담는 링크태그같은 여러 태그들을 허용한다. 동일 출처 정책의 정확한 구현 명세는 없지만 최신의 브라우저들은 일정 규칙을 따르고 있다.

CORS 에러가 발생하는 경우

• 출처가 다른 도메인 또는 포트로 리소스를 요청할 때
• 인증 정보를 포함한 요청을 보낼 때
• 허용되지 않은 메서드를 사용할 때
• HTTPS에서 HTTP로 리소스를 요청할 때
• 허용되지 않은 헤더를 사용할 때
• 일부 브라우저가 CORS를 지원하지 않는 경우
• 브라우저 설정 문제