mirror of https://github.com/halo-dev/halo
perf: disable browser's autocomplete feature for password input field (#3550)
#### What type of PR is this? /kind improvement /area console #### What this PR does / why we need it: 默认禁用 password 输入框的浏览器自动填充,实现方式为默认给 type 为 password 的 input 添加 `autocomplete="new-passwrod"` 属性。如果需要自动填充,手动为组件添加 `autocomplete` 属性即可。 此改动主要是针对非登录表单场景的密码输入框来做优化,在这些场景下,浏览器如果自动填充用户保存的用户名密码,会带来一定的干扰。 <img width="1103" alt="image" src="https://user-images.githubusercontent.com/21301288/226558568-bf617be7-0cd8-44db-a123-f230a2b88181.png"> #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/3502 #### Special notes for your reviewer: 1. 登录 Console,并将用户名和密码保存在浏览器的密码管理器。 2. 然后进入任意使用了密码输入框的页面,检查是否自动填充了密码。推荐使用 https://github.com/halo-sigs/plugin-s3 测试。 #### Does this PR introduce a user-facing change? ```release-note 禁用非登录场景下,密码输入框的浏览器自动填充 ```pull/3563/head^2
parent
b63d2b882c
commit
0503c5ff2e
|
@ -155,6 +155,7 @@ const { data: socialAuthProviders } = useQuery<SocialAuthProvider[]>({
|
|||
:placeholder="$t('core.login.fields.password.placeholder')"
|
||||
type="password"
|
||||
validation="required"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
</FormKit>
|
||||
</FormKit>
|
||||
|
|
|
@ -18,12 +18,13 @@ import { tagCheckbox } from "./inputs/tag-checkbox";
|
|||
|
||||
import radioAlt from "./plugins/radio-alt";
|
||||
import stopImplicitSubmission from "./plugins/stop-implicit-submission";
|
||||
import passwordPreventAutocomplete from "./plugins/password-prevent-autocomplete";
|
||||
|
||||
const config: DefaultConfigOptions = {
|
||||
config: {
|
||||
classes: generateClasses(theme),
|
||||
},
|
||||
plugins: [radioAlt, stopImplicitSubmission],
|
||||
plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
|
||||
inputs: {
|
||||
form,
|
||||
attachment,
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import type { FormKitNode } from "@formkit/core";
|
||||
|
||||
export default function passwordPreventAutocomplete(node: FormKitNode) {
|
||||
if (node.props.type === "password" && !node.props.attrs?.autocomplete) {
|
||||
if (!node.props.attrs) node.props.attrs = {};
|
||||
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password
|
||||
node.props.attrs.autocomplete = "new-password";
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue