🌐

Safariでautocomplete="off"する方法

2022/07/04に公開

趣味でファンサイト作ってる時に、Safariだけautocompleteをoffにしても効かないことに気がつきました
その時の解決方法をメモします

<input
  type="password"
  autocomplete="off"
  style="width:120px; height:20px;"
>

解決方法

下記のCSS適用させると、autocompleteが非表示になります

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

https://www.web-dev-qa-db-ja.com/ja/html/ユーザー名とパスワードでsafariの自動入力を無効にする/1044741973/

Safariのautocomplete="off"が効かない理由

MDNによると、セキュリティ的にブラウザにパスワード保存させたいから、無視するブラウザがあるとのこと
理由はわかりますけど、何のためのautocomplete属性なんだとツッコミを入れたくなります
今のところ無視する挙動はSafariだけでした(流石、次期IEと呼ばれるだけのことはある)
SafariはEdgeを見習って、Chromium化するなりもっと仕様の歩調を合わせてほしいです

マスターパスワードが用いられない場合でも、ブラウザーのパスワード管理機能は純粋にセキュリティの向上に> つながります。パスワードをブラウザーが保存すればユーザーは覚えなくてもよいため、覚えなければならない> 場合よりも強固なパスワードをユーザーが設定できるようになります。
このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。

https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Discussion