-
Notifications
You must be signed in to change notification settings - Fork 0
/
rsa-demo.html
163 lines (138 loc) · 4.81 KB
/
rsa-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSA Encryption and Decryption</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
textarea, input {
width: 100%;
height: 100px;
margin: 10px 0;
padding: 5px;
resize: none;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>RSA Encryption and Decryption</h2>
<section>
<p>Asymmetric key encryption utilizes a public key to encrypt a secret and a private key to decrypt.</p>
<p>The public key can be shared through insecure channels publicly.</p>
<p>The private key needs to be kept secure.</p>
<p>This method of message sending requires several steps</p>
<ol>
<li>Receiver generates keys and shares the public key.</li>
<li>Sender encrypts the message using the public key. User sends the ciphertext.</li>
<li>Receiver decrypts the ciphertext using the private key.</li>
</ol>
</section>
<hr>
<h4>1. Receiver - Generate Public and Private Keys</h4>
<p>Save the keys. Share the public key with the sender</p>
<button onclick="generateKeys()">Generate Keys</button>
<p>Public Key:</p>
<textarea id="publicKey" readonly></textarea>
<p>Private Key:</p>
<textarea id="privateKey" readonly></textarea>
<hr>
<h4>2. Sender - Encrypt message</h4>
<p>Enter your receiver's public key and your secret message to encrypt.</p>
<p>Share the ciphertext with your receiver.</p>
<p>Enter Public Key:</p>
<textarea type="text" id="enteredPublicKey"></textarea>
<p>Secret Message to Encrypt:</p>
<textarea id="plaintext"></textarea>
<button onclick="encrypt()">Encrypt</button>
<p>Encrypted Ciphertext:</p>
<textarea id="ciphertext_encrypt" readonly></textarea>
<hr>
<h4>3. Receiver - Decode message</h4>
<p>Enter your private key and the ciphertext to decrypt</p>
<p>Enter Private Key:</p>
<textarea id="enteredPrivateKey"></textarea>
<p>Ciphertext:</p>
<textarea id="ciphertext_decrypt"></textarea>
<button onclick="decrypt()">Decrypt</button>
<p>Decrypted Message:</p>
<textarea id="decryptedPlaintext" readonly></textarea>
</div>
<script>
async function generateKeys() {
const keyPair = await window.crypto.subtle.generateKey(
{
name: "RSA-OAEP",
modulusLength: 2048,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
},
true,
["encrypt", "decrypt"]
);
const publicKey = await window.crypto.subtle.exportKey("spki", keyPair.publicKey);
const privateKey = await window.crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
document.getElementById("publicKey").value = btoa(String.fromCharCode.apply(null, new Uint8Array(publicKey)));
document.getElementById("privateKey").value = btoa(String.fromCharCode.apply(null, new Uint8Array(privateKey)));
}
async function encrypt() {
const publicKey = document.getElementById("enteredPublicKey").value;
const plaintext = document.getElementById("plaintext").value;
const publicKeyBinary = new Uint8Array(atob(publicKey).split('').map(char => char.charCodeAt(0)));
const publicKeyCrypto = await window.crypto.subtle.importKey("spki", publicKeyBinary,
{name: "RSA-OAEP", hash: "SHA-256"},
true, ["encrypt"]);
const encrypted = await window.crypto.subtle.encrypt(
{
name: "RSA-OAEP"
},
publicKeyCrypto,
new TextEncoder().encode(plaintext)
);
document.getElementById("ciphertext_encrypt").value = btoa(String.fromCharCode.apply(null, new Uint8Array(encrypted)));
}
async function decrypt() {
const privateKey = document.getElementById("enteredPrivateKey").value;
const ciphertext = document.getElementById("ciphertext_decrypt").value;
const privateKeyBinary = new Uint8Array(atob(privateKey).split('').map(char => char.charCodeAt(0)));
const privateKeyCrypto = await window.crypto.subtle.importKey("pkcs8", privateKeyBinary,
{name: "RSA-OAEP", hash: "SHA-256"},
true, ["decrypt"]);
const decrypted = await window.crypto.subtle.decrypt(
{
name: "RSA-OAEP"
},
privateKeyCrypto,
new Uint8Array(atob(ciphertext).split('').map(char => char.charCodeAt(0)))
);
document.getElementById("decryptedPlaintext").value = new TextDecoder().decode(decrypted);
}
generateKeys(); // Generate keys when page loads
</script>
</body>
</html>