[로컬스토리지 암호화] React Secure Storage를 이용한 로컬스토리지 데이터 암호

React Secure Storage?

React Secure Storage 는 로컬스토리지에 값을 암호화 하여 저장하고, 저장된 암호화 값을 다시 해독하여 사용 할 수 있게 해주는 라이브러리 이다. 일반적으로 로컬스토리지에 저장되는 값은 문자열이고, 장치에 액세스 할 수 있는 사람은 누구나 이 데이터를 읽고, 조작할 수 있다.

보안과 관련된 문제이다 보니 사용하기 전에 믿을 수 있는 라이브러리 인지 Modules를 열어서 코드를 확인해본결과, crypto-js 라는 라이브러리와 murmurhash-js 라는 라이브러리를 리액트 환경에서 쉽게 사용할 수 있도록 조금 손 본 라이브러리라는걸 알게됬다.

 

 

프로젝트에 React Secure Storage을 사용한 이유

서버로부터 JWT토큰을 받아서 사용하는 과정에서 JWT를 어디에 저장하냐에 대해 많은 논쟁이 있다. 이번 프로젝트에서는 Local storage에 값을 저장하기로하고, 암호화 되지않은 페이로드(페이로드는 BASE64로 인코딩 된 데이터)의 클라이언트 단에서의 유출을 막기위해, XSS공격에 대한 취약점문제를 조금이나마 해결하기 위해  한번 더 암호화하여 사용하기로 했다.

 

JWT는 개인정보와 다름이 없다 이런 JWT를 아무나 접근가능한 로컬스토리지에 날것의 데이터로 저장하는것은 위험하다는 판단하에 라이브러리의 사용을 결정했다.

---

 React Secure Storage 사용법

설치

yarn add react-secure-storage

npm install react-secure-storage

자신이 사용하는 패키지매니저에 맞게 설치를 진행한다

 

Function	사용처	형식
setItem(key,value)	로컬스토리지에 값을 암호화해서 저장할 때 사용	문자열, 객체, 숫자, 불리언 값 (따로 stringify 하지않아도되는 장점)
getItem(key)	로컬스토리지에 저장된 값을 복호화해서 불러올때 사용함	존재하지 않을경우 null을 반환
removeItem(key)	해당 Key를 제거하는 메서드
clear()	secure storage를 이용한 모든 값을 지울때 사용

보안키 설정

암호화 하는데 사용되는 보안키를 사용자가 직접 지정할 수 있다. (해야한다)

안전하게 보안키를 만들어 사용하는 방법은 프로젝트의 Root 디렉토리(최상단)에 환경변수(.env파일)를 만들고, .env파일에 내용으로 아래와 같이 작성하면된다

SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxxxxxxxxx

REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxx

xxxxxxxxx는 사용자가 정하는 값이므로 xxxxx....를 그대로 넣지말자.

 

본 프로젝트는 Github Action을 통해 CI/CD 방식으로 배포가 진행되고 있으므로, 이런 방식으로 작업을 할경우, Github Action Yml 에 환경변수를 설정하는 명령어를 따로 만들고, github secrets에 저장해놓는 식으로 사용하고있다.

 

사용예시

import { useEffect } from  "react";
import  secureLocalStorage  from  "react-secure-storage";

  
const App = () => {
    useEffect(() => {
	    secureLocalStorage.setItem("object", {
		    message:  "This is testing of local storage",
	    });
	    secureLocalStorage.setItem("number", 12);
	    secureLocalStorage.setItem("string", "12");
	    secureLocalStorage.setItem("boolean", true);
	    let value = secureLocalStorage.getItem("boolean");
	}, []);

   return (
	    <div>
		    This is a sample code
	    </div>
	);
}

export  default  App;

일반적으로 로컬스토리지를 사용할 때와 유사하게 secureLocalStorage.setItem(key,value) 형식으로 매우 간편하게 사용할 수 있다.