問題描述

您可能已經知道，無論您是否設定了 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 。

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;
}

參考文獻

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