TIL 24.03.29 redux-persist local storage 저장 암호화

1. 문제점

 

현재 로그인 기능 구현은 redux-persist 로 유저정보를 로컬스토리지에 저장하는 방식을 사용한다. 따라서 유저정보를 한번 불러오면 로그아웃 전 까지 유저정보는 스토리지에 저장되어 사용할 수 있다.

 

그러나 문제점은 로컬스토리지에 저장된 개인정보는 암호화가 되지 않고 그대로 보여주는 단점이 있음. 예를들어, 내가 공공장소에서 로그인을 하고 로그아웃을 누르지 않고 나갔는데 로컬스토리지에 저장된 추가적인 개인정보 노출이 문제가 될 수 있다.

이 방식을 해결하고자 블로그를 뒤졌는데 아무것도 안나와서, 최초(?) 로 작성해보려고한다.

 

2. 시도해본 것

local storgae 에 저장하면 암호화해서 저장할 수 있는 React Secure Storage 가 있는데, 이건 redux-persist 를 사용하는 것이 아니라 말그대로 local storage 만을 사용해서 값을 집어넣기에 적합했다. 

 

그래도 데이터를 굳이 로컬스토리지에 새로고침해도 안날라가게끔 해야하는 작업이 아니라면, 한번쯤 사용해 볼 것을 권한다.

이는 블로그에 정보가 많이 있으므로 좋음.

 

https://www.npmjs.com/package/react-secure-storage

react-secure-storage

 

3. 해결방안

 

redux-persist 를 사용해서 로컬스토리지에 데이터를 로그아웃전까지 영구히 저장도 해야하고, 데이터를 암호화도 시켜야 하는 작업이 있는데 관련해서 스택오버플로우,  구글 검색을 해보았다. 어느 좋은 개발자분이 

 

redux-persist-transform-encrypt 라는 라이브러리를 개발해주셨다. 아쉽게도 2024년 2월 이후로 유지보수가 중단될 거라고 하지만, 급한불을 끄기는 적합한 것 같다. 참고 사이트는 아래와 같다.

 

https://www.npmjs.com/package/redux-persist-transform-encrypt

redux-persist-transform-encrypt

 

 

uuid generator 에서 암호화 키를 받아서 env에 저장했다.

이후 라이브러리를 설치하고

 

https://www.uuidgenerator.net/

Online UUID Generator Tool

 

npm install redux-persist-transform-encrypt

yarn add redux-persist-transform-encrypt

 

기존에 작성했던 persistReducer 안에 해당 암호화 코드를 작성하면 된다.

 transforms: [
    encryptTransform({
      secretKey: process.env.REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY,
      onError: function (error: any) {
        // Handle the error.
      },
    }),
  ],

 

이후, 애플리케이션에서 확인해보면 다음과 같이 암호화돼서 저장된다.

 

4. 알게된 것

 

로그인기능을 만드는 것은 매우 복잡하다. 이 게시물이 누군가에게 도움이 됐으면 좋겠다...

정보를 매번 서버에서 불러오는 사이트도 있고 어느것이 효율적이지는 모르겠지만 방법을 계속 찾아보도록 하자.