-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (133 loc) · 8.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="fontawesome/fa-svg-with-js.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="fontawesome/fontawesome-all.js"></script>
<script src="lib/BigInteger.js"></script>
<!-- <script src="lib/pako.js"></script> -->
<script src="codec.js"></script>
<script src="app.js"></script>
<style>
a.url {word-break: break-all;}
textarea[disabled] {overflow: hidden;}
</style>
<title>sendkey</title>
</head>
<body>
<div class="container">
<div class="text-center">
<h1><i class="fas fa-magic"></i><i class="fas fa-key"></i> sendkey</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="p-3 card d-none" id="phase1">
<div class="card-body">
<h2>Step 1 of 3</h2>
<p>Send this link to the person you want to generate a password with:</p>
<a href="" class="text-left btn btn-outline-success disabled copy-button"><i class="fas fa-circle-notch fa-spin"></i> <span class="copy-label">Working...</span></a>
<div class="mt-1 d-none covered">
<div class="cover form-control" style="position: absolute; z-index: 2; background-color: rgba(238, 238, 238, 0.9);">
<button type="button" style="z-index: 3; margin: auto;" class="mx-auto d-block btn btn-info reveal"><i class="fas fa-eye"></i> Reveal (<span class="charcount"></span> characters)</button>
</div>
<textarea disabled style="resize: none" class="hide form-control copy-text"></textarea>
</div>
</div>
</div>
<div class="p-3 card d-none" id="phase2">
<div class="card-body">
<h2>Step 2 of 3</h2>
<p class="mb-1">Your new password:</p>
<div class="key-box">
<button disabled class="text-left btn btn-outline-success copy-button"><i class="fas fa-circle-notch fa-spin"></i> <span class="copy-label">Working...</span></button>
<span class="dropdown encoding-dropdown d-none">
<button class="text-left btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-keyboard"></i> <span style="display: inline-block; width: 7em;" class="encoding-label">password</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" data-encoding="B" href="">base64</a>
<a class="dropdown-item" data-encoding="x" href="">hex</a>
<a class="dropdown-item" data-encoding="p" href="">password</a>
<!--<a class="dropdown-item" data-encoding="m" href="">message</a>-->
</div>
</span>
<button class="d-none btn btn-secondary regenerate"><i class="fas fa-sync"></i> Regenerate</button>
<div class="mt-1 d-none covered">
<div class="cover form-control" style="position: absolute; z-index: 2; background-color: rgba(238, 238, 238, 0.9);">
<button type="button" style="z-index: 3; margin: auto;" class="mx-auto d-block btn btn-info reveal"><i class="fas fa-eye"></i> Reveal (<span class="charcount"></span> characters)</button>
</div>
<textarea disabled placeholder="Enter your message here..." style="resize: none" class="text-dark bg-light hide form-control copy-text"></textarea>
</div>
</div>
<p class="mt-4 mb-1">Send this link back so the sender can see the password:</p>
<div class="url-box">
<a href="" class="text-left btn btn-outline-success disabled copy-button"><i class="fas fa-circle-notch fa-spin"></i> <span class="copy-label">Working...</span></a>
<div class="mt-1 d-none covered">
<div class="cover form-control" style="position: absolute; z-index: 2; background-color: rgba(238, 238, 238, 0.9);">
<button type="button" style="z-index: 3; margin: auto;" class="mx-auto d-block btn btn-info reveal"><i class="fas fa-eye"></i> Reveal (<span class="charcount"></span> characters)</button>
</div>
<textarea disabled style="resize: none" class="hide form-control copy-text"></textarea>
</div>
</div>
</div>
</div>
<div class="p-3 card d-none" id="phase3">
<div class="card-body">
<h2>Step 3 of 3</h2>
<p>Your new password:</p>
<button disabled class="text-left btn btn-outline-success copy-button"><i class="fas fa-circle-notch fa-spin"></i> <span class="copy-label">Working...</span></button>
<div class="mt-1 d-none covered">
<div class="cover form-control" style="position: absolute; z-index: 2; background-color: rgba(238, 238, 238, 0.9);">
<button type="button" style="z-index: 3; margin: auto;" class="mx-auto d-block btn btn-info reveal"><i class="fas fa-eye"></i> Reveal (<span class="charcount"></span> characters)</button>
</div>
<textarea disabled style="resize: none" class="text-dark bg-light hide form-control copy-text"></textarea>
</div>
</div>
</div>
<div class="p-3 card d-none bg-warning" id="error">
<div class="card-body">
<h2>Error</h2>
<p>An error has occurred.</p>
<p><strong id="errorText"></strong></p>
<p>Please click 'Start Over' below.</p>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="p-3 bg-light rounded">
<p>
This page allows you to securely generate a shared password with another person. This is a three step
process. In the first two steps, one person generates a link and shares it with the other person. At the
end, each of you will have a password that only the two of you know. The password cannot be determined by
reading the data encoded in the link URLs. You may share them by any mechanism you wish. You could post
them publically on Facebook and it would still be guaranteed that only the two people who originally
participated could determine what the generated password was.
</p>
<p>
This page uses <a href="https://en.wikipedia.org/wiki/Diffie–Hellman_key_exchange">Diffie-Hellman key
exchange</a> and executes entirely in the browser. DH is performed in 3 steps. In step 1, a random number
is generated, which is to be kept secret on machine A. This number is kept in DOM Local Storage, with an
id. A link is generated on machine A, which includes the generated id (but not the secret number). In
step 2, the link is opened on machine B. At this point, the password can be calculated, and it is
displayed on machine B. A link is also generated, which is to be opened on machine A. The link contains the
id, and the DH value from machine B (not the password, or machine B's secret). Machine A retrieves its
secret from local storage and uses it to compute the new password. The secret is then deleted from local
storage.
</p>
<p><i class="fab fa-2x fa-github text-dark"></i> <a href="https://github.com/amadigan/sendkey">View the source on GitHub</a></p>
<a id="startOverButton" href="#" class="btn btn-primary disabled"><i class="fas fa-home"></i> Start Over</a>
<a id="resetButton" href="#" class="btn btn-danger disabled" onclick="reset();"><i class="fas fa-bolt"></i> Clear Local Data</a>
</div>
</div>
</div>
</div>
</body>
</html>