otp-crypto
Version:
Pseudo one-time pad crypto library for plaintext data exchange.
76 lines (67 loc) • 2.43 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>OTP Crypto</title>
<meta name="author" content="Daniel Geymayer">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<style>
body {
text-align: center;
}
textarea {
width: 45%;
height: 300px;
}
.mainBtn {
width: 40%;
height: 50px;
}
</style>
</head>
<body>
<h1>OTP Crypto</h1>
<textarea id="input" autocomplete="off">°^^!§$%&/()=?1234567890ßqwertzuiopü+asdfghjklöä#yxcvbnm,.-QWERTZUIOPÜ*ASDFGHJKLÖÄ'YXCVBNM;:_😩</textarea>
<textarea id="output" autocomplete="off"></textarea>
<br>
<button type="button" id="mainBtn" class="mainBtn">Encrypt / Decrypt</button>
<br><br>
Remaining key length: <span id="remainingKeyLength"></span>
<button type="button" id="resetKeysBtn">Reset keys</button>
<!-- JavaScript -->
<script type="module">
import OtpCrypto from '../src/otp-crypto.js'
const DEFAULT_KEY_LENGTH = 1000
let keySender, keyReceiver
function resetKeys() {
keySender = OtpCrypto.generateRandomBytes(DEFAULT_KEY_LENGTH)
keyReceiver = keySender.slice(0)
document.getElementById('remainingKeyLength').textContent = keySender.length
}
document.getElementById('mainBtn').addEventListener('click', () => {
// Encrypt
const plaintextUnencrypted = document.getElementById('input').value
const otpEncrypted = OtpCrypto.encrypt(plaintextUnencrypted, keySender)
if (otpEncrypted === null) {
alert('The key is not long enough - please reset it.')
return
}
keySender = otpEncrypted.remainingKey
console.log('otpEncrypted:')
console.log(otpEncrypted)
// Decrypt
const otpDecrypted = OtpCrypto.decrypt(otpEncrypted.base64Encrypted, keyReceiver)
output.value = otpDecrypted.plaintextDecrypted
keyReceiver = otpDecrypted.remainingKey
console.log('otpDecrypted:')
console.log(otpDecrypted)
// Update remaining key length info
document.getElementById('remainingKeyLength').textContent = keySender.length
})
document.getElementById('resetKeysBtn').addEventListener('click', () => {
resetKeys()
})
resetKeys()
</script>
</body>
</html>