-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
391 lines (366 loc) · 15.7 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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<html>
<!-- Bidvertiser2086285 -->
<!-- Some useful links:
https://general.support.brightcove.com/developer/debugging-mobile-devices.html
https://developers.google.com/codelabs/pwa-in-play
https://uxplanet.org/the-anatomy-of-input-field-c3ef863e01d7
-->
<head>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-TP7RQZFW");
</script>
<!-- End Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-MBETXDSRVS"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-MBETXDSRVS");
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "HPASS",
"url": "https://hpass.app",
"logo": "https://hpass.app/icons/logo.svg",
"applicationCategory": "SecurityApplication",
"operatingSystem": "All",
"browserRequirements": "Requires JavaScript. Works best in modern browsers.",
"description": "Progressive Web App to easily generate and use strong, site-specific passwords."
}
</script>
<meta name="description" content="Hinted easy to use password generator" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#db4938" />
<title>HPASS Password Generator</title>
<link rel="canonical" href="https://hpass.app" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/pwa.css" />
<link rel="icon" type="image/svg+xml" href="/icons/logo.svg" />
<!-- <script defer type="module" src="core/crypto.js"></script> -->
<!-- <script defer type="module" src="core/lib.js"></script> -->
<script defer type="module" src="app.js"></script>
<!-- <script defer type="module" src="sw.js"></script> -->
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9946044372357745"
crossorigin="anonymous"
></script>
</head>
<body class="index">
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-TP7RQZFW"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<br>
<audio id="clickSound" src="click-sound.wav" preload="auto"></audio>
<audio id="lockSound" src="door-close.mp3" preload="auto"></audio>
<div id="entryContainer">
<div id="topIcons1" class="topIcons">
<a href="help.html" target="_blank"><img id="help" class="btn" src="icons/help.svg" title="Help"></a>
<a href="info.html" target="_blank"><img id="info" class="btn" src="icons/info.svg" title="Info"></a>
<img class="btn email" src="icons/email.svg" title="Email Support">
<img class="btn share" src="icons/share.svg" title="Share">
<img class="btn change" src="icons/change.svg" title="Change Password">
<img class="btn reset" src="icons/reset.svg" title="Reset">
<img class="btn install" src="icons/install.svg" title="Install">
</div>
<img id="logop" class="share" src="icons/logo.svg" />
<div id="masterPasswordDiv" class="password-container">
<input id="masterPassword" type="password" autocomplete="off"
enterkeyhint="Enter" placeholder="Master Password"/>
<span><img id="eye-master" class="eye-img" src="icons/eye-hide.svg"></span>
</div>
<div id="newPasswordDiv" class="password-container">
<input id="newPassword" type="password" autocomplete="off"
enterkeyhint="Enter" placeholder="New Password"/>
<span><img id="eye-new" class="eye-img" src="icons/eye-hide.svg"></span>
</div>
<div id="versionContainer">
<!-- <div class="flex-item">
<img id="logo" loading="lazy" src="icons/logo.svg" />
</div> -->
<div class="flex-item">
<p id="version">YYYY-MM-DD</p>
</div>
<div class="flex-item">
<a href="privacy/index.html" target="_blank">Privacy</a>
</div>
<!-- <div class="flex-item">
<a href="help.html#FAQ">FAQ</a>
</div> -->
<div class="flex-item">
<!-- <a href="help.html#Contact">[email protected]</a> -->
<span class="email">[email protected]</span>
</div>
</div>
</div>
<div id="enterContainer">
<div id="enterIcons" class="topIcons">
<img class="btn share" src="icons/share.svg" title="Share">
<img id="lockEntry" class="btn lock" src="icons/lock.svg" title="Lock"/>
</div>
<div id="burnAndPeak" class="inputsContainer">
<div id="pgHintContainer" class="container">
<img id="gear" class="" src="icons/gear.svg">
<input id="pgHint" class="secret" autocomplete="off" enterkeyhint="Enter" placeholder="Enter Hint"/>
<img id="generate" class="" src="icons/generate.svg">
</div>
<div id="burnContainer" class="container" >
<button id="burnButton" class="leading-icon">🔥</button>
<input id="burn" class="input"
placeholder="Warm-up rounds (0-999999)"/>
</div>
<div id="peakContainer" class="container">
<button id="peakButton" class="leading-icon">🤐</button>
<input id="peak" class="input" placeholder="Top Secret" />
</div>
<div id="topSecurity" style="width: 90%; text-align: left;
margin: 5% 5% 5% 5%;">
<strong>Warm-up ( 🔥 )</strong> and
<strong>Top Secret ( 🤐 )</strong> are never saved.
You may want to use them for extra security.
In the unlikely event of your device being compromised and locally
stored (and encrypted) HPASS data hacked,
passwords generated with non-empty one (or both) of these fields,
still will be safe.
</div>
</div>
</div>
<hr>
<div id="editContainer" class="">
<div id="editIcons" class="topIcons">
<img class="btn back" src="icons/back.svg" title="Back">
<img class="btn import" src="icons/import.svg" title="Import">
<img class="btn export" src="icons/export.svg" title="Export">
<img id="save" class="btn save" src="icons/save.svg" title="Save"/>
<img id="editShare" class="btn share" src="icons/share.svg" title="Share">
<img id="lockEdit" class="btn lock" src="icons/lock.svg" title="Lock"/>
</div>
<h3>Edit & Save Settings</h3>
<div id="inputsContainer" class="inputsContainer edit">
<div id="edHintContainer" class="container">
<input id="edHint" class="input" placeholder="Hint">
</div>
<div id="saltContainer" class="container">
<button id="saltButton" class="leading-icon">🤫</button>
<input id="salt" class="input" placeholder="Secret">
</div>
<div id="pepperContainer" class="container">
<button id="pepperButton" class="leading-icon"><span style="color: red">🌶</span></button>
<input id="pepper" class="input" placeholder="Special Character">
</div>
<div id="lengthContainer" class="container">
<button id="lengthButton" class="leading-icon">📏</button>
<input id="length" class="input" placeholder="Length">
</div>
<div id="editLegend">
<p><!-- style="justify-content: center; text-align: left;"> -->
<hr>
<br>
<ul>
<li><strong>Hint</strong>: leave it empty to change <em>generic settings</em>.
You may need to create hint/site <em>specific settings</em>
if a site does not allow <strong><tt>Special Character</tt></strong> in your
<em>generic settings</em>, or demands longer/shorter password etc.
In such a case, enter a <strong><tt>Hint</strong></tt>,
modify <strong><tt>Special Character</tt></strong> and/or
<tt><strong>Length</strong></tt>.
</li>
<li><strong>Secret (<span>🤫</span>):</strong> makes generated passwords unique for you.</li>
<li><strong>Special Character
(<span style="color: red; line-height: 0;">🌶</span>):</strong>
one or more !\"#$%&'()*+,-./:;<=>?@[ ]^_`{|}~</li>
<li><strong>Length (📏):</strong> longer is better,
note however that a lot of sites have unreasonably short upper limit
- 15 seems to be a reasonable balance between security and a need to create
many <em>site-specific settings</em>.</li>
</ul>
</p>
<br><hr><br>
</div>
</div>
</div>
<div id="fileInputModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Select a JSON file to import hpass settings:</p><br>
<input type="file" id="importFileInput" accept="application/json">
</div>
</div>
<div id="footer" style="width: 90%; margin: 5% 5% 5% 5%;">
<h2 style="text-align: center">
Why strong passwords are important?
</h2>
<p>
Using strong passwords is crucial for protecting your online
accounts and sensitive information. Strong passwords are difficult
for hackers to guess, reducing the risk of unauthorized access.
Strong passwords in conjuction with a tool which makes it easy to
generate them (like HPASS), and eliminates a need to remember
or store passwords, offer several advantages:
</p>
<ul>
<li>
<b>Security:</b> Strong password include a mix of letters,
numbers, and symbols, making them harder to crack through brute
force or dictionary attacks.
</li>
<li>
<strong>Privacy:</strong> Robust passwords safeguard your personal
and financial data, preventing identity theft and privacy
breaches.
</li>
<li>
<b>Account Protection:</b> Strong passwords help defend against
unauthorized access to your accounts, securing your emails, social
media, and online banking.
</li>
<li>
<b>Simplified Digital Life:</b> Easy to generate strong passwords
minimize "Forgot your password?" situations and the need of going
through the time consuming process of resetting password.
</li>
</ul>
<h3>Passwords Do's:</h3>
<ul>
<li>Use account specific passwords</li>
<li>
For all important accounts (email, financial sites, etc.) use
multi-factor authentication (MFA) whenever possible.
</li>
<li>
Use long (at least 12-15 characters), complex passwords. Longer is
always better, but some sites have a restriction of password
length. Default length 15 selected for HPASS seems to be a
reasonable compromise between security and convenience.
</li>
</ul>
<h3>Passwords Don't</h3>
<ul>
<li>Do not reuse the same password for multiple accounts</li>
<li>
Do not use easy patterns, dictionary words or easily guessable
personal data. Few examples of most commonly used (and hacked!)
passwords:
<tt
>123456, password, qwerty, 111111, abc123, password1, iloveyou,
1q2w3e4r</tt
>.
</li>
<li>
Never share your passwords with others, particularly as plain text
in email, etc.
</li>
</ul>
<h3>But how?</h3>
<p>
You may ask, but how possibly can I create, and remember long,
complex and site specific passwords for multiple - perhaps hundreds -
sites. As you may have guessed, our recommendation is to use HPASS
to simplify this aspect of your life :) - see more on how HPASS can
help, and why it might be better solution for you than password
manager, in <a href="info.html">Info section.</a> If you have
specific questions please do not hesitate to send email to
<strong><tt>[email protected]</tt></strong>.
</p>
<h3>Password Generators vs. Managers</h3>
<p>
One of the often recommended solutions is to use
<a href="https://en.wikipedia.org/wiki/Password_manager"
>Password Manager</a
>
[PM]. The advantage of PMs is that in addition to storing passwords
they allow to store any number of other data (credit card numbers,
PINs, social security numbers, etc) and some allow to share this
information with other users. While convenient, this type of
centralized storage attracts hackers with the prospect of
potentially stealing sensitive and valuable data for milions of
users and creates single point of failure.
</p>
<p>
Try HPASS. It is the single-minded and narrowly focused tool to help
with easy generation and use of strong, secure and site-specific
passwords. You can find more on how HPASS can help, and why you may
want to consider it, in
<a href="info.html">Info section.</a>
</p>
<h3>Further reading</h3>
<ol>
<li>
<a
href="https://www.darkreading.com/vulnerabilities-threats/how-password-managers-can-get-hacked"
>How Password Managers Can Get Hacked</a
>
</li>
<li>
<a
href="https://fractionalciso.com/browser-password-managers-flawed-security-by-design"
>Browser password managers – flawed security, by design!</a
>
</li>
<li>
<a
href="https://www.safetydetectives.com/blog/the-most-hacked-passwords-in-the-world/"
>20 Most Hacked Passwords in 2023: Is Yours Here?
</a>
</li>
<li>
<a href="https://proton.me/blog/how-long-should-my-password-be">
https://proton.me/blog/how-long-should-my-password-be</a>
</li>
<li>
<a
href="https://www.psmpartners.com/blog/nist-password-best-practices/"
>NIST Password Best Practices</a
>
</li>
<li>
<a
href="https://cybernews.com/best-password-managers/are-password-managers-safe/"
>Are password managers safe to use in 2023?</a
>
</li>
</ol>
</div>
<div style="margin-bottom: 32rem;"></div>
<div id="adunit">
<ins
class="adsbygoogle"
style="display: block"
data-ad-client="ca-pub-9946044372357745"
data-ad-slot="7381421405"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
</html>