我需要阻止浏览器存储用户名和密码,因为我正在开发一个包含更加安全数据的网络应用。我的客户要求我这样做。
我尝试在HTML表单和密码框中使用autocomplete="off"
属性。但是在最新的浏览器(例如Chrome 55、Firefox 38+、Internet Explorer 11等)中,这并不起作用。
有没有更好的解决方案?
我需要阻止浏览器存储用户名和密码,因为我正在开发一个包含更加安全数据的网络应用。我的客户要求我这样做。
我尝试在HTML表单和密码框中使用autocomplete="off"
属性。但是在最新的浏览器(例如Chrome 55、Firefox 38+、Internet Explorer 11等)中,这并不起作用。
有没有更好的解决方案?
感谢您回复我的邮件。我按照下面的链接进行了操作:
我解决了问题,只需在输入框中添加readonly
和 onfocus="this.removeAttribute('readonly');"
属性,同时保留autocomplete="off"
属性,如下所示。
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
这对我来说很好用。
autocomplete="new-password"
的作用与我想要的完全相反。它不会显示“是否要更新已保存密码”的对话框...它只会默默地更新我的存储密码。比无用更糟糕 - 有危险!>:( - Doug McLean这里是一个纯HTML/CSS解决方案,在Chrome中经过65.0.3325.162版本(官方构建)(64位)的测试。
将输入框设置为type="text"
,并使用CSS的text-security:disc
来模拟type="password"
。
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;" autocomplete="off">
moz-text-security
已被弃用/移除。要修复此问题,请创建一个只包含点的CSSfont-face
并使用font-family: 'dotsfont';
。
上述来源包含了关于CSS moz-text-security
和-webkit-text-security
属性的解决方法。
就我所测试的情况来看,这个解决方案适用于Chrome、Firefox版本59.0(64位)、Internet Explorer版本11.0.9600以及IE模拟器Internet Explorer 5及更高版本。 安全编辑2023:我已经给密码输入框添加了属性
autocomplete="off"
。通过设置autocomplete="off"
,您指示浏览器不要为该特定输入字段填充或记住任何值。autocomplete="off"
属性,但出于安全原因,某些浏览器可能会忽略它或提供用户覆盖设置的选项。此外,不同的浏览器可能会对该属性进行不同的解释,因此它并非绝对可靠的解决方案。Web Data
sqlite 数据库中的 autofill
表中找到。 - Chris我通过在密码输入框中添加autocomplete="one-time-code"
解决了此问题。
根据HTML参考文档,autocomplete="one-time-code"
是用于验证用户身份的一次性代码。它似乎是最适合的选择。
new-password
(https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password),但是在火狐浏览器中对我都不起作用。 - Christian Gollhardt你应该能够制作一个假的隐藏密码框来防止它。
<form>
<div style="display:none">
<input type="password" tabindex="-1"/>
</div>
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
</form>
默认情况下,没有任何正确的方法可以禁止在您的浏览器中保存密码。但是,幸运的是,有一个解决方法几乎适用于所有浏览器。
为了实现这一点,在实际输入框之前添加一个虚拟输入框并设置autocomplete="off"以及一些自定义样式来隐藏它并提供tabIndex。
一些浏览器(Chrome)的自动填充功能将填充它发现的第一个密码输入框和其之前的输入框。因此,通过这个技巧,它只会填充一个不重要的不可见输入框。
<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>
在发布此帖子时,之前的回答都不适用于我。
这种方法使用可见密码字段从用户获取密码,并使用隐藏密码字段将密码传递到服务器。在提交表单之前,将清空可见密码字段,但不使用表单submit
事件处理程序(请参见下一段解释)。该方法尽快将可见密码字段值传输到隐藏密码字段(无需额外开销),然后清空可见密码字段。如果用户切换回可见密码字段,则会恢复值。它使用占位符在字段被擦除后显示●●●。
我尝试在表单onsubmit
事件上清除可见密码字段,但浏览器似乎在事件处理程序之前检查值,并提示用户保存密码。实际上,如果取消注释passwordchange
末尾的alert
,浏览器仍将提示保存密码。
function formsubmit(e) {
document.getElementById('form_password').setAttribute('placeholder', 'password');
}
function userinputfocus(e) {
//Just to make the browser mark the username field as required
// like the password field does.
e.target.value = e.target.value;
}
function passwordfocus(e) {
e.target.setAttribute('placeholder', 'password');
e.target.setAttribute('required', 'required');
e.target.value = document.getElementById('password').value;
}
function passwordkeydown(e) {
if (e.key === 'Enter') {
passwordchange(e.target);
}
}
function passwordblur(e) {
passwordchange(e.target);
if (document.getElementById('password').value !== '') {
var placeholder = '';
for (i = 0; i < document.getElementById('password').value.length; i++) {
placeholder = placeholder + '●';
}
document.getElementById('form_password').setAttribute('placeholder', placeholder);
} else {
document.getElementById('form_password').setAttribute('placeholder', 'password');
}
}
function passwordchange(password) {
if (password.getAttribute('placeholder') === 'password') {
if (password.value === '') {
password.setAttribute('required', 'required');
} else {
password.removeAttribute('required');
var placeholder = '';
for (i = 0; i < password.value.length; i++) {
placeholder = placeholder + '●';
}
}
document.getElementById('password').value = password.value;
password.value = '';
//This alert will make the browser prompt for a password save
//alert(e.type);
}
}
#form_password:not([placeholder='password'])::placeholder {
color: red; /*change to black*/
opacity: 1;
}
<form onsubmit="formsubmit(event)" action="/action_page.php">
<input type="hidden" id="password" name="password" />
<input type="text" id="username" name="username" required
autocomplete="off" placeholder="username"
onfocus="userinputfocus(event)" />
<input type="password" id="form_password" name="form_password" required
autocomplete="off" placeholder="password"
onfocus="passwordfocus(event)"
onkeydown="passwordkeydown(event)"
onblur="passwordblur(event)"/>
<br />
<input type="submit"/>
我尝试了许多解决方案,最终采用了这个解决方案。
<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");
}
}
以下是一个纯html/css的解决方案(没有js)
<textarea required="required" autocorrect="off" autocapitalize="off" name="username" class="form-control" placeholder="Your username" rows="1" cols="20" wrap="off"></textarea>
<textarea required="required" autocorrect="off" autocapitalize="off" name="password" class="form-control password" placeholder="Your password" rows="1" cols="20" wrap="off"></textarea>
@font-face {
font-family: 'password';
src: url('css/font/password.woff2') format('woff2'),
url('css/font/password.woff') format('woff'),
url('css/font/password.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
textarea.form-control {
overflow:hidden;
resize:none;
height:34px;
}
textarea.form-control.password:valid {
font-family: 'password';
}
注意事项
最终,这变成了一个令人发指的网络垃圾的hack集合(但它能用)
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) {
e.preventDefault();
e.stopPropagation();
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.focus();
e.target.removeAttribute('readonly');
});
}