CORS (교차 출처 리소스 공유)

#Cross Origin Resource Sharing

 최근 앱에 카카오맵 링크를 이용해 길 찾기 기능을 넣는 작업이 있었다.

 웹뷰에 카카오맵에서 제공하는 길 찾기용 링크를 연결해서 간편하게 구현한 뒤 IOS에서 확인하는데, CORS 관련 코멘트가 뜨면서 연결이 되지 않았다.

 사실 그동안 앱들을 만들면서 이런 경우를 접해보지 못했기 때문에 관련 지식이 부족했고 이 기회를 통해 알게 된 CORS에 대해 정리를 해놓으려 한다.

 CORS(Cross Origin Resource Sharing), 즉 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 교차 출처 요청의 예를 들자면, https://test1.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https:/test2.com/data.json을 요청하는 경우, 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.

 예를 들자면, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따르기 때문에 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

 CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다. 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화해야 한다.

(자료 출처: mdn - https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)