코딩 공부/보안

JSencrypt 라이브러리를 이용한 암호화, 복호화

fullfish 2022. 5. 31. 20:30

JSencrypt 라이브러리는 RSA 방식으로 데이터를 암/복호화한다

RSA 방식 이란

 

RSA

RSA란? 현재 SSL/TLS에 가장 많이 사용되는 공개키 암호화 알고리즘 전세계 대부분의 인터넷 뱅킹에서 사용 대칭키가 아닌 공개키와 개인키가 한 쌍을 이룸 공개키로 암호화한 내용은 개인키로만

fullfish.tistory.com

JSencrypt 라이브러리 다운 주소

 

JSEncrypt

Introduction When browsing the internet looking for a good solution to RSA Javascript encryption, there is a whole slew of libraries that basically take the fantastic work done by Tom Wu @ http://www-cs-students.stanford.edu/~tjw/jsbn/ and then modify that

travistidwell.com

다운 후 압축풀고 bin/jsencrypt.min.js 만 필요하다.

우선은 개인키와 공개키를 만들어야하는데

openssl을 이용해서 만들 수 있다

 

openssl 설치 및 키 발급법

 

openssl

openssl 이란 SSL과 TLS프로토콜의 개방형 소스구현 openssl을 이용하여 자체적으로 키를 생성할 수 있다. openssl 설치 brew update // 홈브루 최신상태 업데이트 brew search openssl // openssl 검색 brew inst..

fullfish.tistory.com

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./jsencrypt.min.js"></script>
    <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function () {
        // 암호화 하기
        $("#encrypt").click(function () {
          // 객체 생성
          var crypt = new JSEncrypt(); // 키 설정
          console.log("crypt", crypt);
          crypt.setPrivateKey($("#publicKey").val());
          var plainText = $("#plainText").val(); // 암호화
          console.log("plainText", plainText);
          var encryptedText = crypt.encrypt(plainText);
          console.log("encryptedText", encryptedText);
          $("#encryptedText").val(encryptedText);
        }); // 복호화 하기
        $("#decrypt").click(function () {
          var crypt = new JSEncrypt();
          crypt.setPrivateKey($("#privateKey").val());
          var encryptedText = $("#encryptedText").val(); // 복호화
          var decryptedText = crypt.decrypt(encryptedText);
          $("#decryptedText").val(decryptedText);
        });
      }); //]]>
    </script>
  </head>
  <body>
    <div style="display: flex">
      <div>
        <label for="privateKey">Private key</label><br /><textarea
          id="privateKey"
          cols="66"
          rows="16"
        >
  -----BEGIN RSA PRIVATE KEY-----MIICXQIBAAKBgQDLZL7JkIAxVOLqtEZr+SjJZYqS59ARp3/Z/l5Q6AOWryyrCJI4A/4RjFiZ2lN2a08WGgZuYrM+rk7mXmxQdAX1aUTXk9xxZX2YrO9g2TMxpJzrdDD6AKbDSqz9TLx2mBuLFKr+dJXX4FSg6GQF9ZAlP/PxuriRMQ5kbnqGPiMCvwIDAQABAoGAMlaw0XouAAeeUbBkbXyxF4dGEK3G1Ve7UNyfwy5pFPYt+/aXGb4DN5ygoRNj7L8KR9IRHWjYK/9AD8v2ysKsZmuXNt23ojkKHq5wirSCpO2vb244ApMQAlvZYdoAeUaYjMyq9RLBsPXh8yLAMrLGU6Yxsv5evRjrHnStW8LcImECQQDwnypVThxZP5d5vxDHV4xFvS0PFucR05TIEtpLvGIGQ8bzol9jz+A4irpIRHnyRfydyJQziS7Svp9EsSlWiOaVAkEA2GR8XZPTXTwtotF4dSSqu0sdERUCyShTAK4/vRjGviH0qITGPk+ZeCQp2ZV0WsY84/6mMRviiBn92+J7hS5TAwJAASRQOB1pxwalOl+svbVtpfsS1qp+KDh/0T89p/RZ5ru1mvxfRYL8BmiqH6OrjHnGjB0ijugMv9VFvja1AoMdzQJBALjo1SUZpunq/Iw/NxHS7Vnyi7oHHERMgvD39VtfCqV6WpiOLOEeH+R78o8NmUngUDP7bIRWcbMfksAMvsRFm4UCQQC3suGb43vEPOv8dGaIX7DxRCuvbgI+3mRn07bZe//iaxiQXphcMJArJB4bpxl+Sdq59miHPhHpTIYGN9fVHYr+-----END RSA PRIVATE KEY-----</textarea
        ><br /><label for="publicKey">Public key</label><br /><textarea
          id="publicKey"
          cols="66"
          rows="7"
        >
  -----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDLZL7JkIAxVOLqtEZr+SjJZYqS59ARp3/Z/l5Q6AOWryyrCJI4A/4RjFiZ2lN2a08WGgZuYrM+rk7mXmxQdAX1aUTXk9xxZX2YrO9g2TMxpJzrdDD6AKbDSqz9TLx2mBuLFKr+dJXX4FSg6GQF9ZAlP/PxuriRMQ5kbnqGPiMCvwIDAQAB-----END PUBLIC KEY-----</textarea
        >
      </div>
      <div style="padding-left: 10px">
        <label for="plainText">평문</label><br /><input
          type="text"
          id="plainText"
          style="width: 400px"
        /><br /><label for="encryptedText">암호화된 문장</label><br /><input
          type="text"
          id="encryptedText"
          style="width: 400px"
        /><br /><label for="decryptedText">복호화된 문장</label><br /><input
          type="text"
          id="decryptedText"
          style="width: 400px"
        /><br /><button id="encrypt">암호화</button><button id="decrypt">복호화</button>
      </div>
    </div>
  </body>
</html>

아까 받았던 

jsencrypt.min.js 파일이 RSA를 구현하는 알고리즘 부분이라 읽어와야한다

$를 쓰기위해서 jquery를 읽어와야하는데 파일로 받거나 위 코드처럼 주소를 읽어오면된다

이렇게 평문을 암호화하고 복호화 할 수 있다.

참고

 

자바스크립트 RSA 암호화 라이브러리 JSEncrypt

JSEncrypt는 브라우저에서 서버로 보낼 데이터를 암호화 하기 위해서 사용할 수 있는 자바스크립트 라이브러리로 RSA 방식으로 데이터를 암호화/복호화 할 수 있습니다. RSA는 비대칭형 암호화 알고

offbyone.tistory.com

 

'코딩 공부 > 보안' 카테고리의 다른 글

모노 알파베틱 암호화 (Monoalphabetic Cipher)  (0) 2022.06.03
카이사르 암호(Caesar cipher)  (0) 2022.06.03
RSA  (0) 2022.05.31
openssl 설치 및 키 발급  (0) 2022.05.31
Hash와 Salt 그리고 Bcrypt  (2) 2022.05.26