How to mask javascript prompt() input?
Question
I'm using the " Secure Profile " extension for Google Chrome. Although this app lets me secure my browser via a password, the password field text is visible during input. I need to hide or mask the input. How can I do that?
Here's are the details about the extension source code found in the installation directory.
Plugin files placed in: C:\\Users\\USERNAME\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\eddeeogaiodnhfkingpegpmhpdiifbgh\\1.2_0\\includes
directory Structure: \\background.html \\options.html \\images*.png (3 images) \\js\\encryption.js
Here's the HTML for the background.html
<html>
<script src="js\encryption.js"></script>
<script>
// Only called when the first window of this profile is opened
try {
var encPassword = localStorage["password"];
if (encPassword != null && encPassword != "") {
var password = prompt(chrome.i18n.getMessage("bg_EnterPass"));
if (password == null || encPassword != MD5(password)) {
chrome.windows.getCurrent(function (window){chrome.windows.remove(window.id)});
}
} else {
alert(chrome.i18n.getMessage("bg_SetOptions"));
chrome.tabs.create({url: "includes/options.html"});
}
} catch (e) {
alert("Secure Profile Error: " + err.description);
}
</script>
</html>
Here's the HTML Source for the options.html
<html>
<body onload="body_onload();">
<script src="js\encryption.js"></script>
<script type="text/javascript">
var _strSaved;
var _strPwdMatch;
// Saves options to localStorage.
function saveOptions() {
var password = document.getElementById("password").value;
if (document.getElementById("passwordConfirm").value == password) {
if (password == "")
localStorage["password"] = "";
else
localStorage["password"] = MD5(password);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = _strSaved;
status.style.display = "block";
setTimeout(function() {status.style.display = "none";}, 3000);
} else {
alert(_strPwdMatch);
document.getElementById("password").value = "";
document.getElementById("passwordConfirm").value = "";
}
}
function loadStrings() {
_strSaved = chrome.i18n.getMessage("opt_strSaved");
_strPwdMatch = chrome.i18n.getMessage("opt_pwdMatch");
document.title = chrome.i18n.getMessage("opt_title");
document.getElementById("lblSetPwd").innerHTML = chrome.i18n.getMessage("opt_setPwd");
document.getElementById("lblPwd").innerHTML = chrome.i18n.getMessage("opt_lblPwd");
document.getElementById("lblPwdConf").innerHTML = chrome.i18n.getMessage("opt_lblPwdConf");
document.getElementById("btnSave").value = chrome.i18n.getMessage("opt_btnSave");
}
function passwordIsSecure(password) {
if (password && password.length > 4){
if (password.match(/([0-9]|\[|\\|\^|\$|\.|\||\?|\*|\+|\(|\)|\{|\}|!|@|#|%|&|_|=|-|`|~|<|>|\/)/i))
return true;
}
return false;
}
function setSecurePhoto(password) {
if (password == "")
document.getElementById("imgPassSet").src = "images/decrypted.png";
else {
if (passwordIsSecure(password))
document.getElementById("imgPassSet").src = "images/encrypted.png";
else
document.getElementById("imgPassSet").src = "images/halfencrypted.png";
}
}
function body_onload() {
loadStrings();
setSecurePhoto(localStorage["password"]);
}
</script>
<style type="text/css">
#status {
position: absolute;
top: 0px;
left: 0px;
background-color: #C0C0C0;
opacity: 0.9;
display: none;
width: 100%;
height: 100%;
padding-top: 25%;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
}
</style>
<div id="status"></div>
<table id="setPassword">
<tr>
<th colspan="2">
<div id="lblSetPwd"></div>
</th>
<td rowspan="4">
<img id="imgPassSet" src="images/decrypted.png" width="50px" />
</td>
</tr>
<tr>
<td>
<div id="lblPwd"></div>
</td>
<td>
<input type="password" id="password" onchange="setSecurePhoto(this.value);" />
</td>
</tr>
<tr>
<td>
<div id="lblPwdConf"></div>
</td>
<td>
<input type="password" id="passwordConfirm" onfocus="this.value='';" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" onclick="saveOptions()" id="btnSave" />
</td>
</tr>
</table>
</body>
</html>
Here's the javascript from the encryption.js
/**
*
* MD5 (Message-Digest Algorithm)
* http://www.webtoolkit.info/
*
**/
var MD5 = function (string) {
function RotateLeft(lValue, iShiftBits) {
return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
}
function AddUnsigned(lX,lY) {
var lX4,lY4,lX8,lY8,lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}
function F(x,y,z) { return (x & y) | ((~x) & z); }
function G(x,y,z) { return (x & z) | (y & (~z)); }
function H(x,y,z) { return (x ^ y ^ z); }
function I(x,y,z) { return (y ^ (x | (~z))); }
function FF(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function GG(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function HH(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function II(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1=lMessageLength + 8;
var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
var lWordArray=Array(lNumberOfWords-1);
var lBytePosition = 0;
var lByteCount = 0;
while ( lByteCount < lMessageLength ) {
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
lByteCount++;
}
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
lWordArray[lNumberOfWords-2] = lMessageLength<<3;
lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
return lWordArray;
};
function WordToHex(lValue) {
var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
for (lCount = 0;lCount<=3;lCount++) {
lByte = (lValue>>>(lCount*8)) & 255;
WordToHexValue_temp = "0" + lByte.toString(16);
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
}
return WordToHexValue;
};
function Utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
};
var x=Array();
var k,AA,BB,CC,DD,a,b,c,d;
var S11=7, S12=12, S13=17, S14=22;
var S21=5, S22=9 , S23=14, S24=20;
var S31=4, S32=11, S33=16, S34=23;
var S41=6, S42=10, S43=15, S44=21;
string = Utf8Encode(string);
x = ConvertToWordArray(string);
a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
for (k=0;k<x.length;k+=16) {
AA=a; BB=b; CC=c; DD=d;
a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
d=GG(d,a,b,c,x[k+10],S22,0x2441453);
c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
a=II(a,b,c,d,x[k+0], S41,0xF4292244);
d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
c=II(c,d,a,b,x[k+6], S43,0xA3014314);
b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
a=AddUnsigned(a,AA);
b=AddUnsigned(b,BB);
c=AddUnsigned(c,CC);
d=AddUnsigned(d,DD);
}
var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
return temp.toLowerCase();
}
I noticed the password prompt is being fired from this line:
var password = prompt(chrome.i18n.getMessage("bg_EnterPass"));
read about .i18n.getMessage on google developers site, but there was no mention on how to mask this text. That leaves only the prompt() javascript function, and I searched only for a way to mask this prompt, but couldn't find any solution. There are jQuery plugins but I couldn't get the desired output.I tried the Impromptu Plugin , but didn't know how to return value to the var password from the $.prompt(); function via that plugin.
Could someone help me? Or suggest a better alternative to this chrome extension?
2 answers
solution1
1 2014-12-22 08:02:33
You cannot mask the JavaScript prompt() event. It is a built-in feature of many browsers and has few to no options.
If you want a fully customizable prompt, I suggest building your own from HTML and using a password input like Ram suggested. There are many benefits to this including allowing the user to view other tabs while the prompt is open.
solution2
0 2014-12-22 07:38:36
我认为，这是解决您问题的方法输入密码。
<input type='password'/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to input decimal in prompt in JavaScript?
Javascript dynamic input mask
javascript input mask currency
How to force user to input value in javascript prompt?
Javascript - How to add prompt input into array and if it was canceld
How to get user input in JavaScript without prompt
How to change the keyboard of the prompt input in Javascript?
How to store user input using prompt() in JavaScript?
Javascript Prompt() Input validation
JavaScript Prompt() input
Related Tags