textgeneration of a pas...">
Geekly Articles each Day
📜 ⬆️ ⬇️

Feature javascript protocol or generation of random password in the browser tab

location.href = "javascript:document.body.textContent = '<div>text</div>';"

Paste the line as html code:

 <div>text</div>

generation of a password on any site: XbD{'|<"]bFyWT49
XbD{'|<"]bFyWT49
to the clipboard in one click


Introduction


To create a password, you can use any ASCII characters in the range 32-126. Including special characters: "<", ">", "/", etc.
For the convenience of generating a password, I created a bookmark in a browser, in which the url used javascript protocol instead of a link to the page.
')
JS generates a password of length n from the set of available ASCII characters and inserts the resulting string into the document using document.body.textContent.

Url bookmarks
javascript:for(var a=[],i=0;i<95;i++)a.push(String.fromCharCode(32 + i));for(var b="",i=0;i<16;i++)b+=a[Math.floor(Math.random()*95)];document.body.textContent = b;


More understandable js
 document.body.textContent = createPassword(); function createPassword() { var PASSWORD_LENGTH = 16; var random = Math.random; var allowedChars = getAllowedCharsArr(); for (var password = "", i = 0; i < PASSWORD_LENGTH; i++) { var randomIndex = Math.floor(random() * allowedChars.length); password += allowedChars[randomIndex] } return password; } function getAllowedCharsArr() { var FIRST_ALLOWED_ASCII_CHAR_INDEX = 32; var ALLOWED_CHARS_COUNT = 95; for (var allowedChars = [], i = 0; i < ALLOWED_CHARS_COUNT; i++) { var asciiCode = FIRST_ALLOWED_ASCII_CHAR_INDEX + i; var char = String.fromCharCode(asciiCode); allowedChars.push(char) } return allowedChars; }


Error detection


After some use, the bookmarks noticed that sometimes the password is not displayed completely, i.e. first k characters from all pre-defined n. And the characters are not displayed after the "<";

Those. if you run the code in the browser console, or in the script tag html, javascript will work according to the specification.

 document.body.textContent = '<div>text</div>';

inserts the string as plan text:

<div>text</div>


But if the same code is executed in the javascript protocol, the document will contain the html element (as shown at the beginning of the article)

Cause


This behavior is peculiar to the javascript protocol and is not connected to textContent.
Browser running js inserts the result of the last expression into html, i.e.

 javascript:document.body.textContent = '<div>text</div>';

inserts into the body plain text,
the expression returns a string
browser after the execution of the protocol receives a string
which will be interpreted as an html document,
and replaces them with the current page with the text.

You can bypass this feature by inserting void (0) at the end of the script.
or any other expression that does not return the correct value (strings, numbers in some browsers)

Conclusion


For myself, it became more convenient not to paste text into the DOM, but immediately copy the password to the clipboard.

Bookmark
javascript:for(var a=[],i=0;i<95;i++)a.push(String.fromCharCode(32 + i));for(var b="",i=0;i<16;i++)b+=a[Math.floor(Math.random()*95)];var c=document.createElement('input');c.style.opacity=0;document.body.appendChild(c); c.value=b;c.style.position='fixed';c.style.zIndex=1000000;c.focus();c.select(); document.execCommand('Copy');c.remove();


source
 copyToClipBoard(createPassword()); function copyToClipBoard(str) { var input = document.createElement('textarea'); document.body.appendChild(input); input.value = str; input.style.position = 'fixed'; input.style.zIndex = 1000000; input.style.opacity = 0; input.focus(); input.select(); document.execCommand('Copy'); input.remove(); } function createPassword() { var PASSWORD_LENGTH = 16; var random = Math.random; var allowedChars = getAllowedCharsArr(); for (var password = "", i = 0; i < PASSWORD_LENGTH; i++) { var randomIndex = Math.floor(random() * allowedChars.length); password += allowedChars[randomIndex] } return password; } function getAllowedCharsArr() { var FIRST_ALLOWED_ASCII_CHAR_INDEX = 32; var ALLOWED_CHARS_COUNT = 95; for (var allowedChars = [], i = 0; i < ALLOWED_CHARS_COUNT; i++) { var asciiCode = FIRST_ALLOWED_ASCII_CHAR_INDEX + i; var char = String.fromCharCode(asciiCode); allowedChars.push(char) } return allowedChars; }


Instead of loops, you can use Array.map. Someone thinks that it is so elegant, someone notices that it is slower - this is a matter of taste.

Alternative
javascript:var a = Array.apply(null, Array(127)).map(String.fromCharCode, String).slice(32);var b = Array.apply(null, Array(16)).map(() => a[Math.floor(Math.random() * 95)]).join("");var c = document.createElement('input');document.body.appendChild(c);c.value = b;c.style.position = 'fixed';c.style.zIndex = 1000000;c.style.opacity = 0;c.focus();c.select();document.execCommand('Copy');c.remove();


Instead of bookmarks, you can use extenshion: for example, chrome is also a matter of taste.

PS: Update after the comment by mayorovp , for which a special thank you to him, the article has undergone full editing, but the essence and the main material remained the same.

Source: https://habr.com/ru/post/272189/

More articles:


All Articles