투케이2K

405. (javaScript) 자바스크립트 jose 라이브러리 SecretKey 수동 설정 및 JWE 토큰 암호화 및 복호화 수행 - AES256 , A256GCMKW 본문

JavaScript

405. (javaScript) 자바스크립트 jose 라이브러리 SecretKey 수동 설정 및 JWE 토큰 암호화 및 복호화 수행 - AES256 , A256GCMKW

투케이2K 2025. 6. 24. 20:49
728x90

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / JWT / JWE / Authorization / AES

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">

      // --------------------------------------------------------------------------------------------------------------

      // [import 라이브러리 모듈 : script type="module"]

      import * as jose from 'https://cdn.jsdelivr.net/npm/jose@5.3.0/+esm';

      // --------------------------------------------------------------------------------------------------------------

      // [html 최초 로드 및 이벤트 상시 대기 실시]
      window.onload = async function() {
          console.log("-");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("-");        

          // -----------------------------------------
          // [1. JWE 암호화] : SecretKey 지정 : AES256 = 32바이트 값
          // -----------------------------------------          
          const encodeSecretKey = new TextEncoder().encode('12345678901234561234567890123456');

          const header = { // [헤더 정보]
            alg: 'A256GCMKW', 
            enc: 'A256GCM'              
          };

          var object = { // [페이로드 정보] : {"exp":1745195533,"iat":1745191933,"iss":"APP","userId":"TWOK","userName":"투케이"}
            exp:1745195533,
            iat:1745191933,
            iss:"APP",
            userId:"TWOK",
            userName:"투케이"
          };
          var jsonData = JSON.stringify(object);
          const payload = new TextEncoder().encode(jsonData);

          const encodeJweString = await new jose.CompactEncrypt(payload).setProtectedHeader(header).encrypt(encodeSecretKey);

          console.log("-");
          console.log("=========================================");

          console.log("[jwe] : [Encode]");
          console.log("---------------------------------------");
          console.log(encodeJweString);					
          console.log("=========================================");
          console.log("-");          


          // -----------------------------------------
          // [2. JWE 복호화] : SecretKey 지정 : AES256 = 32바이트 값
          // -----------------------------------------
          // {"exp":1745195533,"iat":1745191933,"iss":"APP","userId":"TWOK","userName":"투케이"}
          // -----------------------------------------
          const decodeSecretKey = new TextEncoder().encode('12345678901234561234567890123456');

          const decodeJweString = "eyJhbGciOiJBMjU2R0NNS1ciLCJlbmMiOiJBMjU2R0NNIiwiaXYiOiJTTThtQnRqUExyYXk5MnVGIiwidGFnIjoicE56WHFmWDVUdDR1dWwxY0VIRmNhdyJ9.s2cNgfr18dY9eAFoo5-sM4YIbiVlJp-5o2xbOLOgOW4.h5k0g3o9BywObeiP.zwH-5VxyjnixjsPTVJqUvxi8XrpAkTmtbxI_pYvhyT3Jz6WZkk2mfSDrOhknOzxRN40EAOpvvCzVqusHkMCoc_UzKrgmRT7zln4GC4QLPcthi2sCvBY.SeJ0PGTWzPMmF-K4WxoDrA"
          
          const { plaintext } = await jose.compactDecrypt(decodeJweString, decodeSecretKey);
          const decodeData = new TextDecoder().decode(plaintext);

          console.log("-");
          console.log("=========================================");
          console.log("[jwe] : [Decode]");
          console.log("---------------------------------------");
          console.log(decodeData);					
          console.log("=========================================");
          console.log("-");

      };

      // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[[android] 안드로이드 Http Api 호출 시 JWE (JSON Web Encryption) 암호화 및 복호화 , 사용자 인증 처리 로직]

https://blog.naver.com/kkh0977/223822299643?trackingCode=blog_bloghome_searchlist


[[업무 이슈] android 안드로이드 JWE 토큰 생성 후 서버 Bearer 토큰 복호화 이슈 - ObjectMapper 페이로드 생성]

https://blog.naver.com/kkh0977/223840567858?trackingCode=blog_bloghome_searchlist


[[라이브러리] [Ios] JWE (JSON Web Encryption) 웹 암복호화 라이브러리 - JOSESwift]

https://blog.naver.com/kkh0977/223823275331?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
Comments