Jwt Token 을 어디에 저장하면 좋은가요?

아하 자세한 답변 감사합니다!

한가지 더 궁금한 점이 생겼습니다..!

3번 방법이 sessionStorage와 동일한 기능이라고 봐도 될까요??

만약 동일하다면 3번 방법을 쓰거나 sessionStorage 이걸로 쓰거나 상관 없나요?

sessionStorage랑도 비슷한 느낌입니다. 다만 sessionStorage는 메모리가 아니라 스토리지라서 스토리지만의특성이 있습니다. 메모리보다 좀 더 오래갑니다. 새로고침을 해도 남아있고요.

앗하 넵! 답변 감사합니다!

혼자서 고민 많이 하고 있던 부분이였는데 도움 주셔서 감사합니다. 😭

안녕하세요. 위 답변에 대해 한가지만 더 여쭤보겠습니다!

유저 정보의 ssr을 해야하는 경우의 말이 풀면.. 로그인 이후 유저의 정보를 확인하고 들어가는 페이지일 경우라는 말씀이신거죠??

const history = useNavigate();를 사용하여 로그인 이후 페이지 이동도 하고

로그인 한 이후 이동한 페이지는 무조건 로그인 한 유저인것을 확인한 다음에 접속할 수 있는 페이지 입니다!

그렇다면 3번이 아닌 1번 방법으로 해야하는거죠?

3번으로 하게 되면 결국 새로고침이나 페이지이동의 경우 헤더의 정보를 잃어버리게 된다고 이해를 했습니다! 이동한 페이지에서 유저를 확인하기 위해 토큰이 필요하다면 결국 토큰을 쿠키에서 가져온 다음에 다시 헤더에 넣어주는 방법을 생각하고 있습니다.

말씀하신 쿠키의 오류사항은 검색을 해보니 httpOnly를 쓴다면 방어할 수 있다고 하는데 이것또한 100% 방어는 아닌 것 같아서요! 이정도까지라도 충분한지.. 아니면 더 방어할 수 있는 방안은 refresh token까지 만드는것일까요..??

네 쿠키를 써야지만 페이지 새로고침, 이동 시에도 서버에서 로그인 여부 확인이 가능합니다.

httpOnly를 해도 csrf 공격 당합니다. csrf 공격을 방어하세요. 리프레시 토큰이랑은 상관 없습니다.

넵! 답변 감사합니다!

안녕하세요! 한가지만 더 여쭤보려고 합니다 😭

쿠키의 httpOnly 옵션을 true로 할 경우에 쿠키가 저장되지 않고 httpOnly를 제외하면 쿠키가 저장되는 현상을 발견한 후 구글링하여 아래 글을 발견했었는데요..!

httpOnly 옵션은 ie 브라우져를 쓰거나 .com 등으로 끝나는 일반적인 도메인에만 적용가능하다.

IP나 인트라넷 호스트네임의 경우 사용하지 못한다.

또 다른 글들을 보니 쿠키의 옵션에 domain을 'localhost'로 설정하고 httpOnly 옵션을 사용하는 것 같던데 저는 왜 안될까요.. 현재 로컬호스트에서 httpOnly 옵션을 true로 하여 테스트할 수 있는 방법이 없을까요?? 혹시 몰라서 아래 작성한 코드 추가합니다!

+그리고 클라이언트와 서버의 도메인을 사용하기 위해 cors 설정은 해놓았고 sameSite 옵션을 none 으로, secure 옵션은 ture로(이 옵션 때문에 클라이언트 로컬호스트는 https로 접속가능하도록 설정해놨습니다. http로도 시도해봤었습니다.)

• layout.tsx

import { Cookies } from "react-cookie";
const cookies = new Cookies();

export const setCookie = (name: string, value: string, option?: any) => {
	return cookies.set(name, value, { ...option });
};

export const getCookie = (name: string) => {
	return cookies.get(name);
};

export default function Layout() {
... 생략
  const onSubmit = (data: loginObject) => {[
    ... 생략
    .then((data) => {
       setCookie("my-token", data.accessToken, {
						domain: "localhost",
						path: "/",
						sameSite: "none",
						secure: true,
						httpOnly: true,
		});
    }
  }
}

아래 getCookie로 가져와서 헤더에 넣어주고 싶었는데 호출하면 undefined만 나오고 있습니다..!

getCookie("my-token");

• app.tsx

function App() {
	return (
		<CookiesProvider>
			<BrowserRouter>
				... 생략
			</BrowserRouter>
		</CookiesProvider>
	);
}

• setUpProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
	app.use(
		createProxyMiddleware("/api", {
			target: "http://localhost:3095",
			changeOrigin: true,
		})
	);
};

로컬호스트에서도 httpOnly 됩니다. 네트워크 탭을 보세요. 요청 응답 헤더에 set-cookie 들어있어야하고 설정 잘못한 경우 뭐가 문제인지 거기 다 나옵니다. set-cookie 자체가 없으면 서버에서 setCookie를 하는 코드가 이살한 겁니다.

넵! 갑자기 되고 있어서..! 해결은 되었습니다. 답변 감사합니다!