기초 개발 노트

웹 애플리케이션에서 인증 정보를 저장하는 방식 중 하나로 **로컬스토리지(LocalStorage)**를 활용하는 경우가 많다. 하지만, 로컬스토리지에 토큰을 저장하는 것은 보안적으로 취약한 방식이며, 특히 XSS(Cross-Site Scripting) 공격에 노출될 가능성이 높다.  로컬스토리지의 보안 취약점XSS 공격에 취약함로컬스토리지는 브라우저의 JavaScript 코드에서 직접 접근 가능하다.만약 공격자가 XSS를 통해 악성 스크립트를 실행하면, 로컬스토리지에 저장된 Access Token을 탈취할 수 있다.예를 들어, 웹사이트에 XSS 공격이 성공하면 다음과 같은 코드로 토큰을 훔칠 수 있다.console.log(localStorage.getItem("access_token"));이 토큰을 공격..

API 호출을 했는데 자꾸 401 에러가 떴다. 혹시 토큰이 만료됐나 싶어서 로컬 스토리지를 확인했더니 예전에 쓰던 값 그대로였다.만료된 토큰을 계속 사용해서 서버가 신뢰하지 못한 것이다. 그래서 응답 인터셉터를 수정했다. 401 에러가 발생하면 로컬 스토리지에서 accessToken을 삭제하고 로그인 페이지로 리다이렉트하도록 코드를 추가했다. 이렇게 처리하고 다시 테스트해보니, 만료된 토큰으로 인해 401 에러가 발생해도 자동으로 로그아웃되면서 로그인 페이지로 이동했다. import axios from "axios";const axiosInstance = axios.create({ baseURL: "http://localhost:8383", withCredentials: true,});axiosIn..