Skip to content

Instantly share code, notes, and snippets.

@hnxvc

hnxvc/.html

Created May 16, 2018 16:44
Show Gist options
  • Save hnxvc/fc952148575dde29fa862ecfe29f7a08 to your computer and use it in GitHub Desktop.
Save hnxvc/fc952148575dde29fa862ecfe29f7a08 to your computer and use it in GitHub Desktop.
Download ZIP
Demo for Duy
Raw
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript RSA Encryption</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="../bin/jsencrypt.min.js"></script>
</head>
<body>
---
layout: default
title: Online RSA Key Generator
---
<div class="row">
<div class="panel panel-default">
<div class="panel-heading"><h1>Online RSA Key Generator</h1></div>
<div class="panel-body">
<div class="row col-lg-12">
<div class="well">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- frontpage banner -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1902035200208763"
data-ad-slot="9043467163"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-lg-2">
<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="1024"
data-toggle="dropdown">1024 bit <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="change-key-size" data-value="512" href="#">512 bit</a></li>
<li><a class="change-key-size" data-value="1024" href="#">1024 bit</a></li>
<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">Generate New Keys</button>
<br>&nbsp;<br>
<span><i><small id="time-report"></small></i></span>
<br>&nbsp;<br>
<label for="async-ck"><input id="async-ck" type="checkbox"> Async</label>
</div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-6">
<label for="privkey">Private Key</label><br/>
<small>
<textarea id="privkey" rows="15" style="width:100%"></textarea>
</small>
</div>
<div class="col-lg-6">
<label for="pubkey">Public Key</label><br/>
<small><textarea id="pubkey" rows="15" style="width:100%" readonly="readonly"></textarea></small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading"><h3>RSA Encryption Test</h3></div>
<div class="panel-body">
<div class="col-lg-5">
<label for="input">Text to encrypt:</label><br/>
<textarea id="input" name="input" style="width: 100%" rows="4">This is a test!</textarea>
</div>
<div class="col-lg-2">
<label>&nbsp;</label><br/>
<button id="execute" class="btn btn-primary">Encrypt / Decrypt</button>
</div>
<div class="col-lg-5">
<label for="crypted">Encrypted:</label><br/>
<textarea id="crypted" name="crypted" style="width: 100%" rows="4"></textarea>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(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();
});
});
// Execute when they click the button.
$('#execute').click(function () {
// Create the encryption object.
var crypt = new JSEncrypt();
// Set the private.
crypt.setPrivateKey($('#privkey').val());
//return;
// If no public key is set then set it here...
var pubkey = $('#pubkey').val();
if (!pubkey) {
$('#pubkey').val(crypt.getPublicKey());
}
// Get the input and crypted values.
var input = $('#input').val();
var crypted = $('#crypted').val();
// Alternate the values.
if (input) {
$('#crypted').val(crypt.encrypt(input));
$('#input').val('');
}
else if (crypted) {
var decrypted = crypt.decrypt(crypted);
if (!decrypted)
decrypted = 'This is a test!';
$('#input').val(decrypted);
$('#crypted').val('');
}
});
var generateKeys = function () {
var sKeySize = $('#key-size').attr('data-value');
var keySize = parseInt(sKeySize);
var crypt = new JSEncrypt({default_key_size: keySize});
var async = $('#async-ck').is(':checked');
var dt = new Date();
var time = -(dt.getTime());
if (async) {
$('#time-report').text('.');
var load = setInterval(function () {
var text = $('#time-report').text();
$('#time-report').text(text + '.');
}, 500);
crypt.getKey(function () {
clearInterval(load);
dt = new Date();
time += (dt.getTime());
$('#time-report').text('Generated in ' + time + ' ms');
$('#privkey').val(crypt.getPrivateKey());
$('#pubkey').val(crypt.getPublicKey());
});
return;
}
crypt.getKey();
dt = new Date();
time += (dt.getTime());
$('#time-report').text('Generated in ' + time + ' ms');
$('#privkey').val(crypt.getPrivateKey());
$('#pubkey').val(crypt.getPublicKey());
};
// If they wish to generate new keys.
$('#generate').click(generateKeys);
generateKeys();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment