Html 如何防止浏览器存储密码
我需要阻止浏览器存储用户名和密码值，因为我正在开发一个包含更安全数据的web应用程序。我的客户让我这么做 我在HTML表单和密码字段中尝试了Html 如何防止浏览器存储密码,html,security,browser,Html,Security,Browser,我需要阻止浏览器存储用户名和密码值，因为我正在开发一个包含更安全数据的web应用程序。我的客户让我这么做 我在HTML表单和密码字段中尝试了autocomplete=“off”属性。但在最新的浏览器中，如Chrome55、Firefox38+、InternetExplorer11等，它不起作用 最好的解决方案是什么？不建议尝试阻止浏览器存储密码。有一些变通方法可以做到这一点，但现代浏览器并没有提供这种开箱即用的功能，这是有充分理由的。现代浏览器将密码存储在密码管理器中，以便用户能够使用比通常更强
autocomplete=“off”最好的解决方案是什么？不建议尝试阻止浏览器存储密码。有一些变通方法可以做到这一点，但现代浏览器并没有提供这种开箱即用的功能，这是有充分理由的。现代浏览器将密码存储在密码管理器中，以便用户能够使用比通常更强大的密码 如下所述： 现代浏览器实现了集成的密码管理：当用户输入站点的用户名和密码时，浏览器会为用户提供记住密码的功能。当用户再次访问站点时，浏览器会自动用存储的值填充登录字段 此外，浏览器允许用户选择主密码，浏览器将使用该主密码加密存储的登录详细信息 即使没有主密码，浏览器中的密码管理通常被视为安全的净收益。由于用户不必记住浏览器为他们存储的密码，因此他们可以选择比其他方式更强大的密码 因此，许多现代浏览器不支持登录字段的
autocomplete=“off”- 如果网站为表单设置了
，并且表单包含用户名和密码输入字段，则浏览器仍将提供记住此登录的功能，如果用户同意，浏览器将在用户下次访问页面时自动填充这些字段autocomplete=“off” - 如果站点为用户名和密码输入字段设置了
，则浏览器仍将提供记住此登录的功能，如果用户同意，浏览器将在用户下次访问页面时自动填充这些字段autocomplete=“off”
autocomplete=“new password”我认为这在最新的浏览器中是不可能的 唯一可以这样做的方法是在提交时从可见密码字段中获取值并在可见密码字段中放入伪字符串后，获取另一个隐藏密码字段并将其用于逻辑
在这种情况下，浏览器可以存储一个伪字符串而不是实际密码。虽然前面的解决方案非常正确，但如果您绝对需要该功能，则可以使用文本字段和JavaScript模拟自定义输入的情况 为了安全使用，您可以使用任何加密技术。因此，通过这种方式，您将绕过浏览器的密码保存行为
如果你想更多地了解这个想法，我们可以在聊天中讨论。但是在前面的回答中已经讨论了要点，你可以得到这个想法。你应该能够制作一个假的隐藏密码框来防止它
尝试以下操作。这可能对你有帮助 有关更多信息，请访问
功能设置自动完成关闭（tm）{
如果（类型tm==“未定义”）{
tm=10；
}
试一试{
变量输入=$（“.auto complete off，input[autocomplete=off]”）；
setTimeout（函数（）{
输入。每个（函数（）{
var old_value=$（this.attr（“value”）；
var thisobj=$（本）；
setTimeout（函数（）{
thisobj.removeClass（“自动完成关闭”）.addClass（“自动完成关闭处理”）；
本目标价值（旧价值）；
}，tm）；
});
}，tm）；
}
捕获（e）{
}
}
$（函数（）{
setAutoCompleteOFF（）；
})一种方法是生成随机输入名称并使用它们 这样，浏览器每次都会显示
新的如果您向我们提供一些示例代码（您是否有JavaScript（SPA）应用程序或服务器端渲染），我将很乐意帮助您实现。您可以做的一件事是要求您的用户禁用为您的站点保存密码。这可以在浏览器范围或原点范围内完成 您可以做的另一件事是在加载页面后（以及浏览器自动完成字段后），强制输入为空。将此脚本放在
userIdInputElement.value = "";
userPasswordInputElement.value = "";
谢谢你给我回复。我点击了下面的链接 我解决了这个问题，只需在如下所示的输入中添加
autocomplete=“off”onfocus=“this.removeAttribute（'readonly'）；”<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
这对我来说很好。几年前，我在一个特定的情况下需要它：两个知道自己网络密码的人同时访问同一台机器以签署法律协议 在这种情况下，您不希望保存任何一个密码，因为保存密码是一个法律问题，而不是一个技术问题，在这种情况下，两个人的物理和时间存在都是强制性的。现在，我同意这是一种罕见的情况，但这种情况确实存在，而且web浏览器中的内置密码管理器是没有帮助的 我对上述wa的技术解决方案
(function($) {
$.fn.StopPasswordManager = function() {
return this.each(function() {
var $this = $(this);
$this.addClass('no-print');
$this.attr('data-background-color', $this.css('background-color'));
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this.attr('autocomplete', 'off');
$this.focus(function() {
$this.attr('type', 'password');
$this.css('background-color', $this.attr('data-background-color'));
});
$this.blur(function() {
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
});
$this.on('keydown', function(e) {
if (e.keyCode == 13)
{
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
}
});
});
}
}(jQuery));
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
<div className="password-input">
<input
type="password"
id="prevent_autofill"
autoComplete="off"
style={{
opacity: '0',
position: 'absolute',
height: '0',
width: '0',
padding: '0',
margin: '0'
}}
tabIndex="-2"
/>
<input
type="password"
autoComplete="off"
className="password-input-box"
placeholder="Password"
onChange={e => this.handleChange(e, 'password')}
/>
</div>
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
<form action='/login' class='login-form' autocomplete='off'>
User:
<input type='user' name='user-entry'>
<input type='hidden' name='user'>
Password:
<input type='password' name='password-entry'>
<input type='hidden' name='password'>
</form>
<form id='frm' action="https://google.com">
Password: <input type="password" id="pwd" />
<input type='hidden' id='hiddenpwd' />
<button onclick='subm()'>Submit this</button>
</form>
<script>
function subm() {
var actualpwd = $('#pwd').val();
$('#hiddenpwd').val(actualpwd);
// ...Do whatever Ajax, etc. with this actual pwd
// ...Or assign the value to another hidden field
$('#pwd').val('globbedygook');
$('#frm').submit();
}
</script>
document.getElementById("password").setAttribute("type", "hidden");
document.getElementById("save").click();
if (!isset($_SESSION['autoMaskPassword'])) {
$bytes = random_bytes(16);
$_SESSION['autoMask_password'] = bin2hex($bytes);
}
<input type="password" name="<?=$_SESSION['autoMaskPassword']?>" placeholder="password">
<input type="text" name="UserName" id="UserName" placeholder="UserName" autocomplete="off" />
<input type="text" name="Password" id="Password" placeholder="Password" autocomplete="off"/>
#Password {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
window.onload = function () {
init();
}
function init() {
var x = document.getElementsByTagName("input")["Password"];
var style = window.getComputedStyle(x);
console.log(style);
if (style.webkitTextSecurity) {
// Do nothing
} else {
x.setAttribute("type", "password");
}
}
yourInputElement.addEventListener('keydown', onInputPassword);
onInputPassword( event ) {
let key = event.key;
event.preventDefault(); // this is to prevent the key to reach the input field
if( key == "Enter" ) {
// here you put a call to the function that will do something with the password
}
else if( key == "Backspace" ) {
if( password ) {
// remove the last character if any
yourInputElement.value = yourInputElement.value.slice(0, -1);
password = password.slice(0, -1);
}
}
else if( (key >= '0' && key <= '9') || (key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z') ) {
// show a fake '*' on input field and store the real password
yourInputElement.value = yourInputElement.value + "*";
password += key;
}
}
<TextField
type="text" // this is a hack so Chrome does not offer saved credentials; should be "password" otherwise
name="pincode"
placeholder="pin"
value={values[PIN_FIELD]}
onChange={handleChange}
onBlur={handleBlur}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<RemoveRedEye
color="action"
onClick={togglePasswordMask}
/>
</InputAdornment>
),
inputProps: {
inputMode: 'numeric', // for number keyboard
style: {
textSecurity: `${passwordIsMasked ? 'disc' : ''} `, // part of hack described above. this disc mimics the password *** appearance
WebkitTextSecurity: `${passwordIsMasked ? 'disc' : ''} `, // same hack
},
},
}}
/>
const [passwordIsMasked, setPasswordIsMasked] = useState(true)
const togglePasswordMask = () => {
setPasswordIsMasked((value) => !value)