如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容,即使开发人员认为信息是敏感的,不应存储。
在两个请求之间设置不同的输入名称将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存)。
要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。
这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的:
<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
<input type="text" name="<?php echo $r; ?>" />
<input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
<input type="submit" name="submit" value="submit" />
</form>
然后,服务器像这样处理后置变量:(Demo)
foreach ($_POST as $key => $val) {
$newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
if ($count) {
$_POST[$val] = $_POST[$newKey];
unset($_POST[$key], $_POST[$newKey]);
}
}
可以照常访问该值
echo $_POST['username'];
而且浏览器将无法从以前的请求或以前的用户那里建议信息。
即使浏览器更新其技术以忽略/尊重自动完成属性,这将继续有效。
其他回答
除了设置autocomplete=off之外,您还可以通过生成页面的代码随机化表单字段名称,或者在名称末尾添加一些特定于会话的字符串。
提交表单后,您可以在服务器端处理表单之前剥离该部分。这将阻止web浏览器查找字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称。
我真不敢相信,这件事被报道了这么久,仍然是一个问题。以前的解决方案对我来说不起作用,因为Safari似乎知道元素何时不显示或不在屏幕上,但下面的解决方案确实对我起作用:
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_safari_username" >
Password <input type="password" name="fake_safari_password">
</div>
您可以在输入控件中使用autocomplete=off来避免自动完成
例如:
<input type=text name="test" autocomplete="off" />
如果上面的代码不起作用,那么也尝试添加这些属性
autocapitalize="off" autocomplete="off"
or
将输入类型属性更改为type=“search”。谷歌不会对搜索类型的输入应用自动填充。
对于React,您可以尝试将此代码放在表单下面或密码输入上面,或者放在电子邮件和密码输入之间
export const HackRemoveBrowsersAutofill = () => (
<>
<input type="email" autoComplete="new-password" style={ { display: 'none' } } />
<input type="password" autoComplete="new-password" style={ { display: 'none' } } />
</>
)
示例之一:
<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>
固定的只需在实际输入字段上方添加
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome(最新版本63)、Firefox Quantum(57.0.4 64-бит)、Firefox(52.2.0)上测试假字段是chrome/opera自动填充错误字段的一种解决方法
const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}
<input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />
<TextField
name='userName'
autoComplete='nope'
...
/>
<TextField
name='password'
autoComplete='new-password'
...
/>