禁用用户名和密碼上的 Safari 自動填充

問題描述

您可能已經知道，無論您是否設置了 autocomplete="off"，Safari 都有一個令人討厭的自動填充錯誤，其中填寫電子郵件，用户名和密碼字段。

這是一個基本的形式：

<form action="/" method="post">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" />
    </p>
</form>

… Safari 自動填寫這些字段在頁面加載，應該，工作做得好！

如果將 autocomplete="off"放到字段和/或表單元素中，Safari 仍會自動填充這些字段：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" autocomplete="off" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" autocomplete="off" />
    </p>
</form>

即使這樣也不行：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="secretfield1" value="" autocomplete="off"/>
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="secretfield2" value="" autocomplete="off" />
    </p>
</form>

… 如果 Safari 包含字母”E-mail”，”Password” 等，並瀏覽自動填充，Safari 就會查找這些<label> 元素。

Aaaahhhhha！我想，試過：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>%REPLACE_EMAIL_TITLE%</label>
        <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/>
    </p>
    <p>
        <label>%REPLACE_PASSWORD_TITLE%</label>
        <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" />
    </p>
</form>

… 並使用 JavaScript 將真實姓名替換為％TAGS％。 Safari 自動填充踢入。無論您是否在更換時設置了 10 秒超時。

那真的是唯一的選擇嗎？

<form action="/" method="post" autocomplete="off">
    <p>
        <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label>
        <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/>
    </p>
    <p>
        <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label>
        <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" />
    </p>
</form>

我希望不是？

更新：@skithund pointed out in Twitter，該 Safari is getting a 4.0.3 update，其中提及”Login AutoFill” 。有人知道這個更新是否會解決這個問題？

最佳解決思路

我有同樣的問題。雖然我的解決方案並不完美，但似乎還是有效的。基本上，Safari 似乎通過密碼和用户名查找輸入字段，並始終嘗試填寫。所以，我的解決方案是在 Safari 可以填寫的當前版本之前添加一個假的用户名和密碼字段。我試過使用 style="display: none;"，但沒有工作。所以，最終我剛剛使用了 style="position:absolute; top:-50px;"，並將輸入欄隱藏起來，似乎工作正常。我不想使用 JavaScript，但我猜你可以用 JavaScript 隱藏它。

現在 Safari 不會自動完成我的用户名和密碼字段。

次佳解決思路

瀏覽器忽略 autocomplete=off 的原因是因為有一些 web-sites 嘗試禁用 auto-completing 的密碼。

那是錯的。

而 2014 年 7 月，Firefox 是最終實現更改的最後一個主要瀏覽器，忽略任何嘗試關閉自動完成密碼的 web-site 。

June 2009: IEInternals blog where they discuss keeping the user in control(archive)
2014 年 2 月：Chrome 公佈，當他們開始忽略 autocomplete=off(archive)
January 2014: Bugzilla Bug 956906 – ignore autocomplete=”off” when offering to save passwords via the password manager(archive)
Reddit discussion(archive)

One of the top user-complaints about our HTML Forms AutoComplete feature is 「It doesn』t work– I don』t see any of my previously entered text.」 When debugging such cases, we usually find that the site has explicitly disabled the feature using the provided attribute, but of course, users have no idea that the site has done so and simply assume that IE is buggy. In my experience, when features are hidden or replaced, users will usually blame the browser, not the website.

任何 web-site 企圖規避瀏覽器的偏好都是錯誤的，所以瀏覽器忽略它。沒有理由知道為什麼 web-site 應該嘗試禁用保存密碼。

Chrome 會忽略它
Safari 忽略它
IE 忽略它
Firefox 忽略它

At this point, web developers typically protest 「But I wouldn』t do this everywhere– only in a few little bits where it makes sense!」 Even if that』s true, unfortunately, this is yet another case where there』s really no way for the browser to tell the difference. Remember, popup windows were once a happy, useful part of the web browsing experience, until their abuse by advertisers made them the bane of users everywhere. Inevitably, all browsers began blocking popups, breaking even the 「good」 sites that used popups with good taste and discretion.

如果我是一個特殊的 snowflake 怎麼辦？

有人提出了一個好的 use-case：

I have a shared, public area, kiosk style computer. We don’t want someone to (accidentally or intentionally) save their password so the next user could use it.

這不違反聲明：

Any attempt by any web-site to circumvent the browser’s preference is wrong

這是因為在共享信息亭的情況下：

它不是具有奇怪的策略的 web-server
它是具有奇怪的策略的客户端 user-agent

瀏覽器 (共享計算機) 是要求不嘗試保存密碼的瀏覽器。

