서술
쿠키 설정을 위해 axios header의 withCredentials 옵션을 사용한 적이 있다. 사용을 하며 이 옵션이 정확히 무엇을 위한 것인지 궁금하여 검색을 하게 되었다.
기본적으로 HTTP 에서는 도메인(포트도 포함)가 서로 다른 경우 CORS 에러를 보내게 된다. 이는 CSRF 공격으로부터 보호하기 위한 기초적인 조취이지만, 웹 개발자라면 한번쯤 CORS 에러에 곤란을 겪었을 것이다.
MDN 공식문서에서는 Access-Control-Allow-Credentials를 통해 cross-origin인 HTTP 요청을 허용하는 자격증명(Credentials)을 알 수 있도록 한다고 한다.
이 오류를 해결하기 위해 가장 많이 사용하는 방식으로 cookies, authorization header, TSL 등이 있는데, 이 자격 인증 정보들을 통틀어 Credentials 라고 한다.
Credentials를 포함시키는 방법은 통신 방식에 따라 다음과 같다.
- fetch():
credentials: "include" - XMLHttpRequest:
XMLHttpRequest.withCredentials: true - EventSource():
EventSource.withCredentials: true
자주 사용되는 라이브러리인 Axios 또한 config: {headers: {withCredentials: true}}설정을 통해 이 설정이 가능하다.
* 클라이언트 뿐만 아니라 서버또한 Access-Control-Allow-Credentials 설정을 해주어야 한다!
Access-Control-Expose-Headers
Network의 Response를 열어보면, Access-Control-Expose-Headers 라는 것이 있는데, 여기에서 브라우저 스크립트에 어떤 응답 헤더를 제공할지 지정할 수 있다.
기본적으로는 CORS-safedlisted 인 응답 헤더만 노출된다. 따라서 엑세스 가능하도록 하기 위해 서버가 이 값을 사용하여 헤더를 나열해 주어야 한다.
