Studio 6
Create a bookmarklet that unmasks password fields
Bookmarklets are bookmarks with javascript: URLs that execute Javascript code on the current page when invoked.
We have seen how to create one in lecture
(note that this slide is interactive -- you can use it to generate arbitrary bookmarklets).
For this exercise, you will create your own bookmarklet.
Often, when you visit websites where the browser has saved your password, it's hard to know what your password actually is, since it shows up as ******. Also, the browser obscuring your password is rarely needed for security, since usually nobody is looking behind your back, and the practice actively harms usability (which dimension(s) of usability does it harm?).
Some websites offer functionality to toggle between masked and unmasked password fields, but not all.
However, if you inspect the HTML with dev tools, you can change type="password" to type="text" (or remove it altogether, or set it to nonsense)
and it just becomes a normal, readable, text field.
Complete the following on https://github.com/settings/security. Click the "Change password" button to reveal three password fields and type gibberish into them!
Step 0
Figure out how, in the console, you can use javascript expressions to unmask all password fields on a page.
Step 1
Package your code into a bookmarklet that does this when invoked, so that one does not need to use dev tools for it.
Step 2
Often, after unmasking a password field, you may want to mask it again.
There are many reasons for this, for example, to get the browser to save your login (browsers typically match on <input type=password> for that)
or because someone walked in the room you're in and you don't want them to see your password.
Adapt your bookmarklet to return password fields to type="password" if invoked a second time.
If invoked a third time, it would reveal the passwords again and so on.
Make sure that when you return text fields to type="password" you do not assume that everything with type="text" was previously a password field!
You do not need to try and persist the changes to <input> elements across page loads.
Bookmarklets have to be encoded in a specific way, and a bookmarklet generator such as this one can do the job for you.
To facilitate iterating on bookmarklet code without having to package it up as a bookmarklet every time,
you can include your bookmarklet code in a separate file (e.g. bookmarklet.js),
then create a bookmarklet that loads that file from localhost (e.g. http://localhost:8000/bookmarklet.js).
Then you are just editing a JS file and reloading the page to test your bookmarklet and iterate on it.
Prototyping exercise
Instructions given in studio. We'll be prototyping an improvement on the controls described in pages 12-18 of this document.