.png){kind=small}
新卒をAmazonログインに模したページを作って騙してみた
- 賢二朗 岡田
- 4月25日
- 読了時間: 10分
この記事であなたがやるべきこと
「フィッシングの仕組みとリスク」 を理解する
「フィッシングサイトの見分け方」を意識するようになる
「法的・倫理的な注意点」を理解する
はじめに
Amazonや楽天、Googleなど、日常的にログインして使っているWebサービスは数多くあります。特にAmazonのようなショッピングサイトは、使っている時間も長く、慣れているがゆえに、ログイン画面を見ても違和感に気づきにくいものです。今回はそんな慣れを逆手に取って、Amazonのログイン画面にそっくりな偽ページを社内で作成し、新卒に誕生日でAmazonギフト券あげるよと見せてみたらどうなるかを実験してみました。
目的はもちろん、フィッシング詐欺への注意喚起です。普段「自分は大丈夫」と思っていても、どんなところに落とし穴があるのか、そして偽のページはどれくらい簡単に作れるのか。 今回の検証を通して、読者のみなさんもぜひ一度、「自分がログインするとき、どれだけちゃんと見ているか」を振り返ってみてください。
Amazonの偽ログイン画面を作成してみた
※本記事の内容は、情報セキュリティ教育を目的とした社内実験の記録です。
実際に悪用した場合、法的に罰せられる可能性があるため、絶対に真似しないでください。
1.Amazonのログイン画面を開いてHTMLを取得する
まずはじめに、偽のAmazonのログイン画面を作成するために、本物のAmazonログイン画面にアクセスしHTML構造を調査します。
ファイル→ページを別名で保存を押します。
以下のような画面が表示されると思うので形式をウェブページ、HTMLのみにして保存します。
取得できたHTMLファイルをブラウザで開くと本物と全く同じのAmazonログイン画面が表示されるのがわかると思います。
2.ログイン画面同様パスワード入力画面も開いてHTMLを取得する
次に、Amazonのログインにおけるパスワード入力画面のHTMLも取得します。 先ほど保存したHTMLファイルと同じように、Amazonログイン画面にアクセスし、実在するメールアドレス（自分のものでOK）を入力して「次へ」を押すと、パスワードの入力ページが表示されます。
パスワード入力画面が表示されたら、先ほどと同じように 「ファイル → ページを別名で保存」をクリックし、形式を「ウェブページ、HTMLのみに」して保存します。
3.ログイン画面とパスワード画面を連携して、より本物らしく見せる
ここまでのステップで、Amazonの「メールアドレス入力ページ」と「パスワード入力ページ」のHTMLをそれぞれ保存できました。次は、この2つのページを連携させて、本物のログインの流れに見せかける仕組みを作っていきます。
具体的には、メールアドレスを入力して「次に進む」ボタンを押すと、パスワード入力画面に遷移するという動きを作ります。
実装方法
まず、最初に保存したメールアドレス入力画面（例：login.html）のHTMLファイルを開きます。
<form> タグを探し、その中にある action 属性を、保存済みのパスワードページ（例：password.html）に書き換えます。
書き換えたHTMLを保存し、ブラウザで開いてメールアドレスを入力 → 「次に進む」を押すと、パスワード入力画面（password.html）に遷移するようになります。
4. ローカルストレージを使って入力内容を引き継ぐ
前のステップで、ログイン画面からパスワード入力画面への遷移ができるようになりました。ただ、実際のAmazonログイン画面では、次のページに進んだときに、先ほど入力したメールアドレスが表示されていますよね。
この「自然な流れ」を再現することで、ページに対する違和感がさらに減り、より本物らしく見せかけることができます。今回は、その仕組みを実験的に再現してみました。
そもそもローカルストレージとは？
ローカルストレージとは、ブラウザの中に一時的なデータを保存しておける仕組みのことです。ログイン画面で入力された情報を保存しておいて、次の画面でそれを取得して表示する、といったことが可能になります。
実装方法
ログイン画面で、フォームの送信時にローカルストレージに入力値を保存する。
パスワード入力画面で、その保存された情報を読み取り、HTML上の該当部分に表示する
これだけで、「前に自分が入力した内容が表示されている」という状態を、簡単に再現できてしまいます。
Web上に公開して挙動を確認してみる（社内実験用）
ここまでで、偽のログイン画面が見た目も動きも本物そっくりに作れてしまうということが分かりました。ではこのHTMLファイルを、実際にインターネット上でアクセスできるようにしたらどうなるでしょうか？
今回はあくまで社内教育目的として、自作のHTMLを無料のホスティングサービス（infinity Free）を利用してHTMLファイルをアップロードすることで今回は簡単にWebページを公開してみました。
実装方法
InfinityFree にアカウントを作成
ファイルマネージャーを開き、作成済みの login.html や password.html をアップロード
公開URLが発行されるので、それをブラウザで開いて確認
実際にアクセスしてみると、ブラウザによっては「このサイトは安全ではありません」などのセキュリティ警告が表示されると思います。これは、SSL証明書がなかったり、信頼されていないドメインであるために起こるものです。
詳細を押して、この安全でないサイトをクリックすると先ほど作成したAmazonの偽ログイン画面が表示されることが確認できる。
このように、「ちょっとした操作」で見た目が本物そっくりなページが公開出来てしまいました。
Firebaseを使って送信内容を可視化してみた
そもそもFirebaseとは？
Firebase（ファイアベース）は、Googleが提供しているクラウドベースの開発プラットフォームです。Webアプリやモバイルアプリを作るときに必要になる「サーバー側の機能」を、特別な知識がなくてもすぐに使えるようにしてくれる便利なサービスということになります。
サーバー側の機能というと少し難しく聞こえるかもしれませんが、要するに「データを保存したり」「ログイン機能をつけたり」「通知を送ったり」といった、アプリの裏で動いている処理のことを指します。普通であれば、こうした仕組みを作るには自分でサーバーを立てたり、複雑なコードを書いたり、セキュリティを考えたりとかなり手間がかかります。
でもFirebaseを使えば、そういった面倒な準備をしなくても、すぐにリアルタイムでデータを保存できたり、ユーザーごとのログイン管理を設定できたりするというわけです。
実装方法
1. Firebase コンソールで新しいプロジェクトを作成
Googleアカウントで Firebaseコンソール にアクセスし、「Firebase プロジェクトを作成」から新しいプロジェクトを作成します。名前は何でもOKです。
2. Firestore データベースを有効化
作成したプロジェクトの画面から「Firestore Database」を選びます。
3. HTML に Firebase SDK を読み込む
2の手順の中に</>というマークがあると思いますのでそちらをクリックします。
Firebaseの設定画面で表示される「ウェブアプリにFirebaseを追加」から表示されるスクリプトを、公開しているパスワード入力画面HTMLファイルの<head>タグ内に貼り付けます。
4. JavaScriptで送信データをFirestoreに保存する処理を追加
フォームに入力された内容をJavaScriptで取得し、Firebaseに送信する処理を追加します。
この発火タイミングはログインするボタンを押した時が良いですね。
5. 実際に入力された内容が、Firebase上のコンソールで確認できることを検証
データ送信後、Firebaseコンソールの「Firestoreデータベース」から、リアルタイムで保存されたデータを確認できます。 これで偽Amazonログインで入力したデータがデータベースに溜まっていく仕組みが作成出来ました。
実際に新卒さんを騙してみた
誕生日が近い新卒のメンバーに「○○さん、誕生日おめでとう！Amazonギフト券プレゼントするから、この画面からログインして受け取ってね！」とPCを渡す。そこには見た目そっくりな偽Amazonログイン画面が待ち受けています。
もちろん、これは社内教育を目的とした実験用の偽ページです。
UIも本物そっくり、動きも滑らか。「次に進む」を押せば、前のページで入力したメールアドレスがしっかり反映された状態でパスワード入力ページへ。もはや疑うスキなんてありません。
新卒さんの反応は？
画面を見せられた新卒さんは、少し驚きつつも素直に喜び、「ありがとうございます！」と、すぐに迷うことなくログイン手続きを開始。
…そう、普通にログインしてしまったのです。
その直後、「実はこれ、社内セキュリティ教育の一環なんだ」と種明かしをすると、新卒くんは一瞬フリーズ。数秒後、照れ笑いしながら「えっ、うそでしょ…？完全にやられました…笑」と苦笑い。
仕上げに、Firebaseのdatabaseで実際に入力されたメールアドレスとパスワードを見せると、ようやく引っかかったことの重みを実感していたようでした。
何が伝わったか
この一連の流れから分かるのは、「見た目が本物っぽい」「相手が信頼できる人」「プレゼントという嬉しい内容」という3つが重なると、人は簡単に疑いの目を外してしまうということ。
だからこそ、どんなときでも一瞬立ち止まって、
URLのドメインを確認する
本当に公式の案内かを見極める
個人情報の入力は慎重にする
こうした「小さなクセ」が大切だと、新卒さんのリアクションを見て改めて実感しました。
フィッシング詐欺に引っかからないために意識すべきこと
フィッシング詐欺は、見た目が本物そっくりな偽のWebサイトやメールを使って、あなたの個人情報を騙し取る手口です。この詐欺に引っかかることを防ぐためには、次のポイントをしっかり意識することが重要です。
まずフィッシング詐欺の仕組みとリスクを理解することが大前提です。フィッシングサイトは、先述の通り実際に誰でも簡単に作れてしまいます。仮にあなたが日々使っているAmazonやGoogleのログインページを真似たものでも、簡単に見抜けないことがあります。ログイン情報を盗まれるだけでなく、同じパスワードを他のサービスでも使い回していると、その情報が他のアカウントにも流用され、個人や会社に甚大な被害を及ぼす可能性があります。そうしたリスクを常に念頭に置き、他のサイトではパスワードを使い回さないことが最も基本的な対策となります。
次に、フィッシングサイトの見分け方を身につけることです。偽のWebページは、細部にまで気を使って本物に似せていますが、少し注意深く見ることで違和感を感じ取れるポイントがいくつかあります。例えば、URLに不審な文字列が含まれていたり、SSL証明書がない（https://ではなくhttp://）サイトであったり、メールの内容が普段とは違う文体だったりすることがあります。ちょっとした違和感に気づいた時こそ、一歩立ち止まって慎重に確認することが大切です。また、どんなに信頼できる人物からの連絡でも、焦らず慎重に確認することを忘れないでください。
最後に、法的・倫理的な注意点も忘れないことです。フィッシング詐欺に加担したり、不正に他人のログイン情報を取得したりすると、それは立派な犯罪です。個人情報保護法や不正アクセス禁止法に違反し、刑事責任を問われることもあります。さらに、「自分は大丈夫」と過信せず、普段から他人に対してもセキュリティ意識を高めることが大切です。教育や啓蒙活動を通じて、全員が同じ意識を持つことが犯罪防止に繋がります。
まとめ
フィッシング詐欺に対する知識を深め、そのリスクを常に意識することが、まず第一歩です。
フィッシングサイトの見分け方を学び、少しの違和感を見逃さない習慣をつけましょう。
パスワードは必ず使い回さず、各サービスに対して異なるパスワードを設定することが、被害を未然に防ぐために最も有効な方法です。
フィッシング詐欺は犯罪です。法的責任や倫理的責任をしっかりと理解し、他人の個人情報を守る意識を持ちましょう。
これらのポイントを日常から意識するだけで、大きなリスクを回避できます。情報セキュリティは自分自身を守るためだけでなく、周囲の人々や社会を守るためにも重要です。少しの警戒心と意識で、重大なトラブルを避けることができるので、今一度、日々の習慣として見直してみてください。
