gologiusの巣

プログラミングなどの技術メモです。誰かの役に立てるとうれしいです。

Chrome,Edgeなどでの個人情報自動補完(オートフィル、オートコンプリート)をWEBページ側で頑張って制御する

IEが6月で使えなくなることで、Edgeの利用率が上がってくるはずである。

今回Edgeで業務し始めたことで問題が表面化した機能があるので、全国の情シス担当のためにメモっておく。

やりたいこと

個人情報の自動補完(オートフィル)を無効化したい。

※補完にも2パターンあるらしく、下記のように単純に入力候補が出るものと、 上記のように個人情報を補完する2パターンあるらしい。

autocomplete="off"でいいじゃないか、と思った人は最後まで読んでほしい。

これで止められるのは「単純に入力候補が出るもの」だけである。

背景(なぜ問題なのか)

いわゆるECサイトなどは個人のお客様が使う仕組みなので、この機能があった方がむしろ便利なのだが、

業務システムの場合、

  • お客様の情報 (例:配送先
  • 自分や第三者の情報 (例:配送元

を同じ画面で入力する場合がある。

配送は大体同じ情報を毎回入力すると思うが、

その配送欄の候補表示を選択してしまうと、

「以前入力した配送の情報」が入力されてしまう可能性がある。

例:

事象を確認する

実験サイトを用意した。EgdeとChromeで挙動確認した。

サイト内の(1)で問題になっている挙動を確認できる。 オートフィルの挙動は先ほどGIFを貼っているので割愛する。

https://gologius.github.io/test/test_brouser_suggest/login1.html

テストするには個人情報をブラウザに登録しておかないといけないので、 予め登録しておいてほしい。

autocomplete="off" 使えば?

先行して記載しているが、個人情報のオートフィルは止められない(クソかな?)

下記で確認可能

https://gologius.github.io/test/test_brouser_suggest/login1a.html

実験して分かったこと

ポイントになるのが、Chrome、Edgeの場合は 「フォームのデフォルト値でない値が入力されていた場合は、オートフィルで上書きされない」 ようである。

要するに、「自分でなにか入力してたら、オートフィルの対象にならない」模様。

逆に言うと触らないとオートフィルの対象になるので、

WEBページ側で過去の値をセットするような機能がある場合、

オートフィルで上書きされてしまう。

挙動は実験サイトの(2)で確認できる。

https://gologius.github.io/test/test_brouser_suggest/login2.html

対応方法

下記の記事通り、autocomplete="" に毎回ランダムな値を入れてやれば解決する模様。

(2017年の記事なので探すのに苦労した)

autocomplete="off" があっても無視される場合がある (#3143032) | Webブラウザの自動入力機能を悪用して意図しない個人情報を送信させるデモ | スラド

この記事を元に対策を適用してみた。

下記URLから表示が出ないことが確認できる。

https://gologius.github.io/test/test_brouser_suggest/login3.html

なお、ランダム文字列は重複の危険性もあるので、 現在日時(yyyymmddhhmmss)値をセットするjavascriptを利用した。 コードは下記。

gologius.github.io/test.js at master · gologius/gologius.github.io · GitHub

感想

これはブラウザの挙動がよくないと思いました。

せめてautocomplete="off" を適用するようにしてほしい・・・

こうやって情シス担当の仕事がまた一つ増えるのであった・・・

おしまい。