-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
167 lines (147 loc) · 6.61 KB
/
index.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
164
165
166
167
<!DOCTYPE html>
<!--
Why are you here? If you just clicked on view-source or through the github repo and don't actually know what you are doing:
Hey! Enjoy your stay. Breakfast and midnight snacks are not included. Clean the toilet after use. Thanks.
For anyone else:
Since the MIT license basically says I am not accountable for anything that my code fucks up, don't even try to sue me for
your health conditions after reading through it.
Known side effects:
Fever, sweats, chills, rage, crippling depression, increased sleepiness, decreased sleepiness, normal sleepiness.
Only consume with the supervision of an adult. Cheers.
-->
<html>
<header>
<meta charset="utf-8"/>
</header>
<!-- sourcing the 3rd party scripts needed -->
<script src="openpgp.min.js"></script>
<script src="particles.js"></script>
<script src="baffle.js"></script>
<!-- Basic HTML head. Also loading the background particles... It shouldn't be here, I know... But it was the first place where it worked properly :) -->
<head>
<title>WebGPG</title>
<link type="text/css" rel="stylesheet" href="style.css" media="screen,projection"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script>particlesJS.load('particles-js', 'particles.json', function() {
console.log('callback - particles.js config loaded');
});</script>
</head>
<!-- HTML stuff... You know... Like... Characters and buttons and textboxes and all the good stuff... -->
<body style="background-color: black" >
<div id="particles-js">
<div class="content">
<h1><font color="silver"><span class="baffle"># WebGPG</span></font></h1>
<div class="message">
<h2><font color="silver">$ Message to encrypt/verify</font></h2>
<textarea rows="5"></textarea>
</div>
<br>
<div id="public-keys">
<div class="public-key">
<h2><font color="silver">$ Public Key</font></h2>
<p class="hint">$ Only the person with the private key will be able to decrypt the message</p>
<p class="hint">$ or create a valid signature.</p>
<textarea rows="5"></textarea>
</div>
</div>
<font color="silver"><pre id="output" class="cypher"></pre></font>
<font color="silver"><pre id="sigoutput" class="cypher"></pre></font>
<button id="encrypt">./encrypt.sh</button>
<button id="verify">./verify_sig</button>
<br>
<button id="copybtn">./copytoclipboard.py</button>
<button id="add-public-key">Add Public Key</button>
<!-- https://i.imgur.com/CmqhpYs.png. -->
<script>
let a = baffle('.baffle', {
characters: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#####$$$$',
speed: 80
}).start();
a.reveal(1500, 700);
//Who want's some variables? You only pay 100% of the initial price if you purchase 2!
const query = query => document.querySelector(query);
const queryAll = query => Array.prototype.slice.apply(document.querySelectorAll(query));
const publicKeyTemplate = query('#public-keys').innerHTML;
function getKey(textarea, type) {
const { value } = textarea;
if (!value) {
throw new Error(`${type} key missing`);
}
return openpgp.key.readArmored(value).keys[0];
}
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
query('#add-public-key').addEventListener('click', () => {
const element = document.createElement('div');
element.innerHTML = publicKeyTemplate;
query('#public-keys').appendChild(element);
});
//Encrypt the message with the private key when the button 'encrypt' is clicked
query('#encrypt').addEventListener('click', () => {
Promise.resolve().then(privateKey => {
const options = {
data: query('.message textarea').value,
publicKeys: queryAll('.public-key textarea').map(el => getKey(el, 'public')),
privateKey: privateKey,
armor: true,
};
//show encrypted message
return openpgp.encrypt(options).then(results => {
query('#output').innerHTML = results.data;
});
})
.catch(err => alert(err.message))
;
});
query('#copybtn').addEventListener('click', () => {
selectElementText(query("#output"));
/* Copy the text inside the text field */
document.execCommand("Copy");
});
query('#verify').addEventListener('click', () => {
//Verify Signature when the button 'verify_sig' is clicked
options = {
message: openpgp.cleartext.readArmored(query('.message textarea').value), // parse armored message
publicKeys: queryAll('.public-key textarea').map(el => getKey(el, 'public')) // for verification
};
openpgp.verify(options).then(function(verified) {
validity = verified.signatures[0].valid; // true
if (validity) {
query('#sigoutput').innerHTML = "Signature Valid ✅ <br>KeyID: " + verified.signatures[0].keyid.toHex();
}
else if (!validity){
query('#sigoutput').innerHTML = "❌ Signature Invalid ❌";
}
});
});
</script>
<!-- Bottom Disclaimer/Info -->
<p class="allignleft">
<font color="silver">
This page uses the industry vetted, open-source OpenPGP library <a href="https://github.com/openpgpjs/openpgpjs">OpenPGP.js</a> and does not submit anything to any server.
Everything happens in your browser and is completely lost when you close this page.
</font>
</p>
<!-- Links -->
<p class="alligncenter">
<font color="silver">
<a target="_blank" href="https://ncrypt.sh/contact">CONTACT</a> | <a target="_blank" href="https://github.com/rafficer/WebGPG">SOURCE</a> | <a target="_blank" href="https://ncrypt.sh/donate">DONATE</a>
</font>
</p>
</div>
</div>
</body>
</html>