Javascript RSA 套件練習

starzodiac

7 min readFeb 4, 2021

關鍵字: JS RSA 加解密

因為最近面臨的到敏資傳輸的議題，最後的 solution 是先加密再傳(其實 ssh 好像就有這功能了...)，為了方便使用，最後選擇用 JS 來實作。

主要是參考 JSEncrypt 套件加上簡單實作 UI 介面

產生RSA key

var crypt = new JSEncrypt({default_key_size: keySize});
crypt.getKey();
crypt.getPrivateKey();
crypt.getPublicKey();

解密

var encrypt = new JSEncrypt();
encrypt.setPublicKey(pubkey);
var encrypted = encrypt.encrypt([input string]);

加密

var decrypt = new JSEncrypt();
decrypt.setPrivateKey(privkey);
var uncrypted = decrypt.decrypt([input string]);

<!doctype html>
<html>
  <head>
    <title>JavaScript RSA Encryption</title>
    <script src="bin/jquery-1.8.3.min.js"></script>
    <script src="bin/jsencrypt.min.js"></script>
    <script type="text/javascript">      // Call this code when the page is done loading.
      $(function() {
        //Change the key size value for new keys
        $(".change-key-size").each(function (index, value) {
          var el = $(value);
          var keySize = el.attr('data-value');
          el.click(function (e) {
            var button = $('#key-size');
            button.attr('data-value', keySize);
            button.html(keySize + ' bit <span class="caret"></span>');
            e.preventDefault();
          });
        });
        // Run a quick encryption/decryption when they click.
        $('#encrypt').click(function() {          // Encrypt with the public key...
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey($('#pubkey').val());
          var encrypted = encrypt.encrypt($('#input').val());
          console.log(encrypted)          // Now a simple check to see if the round-trip worked.
          if (encrypt) {
            alert('Success');
            document.getElementById("Result").innerHTML=encrypted;
          }
          else {
            alert('Something went wrong....');
          }
        });        $('#decrypt').click(function() {
          // Decrypt with the private key...
          var decrypt = new JSEncrypt();
          decrypt.setPrivateKey($('#privkey').val());
          var uncrypted = decrypt.decrypt($('#input').val());
          console.log(uncrypted)          // Now a simple check to see if the round-trip worked.
          if (uncrypted) {
            alert('Success');
            document.getElementById("Result").innerHTML=uncrypted;
          }
          else {
            alert('Something wrong....');
          }
        });        var generateKeys = function () {
          var sKeySize = $('#key-size').attr('data-value');
          var keySize = parseInt(sKeySize);
          console.log('Key size is: ' + keySize)
          var crypt = new JSEncrypt({default_key_size: keySize});
          crypt.getKey();
          $('#privkey').val(crypt.getPrivateKey());
          $('#pubkey').val(crypt.getPublicKey());
          alert('RSA 金鑰產生成功');
        };        // If they wish to generate new keys.
        $('#generate').click(generateKeys);
      });
    </script>
  </head>
  <body>
    <div class="btn-group">
      <div class="input-group">
        <span class="input-group-addon">密鑰長度(key Size)</span>
        <button class="btn btn-default dropdown-toggle" id="key-size" type="button" data-value="2048" data-toggle="dropdown">2048 bit <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a class="change-key-size" data-value="2048" href="#">2048 bit</a></li>
          <li><a class="change-key-size" data-value="4096" href="#">4096 bit</a></li>
        </ul>
      </div>
    </div>
    <br>&nbsp;<br>
      <button id="generate" class="btn btn-primary">產生金鑰</button>
    <br>&nbsp;<br>
    <label for="privkey">輸入加密密鑰(Private Key)</label><br/>
    <textarea id="privkey" rows="15" cols="65"></textarea><br/>
    <label for="pubkey">輸入加密公鑰(Public key)</label><br/>
    <textarea id="pubkey" rows="15" cols="65"></textarea><br/>
    <label for="input">輸入加(解)密字串:</label><br/>
    <textarea id="input" name="input" type="text" rows=4 cols=70></textarea><br/>
    <input id="encrypt" type="button" value="加密" style="width:100px;height:30px;"/>
    <input id="decrypt" type="button" value="解密" style="width:100px;height:30px;"/><br/>
    <p>加(解)密結果:</p>
    <textarea id="Result" rows=4 cols=70></textarea><br/>
  </body>
</html>

Javascript RSA 套件練習

Written by starzodiac

No responses yet