防止瀏覽器保存密碼的正確方法是將瀏覽器配置為不保存密碼。

由於您已鎖定並控制此信息亭計算機：您可以控制設置。這包括保存密碼的選項。

在 Chrome 和 Internet Explorer 中，您可以使用組策略 (例如註冊表項) 配置這些選項。

從 Chrome Policy List：

AutoFillEnabled

Enable AutoFill

Data type: Boolean (REG_DWORD)

Windows registry location: SoftwarePoliciesChromiumAutoFillEnabled

Description: Enables Chromium’s AutoFill feature and allows users to auto complete web forms using previously stored information such as address or credit card information. If you disable this setting, AutoFill will be inaccessible to users. If you enable this setting or do not set a value, AutoFill will remain under the control of the user. This will allow them to configure AutoFill profiles and to switch AutoFill on or off at their own discretion.

請將這個詞傳遞給企業管理員，試圖禁用自動完成密碼是錯誤的。這是錯誤的瀏覽器是故意忽視任何人誰試圖做到這一點。那些人應該停止做錯事

第三種解決思路

修復：瀏覽器自動填入 readonly-mode 並設置可寫入焦點

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

(焦點=鼠標點擊並選擇字段)

更新：Mobile Safari 將遊標設置在該字段中，但不顯示虛擬鍵盤。新修復工作像以前一樣，但處理虛擬鍵盤：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

現場演示 https://jsfiddle.net/danielsuess/n0scguv6/

//UpdateEnd

説明：瀏覽器自動將憑據填充到錯誤的文本字段中？

好的，你剛剛注意到：

Safari autofill kicks in. No matter [what the fields are named] @Jari

並有一個假設：

Safari seems to look for an input field with password and username and always tries to fill it @user3172174

有時我注意到這個奇怪的行為在 Chrome 和 Safari 上，當密碼字段是相同的形式。我想，瀏覽器會查找一個密碼字段來插入您保存的憑據。然後將用户名自動填寫到最接近的 textlike-input 字段中，該字段出現在 DOM 中的密碼字段之前 (僅由於觀察而猜測) 。由於瀏覽器是最後一個實例，您無法控制它，

有時甚至 autocomplete = off 不會阻止將憑據填入錯誤的字段，而不是用户或暱稱字段。

以上這個 readonly-fix 為我工作。

第四種思路

在瀏覽 Apple’s Safari HTML pages 並且沒有找到任何自動完成後，我做了一些搜索和思考。

蘋果討論閲讀 a (mildly) related question 後，我記得默認是不允許記住的密碼，等 (可以在 i 設備的系統設置中啓用，或在提示) 。由於蘋果公司已經搬到這個功能了瀏覽器，進入他們的 (專有的，我)OS(screen shots on this article)，我相信他們完全忽略了 HTML 表單/字段屬性。

除非他們改變他們對這個功能的心態，因為我確信這是他們的預期行為，在他們鎖定的設備上，我會在假設這不會消失的情況下工作。這可能與原生 iOS 應用不同。保留表單 autocomplete = “off” 和 hopefully they’ll one day get back to the HTML5 standard 的功能。

我知道這不包括任何工作，但是我認為如果您將其作為 iDevices 上的 non-browser ‘feature’ 來説，這是有道理的 (以蘋果的方式) 。

第五種思路

這個問題已經成功回答了，但截止到今天為止，解決方案對我來説沒有什麼奇怪的變化 – 所以我在這裏注意到了我自己的參考，如果我決定回來和其他人一樣。

假輸入需要在 dom 中的真實電子郵件輸入之後。
假輸入需要一個假標籤。
假標籤不能絕對定位。
無法使用顯示，可見度或不透明度隱藏假元素。

我發現唯一的解決方案是使用 overflow: hidden 來剪切偽元素的可見性。

<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="user@email.com" name="user[email]" id="user_email">
<!-- Safari looks for email inputs and overwrites the existing value with the user's personal email. This hack catches the autofill in a hidden input. -->
<label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label>
<input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">

為了記錄，這個黑客來的有用的特定情況是管理員正在編輯其他用户的配置文件，而 Safari 正在用管理員的電子郵件替換用户的電子郵件。我們已經決定，對於 Safari ‘feature’ 創建的小型 (但令人沮喪的) 支持請求，不必保持一個似乎需要隨着 Safari 收緊而變化的黑客，而是為這些用户提供如何支持關閉自動填充。

第六種思路

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

參考文獻

Disabling Safari autofill on usernames and passwords

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

禁用用户名和密碼上的 Safari 自動填充