[TIL] React 쿠키에 저장하고 인증 인가 처리하기

lezsuuu·2022년 9월 21일
0

TIL

목록 보기
35/42

프로젝트 인증 로직이 바뀌어서 코드를 수정해야 된다.
기존에는 토큰을 받아서 헤더에 저장했었다.
이제 body 값으로 오는 sessionID(세션이 저장된 위치)를 쿠키에 넣어서 보낼 것이다.

다시 바뀜...

accessToken을 쿠키에 저장해놓고, Header에 담아서 전달

HTTP Only Cookies

XSS(Client에서 Javascript를 통한 쿠키 탈취) 공격을 예방할 수 있다.

Secure Cookies

개발자가 부주의하게 HTTP로 통신을 요청할 경우에 대비해 HTTPS가 아닌 통신에서는 쿠키를 전송하지 않는다.

전략: refresh를 사용하지 않는 상황에서 access를 바로 로컬에 저장하면 XSS 공격에 대비하기 어렵다. 때문에 Authorization으로 토큰을 보내더라도 쿠키에 저장해놓고 HTTP only와 secure를 통해 보안을 강화한다.

기존에는 refresh를 같이 사용할 계획이어서 좀 더 편리한 local을 선택했었는데, 이제는 access만 사용하기 때문에 쿠키로 바꿔보았다.

export const setCookie = (name, value, option) => {
  return cookies.set(name, value, {
    path(string): cookie path, use / as the path if you want your cookie to be accessible on all pages,
    expires: absolute expiration date for the cookie,
	maxAge (number): relative max age of the cookie from when the client receives it in seconds,
	domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com),
	secure (boolean): Is only accessible through HTTPS?,
	httpOnly (boolean): Is only the server can access the cookie? Note: You cannot get or set httpOnly cookies from the browser, only the server.,
	sameSite (boolean|none|lax|strict): Strict or Lax enforcement
  })
}

아???
HttpOnly를 사용하려면 백에서 쿠키에 값을 넣어줘야 한다...
그게 안돼서 문제였는뎁....
이러면 쿠키를 사용하는 이유가 뭘까...??

그럼 다시 로컬로..고...


멘또링

access token만 이용, HTTPS 통신, 토큰은 Authorization으로 전달해야 함
이때, 토큰을 쿠키에 저장하는 것과 로컬스토리지에 저장하는 것 중 어느 것이 더 이익이 큰가???

현재 프론트 token 전략: 로컬스토리지에 저장

  • 토큰을 response로 받아서 프론트에서 저장해야 한다.
  • 로컬스토리지를 이용하는 것이 조금 더 편리하다.
  • 그러나 refresh를 사용하지 않는 상황에서 access를 바로 로컬에 저장하면 XSS 공격 시 위험할 수 있다.
  • 쿠키에 저장한다면 secure 설정을 할 수 있으나 어차피 Authorization으로 토큰을 보내기 때문에 무의미하고, httpOnly 도 사용할 수 없으니 로컬스토리지와의 보안성의 차이가 없다고 판단했다.
  • 로직 상 로그인 이후 매 요청에 Authorization 값을 담아 보내야 해서 리소스 사용은 두 저장소가 거의 비슷할 것이라고 판단. (다만 퍼블릭페이지를 제작할 계획이 있어 이때는 로컬스토리지가 조금 더 적합하다고 생각)
profile
돌고 돌아 벨로그

1개의 댓글

comment-user-thumbnail
2023년 8월 1일

안녕하세요
결국에는 로컬스토리지에 토큰값을 담아서 처리해주는게 더 좋다고생각 하신걸까요?

답글 달기