개념

CORS(Cross-Origin Resource Sharing)은 웹 브라우저에서 다른 출처의 자원에 접근할 수 있도록 해주는 보안 기술

보안 상의 이유로 브라우저는 기본적으로 스크립트에서 다른 도메인의 자원에 접근하는 것을 제한한다. 이것은 웹 애플리케이션이 다른 도메인의 자원을 요청할 때 발생한다. 이때, 다른 도메인의 자원에 접근할 수 있는 권한을 부여하는 것이 CORS이다.

CORS는 HTTP 헤더를 사용하여 브라우저와 서버 간의 통신을 제어한다. 서버는 응답에 특정 헤더를 포함시켜 브라우저에게 다른 도메인에서 자원에 접근할 수 있는 권한을 부여한다.

CORS는 보안상의 이유로 필요한 기술이지만, 잘못 구성된 경우 보안 위협이 될 수 있으므로 신중하게 구성해야 한다.

CORS를 구성할 때는 다음과 같은 사항을 고려해야 한다.

1. 출처(Origin) 확인
   • CORS를 적용할 출처(Origin)를 확인할 것. 출처란 도메인, 프로토콜, 포트번호를 의미한다.
2. 접근 제어 설정
   • 서버 측에서는 Access-Control-Allow-Origin 헤더를 사용하여 요청을 허용할 출처를 지정한다.
3. 보안 설정
   • CORS 요청은 기본적으로 쿠키와 인증 정보를 전송하지 않는다. 이를 허용하기 위해서는 서버에서 Access-Control-Allow-Credentials 헤더를 설정해야 한다.
4. HTTP 메서드 제어
   • 서버 측에서는 Access-Control-Allow-Methods 헤더를 사용하여 허용할 HTTP 메서드를 지정한다.

발전 과정

기존의 텍스트 기반 웹에서 JavaScript, DOM, 쿠키 등으로 브라우저가 접근할 수 있는 리소스가 늘어나게 되면서 이들과 안전하게 상호작용할 방법이 필요해졌다. 따라서 SOP(Same-Origin Policy)가 생겼다. 동일 출처 규칙을 이용하면 CSRF 공격을 막을 수 있다. 크롬의 경우 각 사이트를 프로세스 단위로 격리하여 서로 접근하기 어렵게 만들었다.

SOP: 동일 출처 정책

프로토콜, 호스트, 포트, URL이 일치하면 동일 출처로 간주한다.

http://store.company.com/dir/page.html 와 비교할 경우 아래와 같다.

http://store.company.com/dir2/other.html	경로만 다름
http://store.company.com/dir/inner/another.html	경로만 다름
https://store.company.com/secure.html	프로토콜 다름
http://store.company.com:81/dir/etc.html	포트 다름 (http는 80)
http://news.company.com/dir/other.html	호스트 다름

그러나 더욱 풍부한 웹을 위해 더 많은 방식의 통신이 필요하게 되었고 단방향 호출이 가능한 XMLHTTPRequest나 단방향 읽기 전용 JSONP, MS의 XDomainRequest 등이 등장하였으나 결론적으로 CORS가 해결책으로 자리잡았다.

출처

• https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
• https://blog.areumsheep.vercel.app/contents/why-cors/