Password Generator

Purpose

Build a password generator capable of deriving strong, reproducible passwords from easy to remember hints.

Rationale

One way to securely store and share passwords is by using a password manager. It is a recommended and widely used solution, but not without problems. See for example:

• LastPass vault breach (2022-12-28)

Proposed generator is an alternative approach with two main advantages: (1) passwords are generated on demand and never stored - there is no danger of data breach (2) there is no master password to remember.

Simple Example

The table below illustrates how from the same hint, using easily customizable pepper and salt options (here: pepper = '+', salt = 'salt') completely unrelated passwords with different length are generated

hint	length	generated password
mos	8	Xvyqf+0V
mos	16	xdBl3qU6bZvZ+A4X
mos	32	1dtyBU1zuGBS+tPxrbZbppOqGrYaQJQH

Note: pepper string (1 or more characters) is used to provide special character typically required in passwords

Similar solutions

1. https://passwordmaker.org (also on Github)
2. http://passwordgen.org (also on GitHub)

Check it out!

1. https://hpass.net
2. https://ryszard314159.github.io/template.html

Useful tools

1. bootstrap - JavaScript module (npm install bootstrap)
2. workbox - Production-ready service worker libraries and tooling
3. https://web.dev/progressive-web-apps/ -
4. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
5. https://jakearchibald.github.io/isserviceworkerready/
6. https://hnpwa.com/ - a lot of examples with code
7. https://www.pwabuilder.com

TODO

• use secure web storage?
  • stackoverlow
  • https://nodejs.org/api/crypto.html
  • https://nodejs.org/api/webcrypto.html
• automate publishing to pages.github.io
• web browser plugin and PWA (progressive web app) - these probably can use content scripts to detect that pointer is in the password input box... some related Stackoverlow items:
  • How to access the webpage DOM/HTML from an extension popup or background script?
  • How to determine which html page element has focus?
• native smartphone apps (Android, iOS)
• progressive web application
• add logo e.g. icons/logo.png generated with DALL-E
• compile node js to byte-code
• run local server for testing e.g.: python -m http.server 8080
• https://web.dev/how-to-use-local-https/
• install local https server to facilitate pwa testing: https://github.com/FiloSottile/mkcert
• https://www.arubacloud.com/tutorial/how-to-enable-https-protocol-with-apache-2-on-ubuntu-20-04.aspx
• https://www.arubacloud.com/tutorial/how-to-create-a-self-signed-ssl-certificate-on-ubuntu-18-04.aspx

$ ./mkcert -install
Created a new local CA 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox and/or Chrome/Chromium trust store (requires browser restart)! 🦊

Here are pointers to some resources:

1. Chrome extensions samples
2. How to make a Chrome browser extension from scratch | Understanding Chrome extension anatomy
3. https://web.dev/progressive-web-apps/
4. https://simplepwa.com/
5. https://github.com/hemanth/awesome-pwa
6. https://github.com/mdn/pwa-examples
7. https://github.com/vaadin/expense-manager-demo
8. PWA Series: Hands-on, create your first PWA, step by step
9. Hello-pwa
10. https://web.dev/install-criteria/#criteria
11. https://www.freecodecamp.org/news/publish-your-website-netlify-github/
12. Building & Deploying your first Progressive Web App
13. https://www.udemy.com/course/progressive-web-apps/learn/lecture/7171264

Password generators

I could not find any password generators which would generate reproducible password given a hint, and possibly some other parameters.

1. https://passgen.io/
2. https://passgen.co/
3. https://www.avast.com/en-us/random-password-generator
4. https://www.nexcess.net/web-tools/secure-password-generator/
5. https://www.dashlane.com/features/password-generator
6. https://www.grc.com/passwords.htm

Password testers

1. https://www.security.org/how-secure-is-my-password/
2. https://www.passwordmonster.com

JavaScript: Create reproducible UUIDs within a name space

This can be useful to hash user emails e.g.

const { v5: uuidv5 } = require('uuid');
const EMAIL_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
uuidv5('[email protected]', EMAILS_NAMESPACE); // -> '28e0fb10-e6ba-5663-9eb4-54e0b9607643'
uuidv5('[email protected]', EMAILS_NAMESPACE); // -> '5337ff34-e3d4-5234-bc8a-0baa84a4fb48'

This way we can check if user (i.e. email) is in the system without actually storing emails

Password managers (bad) press

1. Norton LifeLock Accounts Targeted (2023-01-19)
2. Lastpass: Hackers stole customer vault data in cloud storage breach (2022-12-22)

Notes

• document.querySelectorAll('input[type="password"]') can be used to select input box (or boxes?) for password in the active page (see this stackoverflow entry)

• Element.getClientRects() - might be useful to get coords of input box, maybe also jQuery .position()?

• How to get access to DOM elements? from popup? See also Firefox version of chrome extensions

• How to inspect source code of browser extension?; go to:

  1. chrome://extensions/ to get ID of the extension (e.g. ID=aeblfdkhhhdcdjpifhhbdiojplfjncoa for 1password)
  2. chrome://version/ to get Profile Path (e.g. $HOME/.config/google-chrome/Default)
  3. $HOME/.config/google-chrome/Default/Extensions/<ID> - this is where the source code is located
  4. use e.g. https://www.freeformatter.com to format JavaScript code

• Build a Chrome Extension – Course for Beginners

  1. illustrates how use chrome API to communicate between content.js script, which runs in the context of the page (and has access to DOM elements) and running in the background service workers.
  2. to create and add new elements to the elements in the page e.g. popup icon like 1password popping up in the password input box! using .appendChild()

• How to inject JavaScript?

Attributions

1. info icon

References

1. NIST Password Guidelines and Best Practices for 2020
2. NIST Digital Identity Guidelines
3. 8 chrome extensions
4. Episode 552: Matt Frisbie on Browser Extensions
5. Android emulator
6. Comparing Browser-based Password Managers: Is There Any Difference?
7. WebDev Learn PWA
8. PWA from scratch (freecodecamp)
9. Simulate mobile devices with Device Mode
10. Web App manifest generator
11. PWABuilder
12. Progressive Web Apps: The Concise PWA Masterclass