웹 애플리케이션에서 다른 출처(origin)로부터 리소스를 요청할 때 발생할 수 있는 보안 문제를 해결하기 위한 표준화된 메커니즘이다.
기본적으로 웹 브라우저는 보안상의 이유로 스크립트로 다른 출처로 요청을 보내면 보안 정책에 따라 요청이 차단되는데,
이 때 발생하는 오류가 CORS 에러이다.
보안 정책은 브라우저에서 실행되는 JavaScript 코드가 다른 출처에서 리소스를 가져오는 것을 방지하는데, 이것을 동일 출처 정책(same-origin policy)이라고 한다. 이를 통해 다른 출처의 리소스에 악의적인 접근을 방지할 수 있다.
하지만, 모던 웹 애플리케이션에서는 여러 출처로부터 리소스를 요청해야 하는 경우가 많기 때문에, CORS 를 통해 보안 정책을 우회하여 리소스를 요청할 수 있게 된다.
CORS 에러는 보통 브라우저 콘솔 창에서 확인할 수 있다.
CORS 에러를 해결하기 위해서는 다음과 같은 방법을 사용할 수 있다.
서버 측에서 응답 헤더에 Access-Control-Allow-Origin 값을 설정합니다. 이 값은 요청이 허용되는 출처를 지정한다.
서버 측에서 요청 메서드나 헤더를 설정하는 등의 추가적인 설정이 필요한 경우가 있다.
브라우저 측에서는 JSON Http Request 객체나 fetch() API 등을 사용할 때 요청에 대한 설정을 지정할 수 있다.
CORS 에러는 보안 상의 이유로 발생하는 것이므로, 이를 해결하기 위해 필요한 설정이나 코드 변경은 신중하게 진행해야 한다. 예를 들면 다음과 같은 상황이 벌어질 수 도 있다.
브라우저는 우리가 웹 사이트를 이용할 때 굉장히 민감한 정보들을 저장하고 있다. 로그인 상태를 유지하기 위해 브라우저는 토큰 등의 정보를 쿠키로 저장하여 요청을 보낼 것이다. 이러한 인증 정보는 해커들의 타겟이 될 수 있다. 해커들은 정보를 빼내기 위해 사용자를 자신이 만든 사이트에 들어오게끔 유도한다. 만약, 사용자가 사이트에 접속한다면 브라우저에서 해커의 악성 코드가 실행되어 인증 정보를 탈취할 수도 있다. 즉, 내 의지와 상관없이 브라우저에 저장된 정보로 악의적인 행동을 취할 수 있다.
또한, 서버 측에서는 보안 상의 이유로 모든 출처에서 요청을 허용하는 것이 아니라, 필요한 출처만 요청을 허용하도록 설정하는 것이 좋다.
