Visualizzare le password dei moduli salvati: come creare un bookmarklet
Ecco come creare un semplice “plugin” per il browser per riuscire a leggere le password salvate nei moduli autocompilati.
Un bookmarklet è un link HTML che al click richiama una funzione Javascript e che quindi esegue delle operazioni sul DOM della pagina.
La mia esigenza era quella di trasformare un campo <input type="password"> in un <input type="text"> così da poter leggere la password, che avevo precedentemente salvato quando l’ho compilato, e che il browser ricorda e autocompila per me. Così la posso copiare e incollare altrove.
Per fare questo mi sono programmato un bookmarklet che modificasse la proprietà type dell’input.
E per creare un bookmarklet basta programmare una pagina HTML e un po’ di Javascript. La pagina HTML servirà a creare un semplice link che richieamerà il file esterno Javascript. Sarà possibile quindi trascinare il link nella barra dei preferiti per poi cliccarlo quando serve.
| <a href=”javascript: (function () { var jsCode = document.createElement(‘script’); jsCode.setAttribute(‘src’, ‘showpassword.js’); document.body.appendChild(jsCode); }());”> | |
| Show hidden password | |
| </a> |
view rawindex.html hosted with ❤ by GitHub
| console.log(‘Bookmarklet made by andrearufo.it’); | |
| var inputs = document.querySelectorAll(‘input[type=password]’); | |
| if (inputs.length > 0) { | |
| console.log(‘Ok…’) | |
| for (i=0; i<=inputs.length; i++){ | |
| inputs[i].setAttribute(‘type’, ‘text’); | |
| } | |
| }else{ | |
| console.log(‘No password fields…’) | |
| } | |
| console.log(‘–> Done’) |
view rawshowpassword.js hosted with ❤ by GitHub
Come detto, il link richiama un Javascript esterno che si trova su un server remoto: è quindi necessario indicare l’indirizzo completo.
Sarebbe anche possibile scrivere tutto il codice in linea e quindi non usare un file js. Ma allora perche usarlo?
Perchè, così facendo sarà possibile modificare il solo file esterno js e aggiornare il bookmarklet per tutti quelli che lo usano e su tutte le postazioni.
Se anche tu hai creato un nuovo bookmarklet simile mandami un tweet: magari mi torna comodo!
Vuoi realizzare un nuovo progetto sul web?
Contattami!