[자바웹프로그래밍] 암호화,JWT 보안토큰

안전한 데이터 저장을 위해 암호화 구현을 해보겠다.

 

https://cdnjs.com/libraries/crypto-js

crypto-js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

다음 사이트에 들어가 스크립트 코드를 login.html, Index_login.html 에 넣어준다.

 

js_crypto.js 파일을 만들어준다.

 

다음과 같이 암호화 복호화 코드를 작성한다.

 

위의 코드들은 패딩, 복원 의 과정을 하는 코드들인데

이렇게 구성되어있다.

키의 길이가 길어질수록 패딩과정에서 키가 길어지기 때문에 안전해진다.

 

그리고 js_session.js 파일을 수정한다.

세션에 id,pass 로 이름이 수정된다.

구현이 되는걸 확인했다면

 

각 함수의 이름을 pass , id 로 바꿔준다.

 

js_login.js 파일에 복호화 함수를 추가한다.

그리고 index_login.html 에 바디태그에 연동해준다.

 

로그인 후 페이지에 콘솔을 확인해보면

이렇게 복호화된 코드를 확인할 수 있다.

 

 

다음은 JWT 보안 토큰이다. 
이 토큰의 구조는 헤더 (알고리즘) - 페이로드 (JSON 데이터) - 서명(Secret key로 암호화된 값) 으로 이루어져있다. 주요 목적은 데이터 보호 저장이다.

 

먼저 js_login.js 에 전역 변수를추가한다.

 다음과 같은 위치에 추가해준다. 여기서 Math.floor()은 토큰 유지시간에 관련한 함수이다.

 

그리고 다음과 같은 위치에 코드를 작성한다.

이 코드는 세션 생성 후 토큰을 로컬에 저장하는 기능이다.

 

그리고 js_jwt_token.js 파일을 만들어준다.

다음과 같이 작성 후 js 파일을 연동해주는데 꼭!!!! js_session.js,js_login.js 보다 먼저 파일을 불러와야한다.

그럼 다음과 같이 로컬 스토리지에 저장이 되는 모습을 볼 수 있다.

 

토큰 검증하는 코드도 추가해준다.

 

토큰 검사도 추가해줘서 안전함을 강화시킨다.

index_login.js에 바디태그에 인증 검사 함수를 추가해준다. (2개 이상 함수 호출이 가능하다.)

그럼 콘솔창에 다음과같이 잘 실행되는걸 볼 수 있다.