프로젝트 인증 로직이 바뀌어서 코드를 수정해야 된다.
기존에는 토큰을 받아서 헤더에 저장했었다.
이제 body 값으로 오는 sessionID(세션이 저장된 위치)를 쿠키에 넣어서 보낼 것이다.
다시 바뀜...
accessToken을 쿠키에 저장해놓고, Header에 담아서 전달
XSS(Client에서 Javascript를 통한 쿠키 탈취) 공격을 예방할 수 있다.
개발자가 부주의하게 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 전략: 로컬스토리지에 저장
안녕하세요
결국에는 로컬스토리지에 토큰값을 담아서 처리해주는게 더 좋다고생각 하신걸까요?