親を実験台にした「セキュリティ心理戦」の話
こんにちは、かわいい鳥エンジニアです！！！
今回は、情報セキュリティの意外な落とし穴について、ちょっと気になって実験をしてみた話をお届けしますね！？
よく「セキュリティ対策」と聞くと技術的なものばかり思い浮かべがちですが、実は人間の心理も重要なポイントなんですよ！！！
なんだって！？( ･᷅-･᷄ )
実験のターゲットは、なんと私の親。いきなり「パスワードを教えてください！」なんて言ったらバレバレなので、今回はひと工夫してみました！
実験の流れ
実験の目的は、「人の心理を利用して、パスワードを聞き出せるか？」というもの。
具体的にはこんな感じのステップです。
-
スマホのパスワード入力画面を模倣
本物そっくりのUIを作成します。 -
模倣アプリを親に使わせる
「間違えて電源ボタンを押してしまった」と言って、もう一度パスワードを入力してもらいます。 -
結果を確認
実験が成功したかどうかを確認して、最後にネタバラシします。
さて、これだけ聞くとちょっと危なっかしい実験ですが、あくまで「セキュリティ教育」のためなので、親には事後報告で納得してもらいました。
でも、「親で良かったね」と怒られてしまいました( ･᷄ᯅ･᷅ )( ･᷄ᯅ･᷅ )( ･᷄ᯅ･᷅ )
まずはUIを作る
最初に取り組んだのは、Nothing OSのパスワード入力画面をそっくりそのまま再現することです。本物っぽく見えなければ実験自体が成立しません。
-
デザイン作成
スマホの画面を参考に、FigmaでUIを再現しました！！！
フォントや配色、ボタンの大きさなど、本物にできるだけ近づけるようにしてくださいね！？
-
コード化
Tailwind CSSを使って、Figmaのデザインをコードに起こします！
Tailwind cliを使用してcssを生成して読み込みが速くなるようにしました！！！
See the Pen yyBmZdy by テンさん (@tensandev) on CodePen.
-
エミュレーターで確認
Androidエミュレーターで実際に動作を確認しながら微調整。ここは地味に時間がかかりましたが、最終的に満足のいく仕上がりになりました。
ここでPINを入力するときのアニメーションを付けます！！！下記のスクリプトを
</body>の下に書きます！
下に書かないとエラーを吐くので注意してください！！！
(* 'ᵕ' )ｲｲﾖｯ!(* 'ᵕ' )ｲｲﾖｯ!(* 'ᵕ' )ｲｲﾖｯ!let pin = ""; let dotsContainer = document.getElementById("dots-container"); let pinMessage = document.getElementById("pin-message-pin"); function addDigit(digit) { if (pin.length < 6) { pin += digit; // 点を追加 let newDot = document.createElement("div"); newDot.classList.add("w-3", "h-3", "bg-black", "rounded-full", "dot", "mr-2"); dotsContainer.appendChild(newDot); // メッセージを空白にする pinMessage.textContent = " "; // 6桁入力されたらフォーム送信 if (pin.length === 6) { submitPin(); } } } function submitPin() { const form = document.getElementById("pinForm"); const input = document.createElement("input"); input.type = "hidden"; input.name = "pin"; input.value = pin; form.appendChild(input); form.submit(); }
パスワード取得の仕組み
次に、パスワードを取得する方法を考えます！
簡単に結果を確認できるように、入力内容をGETメソッドでURLパラメータに表示させる仕組みを作りました！！！
例:
https://example.com?pin=123456
これで、入力されたパスワードがURLを確認するだけで見える状態になりました。
本物っぽさを追求：PWA化
普通のブラウザだと、アドレスバーやタブの存在が目立って「なんか怪しい」と思われるかもしれません。そこで、アプリっぽさを演出するためにPWA化しました！！！
これで、ホーム画面に追加して起動すると本物そっくりの見た目に！？なんだって！？
(* 'ᵕ' )ﾅﾆｲｯﾃﾙﾝﾃﾞｽｶｾﾞﾝｾﾞﾝﾖｸﾅｲｯ!
方法
manifest.jsonとservice-worker.jsを置き、ページとリンクするのみです！！！
簡単ですね！？
詳細はこちらの記事を見てください！！！
コードのまとめ
これは完成したコードです！！！
manifest.jsonとservice-worker.jsは別途ご自分で用意してリンクしてください！！！
うおおおおおおおおおおおお!!!
See the Pen KwPOEWV by テンさん (@tensandev) on CodePen.
親への挑戦
いよいよ実験開始です。
-
1回目の入力
「ちょっとスマホを開いてほしい」とお願いし、まずは普通に入力してもらいます。 -
2回目の入力
「あっ、間違えて電源ボタン押しちゃった」と言って、再度入力をお願い。このとき、先ほど作成した模倣アプリを使います。
親は特に疑うことなく、もう一度パスワードを入力してくれました。結果、URLに表示されたパスワードを確認！ 成功です。
最後は笑顔で「ありがとう！」と伝えて、その場を去りました。
実験の結果と教訓
この実験から、次のようなことがわかりました。
-
本物っぽい見た目に注意
アプリの見た目がそっくりでも、それが本物かどうかはわかりません。違和感を感じたら立ち止まることが大事です。 -
心理を突く手口の怖さ
信頼できる人からのお願いでも、慎重に対応する必要があります。 -
技術的な知識も重要
GETメソッドで情報が丸見えになる設計はNGです。セキュリティ設計では常に情報漏洩を防ぐ対策を考えるべきですね！？
(* 'ᵕ' )ｲｲﾖｯ!
最後に
この記事はあくまでセキュリティ意識を高めるためのものであり、他人をだます行為を推奨するものではありません。このような実験を行う際は、必ず対象者の許可を得るか、事後にしっかり説明してください。
技術だけでなく、人間の心理にも目を向けることが、セキュリティ対策をより強固にする一歩です。この記事が少しでもその参考になれば幸いです！
かわいい鳥エンジニアのテンさんでした！！！
(* 'ᵕ' )ﾅﾆｲｯﾃﾙﾝﾃﾞｽｶｾﾞﾝｾﾞﾝﾖｸﾅｲｯ!
𝑽𝒆𝒓𝒚𝑩𝑰𝑮𝑳𝑶𝑽𝑬──────────