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

RSA는 비대칭형 암호화 알고리즘으로 브라우저에서 공개키로 암호화 해서 데이터를 서버로 보내면 서버에서는 개인키로 복호화 할 수 있습니다.

JSEncrypt는 http://travistidwell.com/jsencrypt/ 에서 다운로드 할 수 있습니다. 이 사이트에 설명되어 있듯이 JSEncrypt는 http://www-cs-students.stanford.edu/~tjw/jsbn/ 에 있는 다양한 암호화 관련 라이브러리들의 래퍼로 하나의 파일에 필요한 라이브러리를 모두 포함하고 있고, 간편한 API를 제공합니다.

다운로드 받은 파일은 jsencrypt-master.zip 입니다. 압축을 풀면 bin 폴더 아래에 jsencrypt.min.js 파일 하나만 있으면 됩니다.

테스트를 위해서는 개인키와 공개키 쌍이 있어야 합니다. openssl을 사용해서 키를 만듭니다. openssl의 설치및 사용법은 "Windows에서 TOMCAT에 개발용으로 SSL 적용하기"를 참조하세요.

- 개인키를 만듭니다. 테스트용으로 만들것이므로 암호화는 하지 않은 1024bit 키를 만듭니다.

D:\cert>openssl genrsa -out private.key 1024

- 공개키를 만듭니다.

D:\cert>openssl rsa -in private.key -out public_key.pem -pubout

이제 테스트용 페이지를 만듭니다. 개인키와 공개키는 <textarea>에 넣어 두었습니다. 평문과 암호화된 문장, 복호화된 문장을 넣을 입력 필드와 암호화/복호화를 실행할 버튼을 만듭니다.

<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/l5Q6AOWryyrCJI4
A/4RjFiZ2lN2a08WGgZuYrM+rk7mXmxQdAX1aUTXk9xxZX2YrO9g2TMxpJzrdDD6
AKbDSqz9TLx2mBuLFKr+dJXX4FSg6GQF9ZAlP/PxuriRMQ5kbnqGPiMCvwIDAQAB
AoGAMlaw0XouAAeeUbBkbXyxF4dGEK3G1Ve7UNyfwy5pFPYt+/aXGb4DN5ygoRNj
7L8KR9IRHWjYK/9AD8v2ysKsZmuXNt23ojkKHq5wirSCpO2vb244ApMQAlvZYdoA
eUaYjMyq9RLBsPXh8yLAMrLGU6Yxsv5evRjrHnStW8LcImECQQDwnypVThxZP5d5
vxDHV4xFvS0PFucR05TIEtpLvGIGQ8bzol9jz+A4irpIRHnyRfydyJQziS7Svp9E
sSlWiOaVAkEA2GR8XZPTXTwtotF4dSSqu0sdERUCyShTAK4/vRjGviH0qITGPk+Z
eCQp2ZV0WsY84/6mMRviiBn92+J7hS5TAwJAASRQOB1pxwalOl+svbVtpfsS1qp+
KDh/0T89p/RZ5ru1mvxfRYL8BmiqH6OrjHnGjB0ijugMv9VFvja1AoMdzQJBALjo
1SUZpunq/Iw/NxHS7Vnyi7oHHERMgvD39VtfCqV6WpiOLOEeH+R78o8NmUngUDP7
bIRWcbMfksAMvsRFm4UCQQC3suGb43vEPOv8dGaIX7DxRCuvbgI+3mRn07bZe//i
axiQXphcMJArJB4bpxl+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+SjJZYqS
59ARp3/Z/l5Q6AOWryyrCJI4A/4RjFiZ2lN2a08WGgZuYrM+rk7mXmxQdAX1aUTX
k9xxZX2YrO9g2TMxpJzrdDD6AKbDSqz9TLx2mBuLFKr+dJXX4FSg6GQF9ZAlP/Px
uriRMQ5kbnqGPiMCvwIDAQAB
-----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>

자바스크립트 부분 입니다. jquery는 JSEncrypt라이브러리에 필요한 것은 아닙니다. 폼 요소를 쉽게 다루기 위해서 사용되었습니다. 암호화에는 공개키를 사용하고 복호화 에는 개인키를 사용했습니다.

<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/jsencrypt.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    // 암호화 하기
    $('#encrypt').click(function () {
        // 객체 생성
        var crypt = new JSEncrypt();
        // 키 설정
        crypt.setPrivateKey($('#publicKey').val());

        var plainText = $("#plainText").val();
        // 암호화
        var encryptedText = crypt.encrypt(plainText);
        $('#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>

실행결과 입니다.

자바스크립트 RSA 암호화 라이브러리 JSEncrypt 사용법을 알아 보았습니다.

출처: https://offbyone.tistory.com/343 [쉬고 싶은 개발자]