Javascript 防止用户通过Firebug/Chrome开发工具查找密码
对于passport输入字段：Javascript 防止用户通过Firebug/Chrome开发工具查找密码,javascript,security,dom,browser,client,Javascript,Security,Dom,Browser,Client,对于passport输入字段： <input type="text" required="" tabindex="2" class="std_textbox" placeholder="Enter your account password." id="pass" name="pass"> 当更改为时，将显示密码。在保存了密码或由密码管理器生成的系统中，这可能存在风险 这里可以使用客户端加密吗？如何实施它？简短回答：不幸的是，它无法预防。这是因为所有客户端代码（JavaScr
<input type="text" required="" tabindex="2" class="std_textbox" placeholder="Enter your account password." id="pass" name="pass">
这里可以使用客户端加密吗？如何实施它？简短回答：不幸的是，它无法预防。这是因为所有客户端代码（JavaScript）都可以由客户端自己修改，从而使基于客户端的安全系统易受攻击 我能想到的唯一可行的解决方案是存储密码的哈希表示，而不是原始密码。这将（如果忽略哈希暴力攻击）保证原始密码的安全 哈希是原始文本的表示形式，是不可逆的。也就是说，任何算法都无法检索原始字符串，只能使用哈希。“哈希”的示例是MD5和SHA。这种技术通常用于路由器，其中密码通常存储在浏览器中
澄清：永远不要以纯文本形式存储密码，如果您想采用这种预输入密码的技术；散列和/或加密必须发生在服务器端。因为它是客户端，所以没有真正的方法来防止这种情况。就安全模型而言：我们不能信任客户机。然而，另一方面，如果不使用第三方设备，就没有真正的方法以不同的方式实现这一点 如果您愿意麻烦让第三方设备协助进行身份验证：让网站生成并显示随机种子，让设备请求种子和密码以生成哈希，并使用哈希在网站上进行身份验证。当然，如果使用web调试器，哈希仍然可见，但至少存储/读取它没有意义，因为每个会话的哈希都不同。顺便说一句，这也不是完全安全的，因为这种方法容易受到选择明文攻击
如果你愿意经历这些麻烦，那就太好了。我想你可以为此编写一个应用程序，将智能手机功能作为第三方设备。我在不同的答案中看到了解决方案。在所有这些情况下，只是很难看到密码，但这并不妨碍别人看到密码 注意：在客户端，可以操作和检查JavaScript对象。在其他答案中提供的解决方案中，我可以轻松地 访问密码信息
正如其他人所说，您不能阻止用户查看 在客户端使用开发人员工具输入密码 我想不出一个用例，但您提到了自动表单填充器和记住我选项 自动表单填充，据我所知是主密码保护。应该是,；如果我不能安全地打开或关闭它，我就不会使用它。在这种情况下，我有责任在共享计算机的情况下注销 “记住我”选项通常由网站推广，仅当它是您的个人计算机并且您不希望与其他人共享您的设备时才应使用。不要使用它或确保没有其他人使用您的帐户。同样，这是你的责任 现在，您仍然需要防止此类攻击。我能想到的只有以下几点：
如果你能用，就去做。它不能完全解决问题，但可以预期它会提高安全性。尤其是对攻击者来说，这更难。注意：我认为您应该避免这样做，因为这会破坏基本的浏览器功能 但是如果你坚持，你可以通过将键入内容“委托”到另一个输入字段，并用随机字符填充密码字段，使某人更难透露密码 下面是一个这样做的示例。请记住，它绝不会阻止某人直接从请求主体检索密码，或者如果他们发现了您的“隐藏”委托元素
!function() {
var passwordEl, delegateEl;
function syncPassword() {
passwordEl.value =
Array(delegateEl.value.length + 1).join('*');
}
function createDelegate() {
delegateEl = document.createElement('input');
delegateEl.style.position = 'absolute';
delegateEl.style.top = '-9999px';
delegateEl
.addEventListener('keyup', syncPassword, false);
document.body.appendChild(delegateEl);
}
window.addEventListener('load', function() {
passwordEl = document.getElementById('passwordId');
createDelegate();
// steal the focus from the password input
passwordEl.addEventListener('focus', function(e) {
e.preventDefault();
delegateEl.focus();
}, false);
syncPassword(); // clear if was auto completed
}, false);
}();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
password = '';
function setPasswordBack(){
showPassword();
}
function hidePassword(){
p = document.getElementById('pass');
password = p.value;
p.value = '*********';
}
function showPassword(){
p = document.getElementById('pass');
p.type= "password";
p.value = password;
}
</script>
</head>
<body>
<form action="" method="get" onsubmit="setPasswordBack()">
<input type="password" value="" name="password" id="pass" onblur="hidePassword()" onfocus="showPassword()" />
<input type="submit" />
</form>
</body>
</html>
<div class="pwField">
<div class="pwData"></div>
<div class="cursor"><div class="tfarea"></div></div>
</div>
var pw = "", bHasFocus = false, tfArea;
setInterval( function() {
$(".cursor").toggleClass("blink");
},600);
$(".pwField").on("click", function() {
// enable cursor and create element if needed
$(".pwField").addClass("active");
if(tfArea) { // if already created, just focus to the field
tfArea.focus();
bHasFocus = true;
return;
}
tfArea = document.createElement("textarea");
tfArea.value="";
$(".tfarea").append(tfArea);
tfArea.focus();
bHasFocus = true;
$(tfArea).on("blur", function() {
// disable cursor and exit
$(".pwField").removeClass("active");
bHasFocus = false;
});
});
$(document).keydown(function( ) {
if(!bHasFocus) return;
pw = tfArea.value;
// print asterisks
$(".pwData").html( asterisks( pw.length ) );
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>Basic security for mr. Hacker</title>
</head>
<body>
<div id="ticketAF0122"></div><!-- it is assumed that id is generated every time !!! -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
function readonly(){
$('div#ticketAF0122').html('My password<form method="post" action=""><input type="password" name="password"><input type="submit"></form>');
}
readonly()
$('div#ticketAF0122').bind("DOMSubtreeModified", function(){
readonly();
});
});
/*
Basicly you can load this part from an encoding external php file:
<script src="page.php?ticket=ticketAF0122">< /script>
and the php file generate something like:
$(document).ready(function(){
function readonly(){
$('div#ticketAF0122').html('My password<form method="post" action=""><input type="password" name="password"><input type="submit"></form>');
}
readonly()
$('div#ticketAF0122').bind("DOMSubtreeModified", function(){
readonly();
});
});
*/
</script>
</body>
</html>