From 0503c5ff2e46ea631f328654417b555a9b05b31f Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Thu, 23 Mar 2023 21:42:35 +0800 Subject: [PATCH] perf: disable browser's autocomplete feature for password input field (#3550) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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` 属性即可。 此改动主要是针对非登录表单场景的密码输入框来做优化，在这些场景下，浏览器如果自动填充用户保存的用户名密码，会带来一定的干扰。 image #### 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 禁用非登录场景下，密码输入框的浏览器自动填充 ``` --- console/src/components/login/LoginForm.vue | 1 + console/src/formkit/formkit.config.ts | 3 ++- .../src/formkit/plugins/password-prevent-autocomplete.ts | 9 +++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 console/src/formkit/plugins/password-prevent-autocomplete.ts diff --git a/console/src/components/login/LoginForm.vue b/console/src/components/login/LoginForm.vue index 168f24b73..4e25c18ee 100644 --- a/console/src/components/login/LoginForm.vue +++ b/console/src/components/login/LoginForm.vue @@ -155,6 +155,7 @@ const { data: socialAuthProviders } = useQuery({ :placeholder="$t('core.login.fields.password.placeholder')" type="password" validation="required" + autocomplete="current-password" > diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts index 5b302894b..5e7034f48 100644 --- a/console/src/formkit/formkit.config.ts +++ b/console/src/formkit/formkit.config.ts @@ -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, diff --git a/console/src/formkit/plugins/password-prevent-autocomplete.ts b/console/src/formkit/plugins/password-prevent-autocomplete.ts new file mode 100644 index 000000000..c323b47dd --- /dev/null +++ b/console/src/formkit/plugins/password-prevent-autocomplete.ts @@ -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"; + } +}