非表示のパスワードを表示する方法(Webブラウザ)


ブラウザに記憶させたID・パスワードを忘れて困った経験は無いでしょうか。

 

ID・パスワードはブラウザに覚えさせており、あるサイトがリニューアルされパスワードが消えてしまっていた。もう数年前なのでパスワードが思い出せない、、、

ただ、ある別のサイトのパスワードと同じであることは覚えていたので、アクセスしたがパスワード部分が黒丸(●●●)やアスタリスク(***)になっていてわからない。。。

 

具体的には、以下の画面で「パスワードが見えればなぁ」という状況ですね。

パスワードが非表示になっている画面 Google Chrome

 

僕は職業柄、競合調査をよく行うため多くのサイトにて会員登録を行っています。

セキュリティを考慮して、テスト用のID・パスワードの組み合わせを幾つか持っています。

 

ただ、その場限りのアカウントの場合は「一回だけだから適当でいいや」というように覚える気すらない状態で登録することもあります。

 

ところが、そういうサイトに限って後でもう一回見たくなり、その都度アカウントの新規登録を行っていました。

 

さすがに学習しろよってことで、今回、非表示のパスワードを表示する方法をマスターしました!

 

ということで、本日は「非表示のパスワードを表示する方法」を紹介します。

 

前提

本日紹介する方法は、「ブラウザに保存されていて、且つ、HTMLのフォームタグのinput要素がpasswordであること」が条件となります。

アプリやFlashなど特殊なフォームでは利用できません。

 

また、input要素がautocomplete=”off“となっていて、そもそもID・パスワードを保存できないようになっているものも不可能です。(銀行のオンラインバンキングのログインフォームなどはオートコンプリートをOFFにしていますね)

 

非表示のパスワードを表示する方法

僕はGoogle Chromeを利用している関係上、まずGoogle Chromeの画面で紹介します。

他ブラウザご利用の方は、以下のリンクから遷移してください。

 

では早速見ていきましょう。

ここでは僕のECのテストサイト「https://lolipop-dp25166794.ssl-lolipop.jp/ec/?page_id=5」を使っています。

 

サイトにアクセスし、パスワードの部分で右クリック後「検証」をクリックします。

パスワードが非表示になっている画面 右クリックで検証 Google Chrome

 

開発者向けツール(デベロッパーツール)が表示されるので、

の部分を

に編集します。

パスワードが非表示になっている画面 デペロッパーモード Google Chrome  パスワードが非表示になっている画面 デペロッパーモードでpasswordをtextに打ち替える Google Chrome  パスワードが非表示になっている画面 デペロッパーモードでpasswordをtextに打ち替えた後 Google Chrome

 

input type=”text”に編集後、フォーカスを外すと画面にパスワードが表示されます。

非表示になっていたパスワードが表示された画面 Google Chrome

 

なお、画面に表示されているID・パスワードの会員はすでに削除しているのでログインはできません。

あしからず。

 

その他のブラウザ

先程はGoogle Chromeの画面で紹介しましたが、他のブラウザを利用している方のために、他主要ブラウザの方法も紹介します。

 

Safari

サイトにアクセスし、パスワードの部分で右クリック後「要素の詳細を表示」をクリックします。

(「要素の詳細を表示」が表示されない方はコチラ

パスワードが非表示になっている画面 右クリックで検証 Safari

 

開発者向けツール(デベロッパーツール)が表示されるので、

の部分を

に編集します。

パスワードが非表示になっている画面 デペロッパーモードでpasswordをtextに打ち替える Safari

 

input type=”text”に編集後、フォーカスを外すと画面にパスワードが表示されます。

非表示になっていたパスワードが表示された画面 Safari

 

Safariの開発者向けツールの表示方法

以下の画面キャプチャのように、ブラウザで右クリック後「要素の詳細を表示」が表示されない場合は、開発者向けツールの表示がオフになっているので、オンにしてあげる必要があります。

Safariで開発者向けツールの表示方法1

以下、オンにする方法を紹介します。

 

左上のメニュー「Safari」から「環境設定」をクリックします。

Safariで開発者向けツールの表示方法 Safariのメニューから環境設定

 

「詳細」タブの一番下にある「メニューバーに” 開発”メニューを表示」にチェックを入れます。

Safariで開発者向けツールの表示方法 環境設定で開発メニュー表示

 

すると、ブラウザで右クリックした際に「要素の詳細を表示」が表示されます。

Safariで開発者向けツールの表示完了

 

Internet Explorer

我が家のWindowsは、OSがWindows 10なのでEdgeの画面で紹介していきます。

 

サイトにアクセスし、パスワードの部分で右クリック後「要素の検査」をクリックします。

パスワードが非表示になっている画面 右クリックで検証 internet explorer

 

開発者向けツール(デベロッパーツール)が表示されるので、

の部分を

に編集します。

パスワードが非表示になっている画面 デペロッパーモードでpasswordをtextに打ち替える internet explorer

 

input type=”text”に編集後、フォーカスを外すと画面にパスワードが表示されます。

非表示になっていたパスワードが表示された画面 internet explorer

 

FireFox

サイトにアクセスし、パスワードの部分で右クリック後「要素を調査」をクリックします。

パスワードが非表示になっている画面 右クリックで検証 FireFox

 

開発者向けツール(デベロッパーツール)が表示されるので、

の部分を

に編集します。

パスワードが非表示になっている画面 デペロッパーモードでpasswordをtextに打ち替える FireFox

 

input type=”text”に編集後、フォーカスを外すと画面にパスワードが表示されます。

非表示になっていたパスワードが表示された画面 FireFox

 

最後に

今回紹介した方法以外に、各ブラウザで保存しているすべてのID・パスワードが一覧で確認する方法があります。

(例えば、Google Chromeでは「passwords.google.com」にアクセスすれば一覧が表示されます)

 

どちらの方法も対して難しいことはないので、覚えてしまえば誰でもできます。

 

そのため、自分がちょっと離席した隙に、悪意ある第三者にパスワードを見られる可能性は大いにあります。

 

インターネット喫茶などは、離席した隙に置き引きにあったりすることがよくあるそうなので、「ECサイトなどを利用し、ブラウザに入力したパスワードを取得される」なんてことも起きているかもしれません)

 

このオートコンプリート機能(自動保存機能)はとても便利ですが、その分リスクも高いです。

 

盗まれてからでは遅いので、定期的にパスワードをクリアするなど管理の徹底をしましょう。

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...