Fetch API의 credentials

참고자료

tutorialspoint, Fetch API - Credentials
MDN, Using the Fetch API

미안해 fetch... 난 널 아직 잘 몰라

나는 fetch API를 잘 모르는 것 같다. 항상 하던대로 url에 쿼리 스트링, body에 JSON.stringify()를 사용한 작업만 하던 내 스스로에 부족함을 느꼈다. fetch API에 대해 궁금해져 찾아본 내용을 기록해 본다.

fetch API는 비동기로 동작하며, 요청에 대한 Response 객체를 리턴하는 Promise를 리턴하며, 해당 Promise가 resolve되었을 시에 얻게되는 Response객체의 비동기로 동작하는 json()매서드를 통해서 다시 body객체를 얻는 과정(헥헥...)은 프론트엔드 웹개발을 학습하다보면 자주 접하게 되는 부분이다.

그런데 내게 credentials옵션은 낯설었다.

fetch('https://example.com/data', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

credentials라는 옵션은 어떤 역할을 하며, 언제 사용해야할까?

credentials 옵션

개발을 하면서 옵션의 기본값을 알아두면 유용하다는 것을 절감하고 있다. 다행히도 credentials 옵션의 값은 3종류밖에 안된다.

• same-origin − (기본값)
  페이지를 요청할 때 same-origin 대상의 요청에서만 credential 데이터를 전달하는 것이다. same origin URL들로부터 온 credentials 데이터만 사용한다.

• omit − 브라우저가 리소스를 요청할 때 credentials를 제거한다.는 물론이고, Response의 credentials도 무시한다.

• include − 이 옵션을 사용하면, same-origin일 때도, corss-origin일 때도 credentials를 포함하여 요청을 보내게 된다. 더불어 Response의 credentials도 사용한다.

credentials에는 어떤 데이터들이 해당되는가?

그래, 요청을 보내고 받을 때 credentials를 사용할 지 말 지 여부를 판단하는 옵션인 것을 알았다. 그러면 credentials에는 어떤 데이터들이 해당이 될까?

Cookies − 쿠키라는 녀석들은 브라우저에 저장되는 작은 데이터이다. same-origin 요청일 때 담겨 보내진다. 쿠키는 세션 정보, 자주 사용되는 데이터, 등등 다양한 목적으로 사용이 된다. 만약 서버에서 Set-Cookie 헤더와 함께 사용되면, 응답을 받은 브라우저에서는 해당 오리진에 대한 쿠키를 브라우저에 저장하게 된다. 서버에서 브라우저에 전달하고자 하는 데이터가 있는 경우에 유용하겠다! 그러면 아무때나 Set-Cookie 헤더를 사용하면 브라우저에 쿠키를 저장할 수 있으려나...? 그건 더 공부를 해봐야겠다.

Authorization Headers − 서버의 보호된 자원에 접근하기 위해서 헤더에 포함시키는 데이터이다.

Authorization: <auth-scheme> <authorization-parameters>

이렇게 쓰이는데...많이 사용했었는데... Bearer 토큰 사용해 본 적이 있는데... 이 부분은 내가 더 공부를 해서 다른 포스팅으로 돌아오겠다. 꼭 돌아오겠다. 미안해 일단 넘어가자!

MDN - Authorization
MDN - HTTP Authentication

TLS Client Certificates − CA로부터 클라이언트 브라우저가 제공받은 디지털 인증서이다. 이것도 credentials에 포함이 된다니 의외였다.
그럼 이 인증서는 어떻게 요청에 포함이 되려나....? 이 부분도 더 공부해서 돌아오겠다. 일단 넘어가자!

실습

위에 첨부한 tutorialspoint에는 좋은 실습 코드가 있다. 한 번 옵션을 바꿔보면서 실행해보자.

먼저 내 credentials중 하나인 cookie가 실제로 옵션에 따라 포함되고 안되는지를 실행해보자.

여기 내 쿠키다.

same-origin 옵션

네트워크 탭의 Timing 탭 옆에 아무것도 없다.

omit 옵션

네트워크 탭의 Timing 탭 옆에 아무것도 없다.

include 옵션

띠용, 쿠키 탭이 생기고, 살펴보니 쿠키들이 Request에 담겨 함께 전달되는 모습을 확인할 수 있었다. 완전 신기하다.

회고

Chat-GPT같은 생성형 AI 서비스에 물어보면 이런 기본적인 지식들은 손쉽게 얻을 수 있다. 그러면 이런 지식들을 블로그에 굳이 정리하는 의미가 있을까에 대한 고민이 문득 들었다.

이 고민은 사실 내가 습득한 지식의 복습선에서 깔끔하게 정리가 되었다.

내가 궁금한 부분을 검색하고, 내 언어로 직접 정리하는 작업은 복습이었다. 이렇게 블로그에 정리한 지식은 오롯이 나만의 지식으로서 내 기억 깊은 곳에 꽤나 오래 살아있었다. 물론 나도 사람이고 아직 꾸준히 학습하고 더 개발을 많이 해봐야 하기에 부족한 부분이 많은 글이다. 그래서 남들에게 보여주기 민망한 수준의 똥글을 적을 때도 있다. 그런 글을 우연히라도 방문하게 되는 독자분들에게는 죄송하다... 그렇지만 머리속에만 담아두려 하는 아이디어와 지식들이 언젠가는 휘발되는 것이 너무 아까울 때가 있다. 그러니 너그러이 이해해주셨으면 하는 바람이다 하하.

언젠가는 나도 나만의 노하우와 통찰이 담긴 글을 쓸 날이 오겠지.