〜JSトークン＋スクロール必須＋遅延クリック 実装例付き〜
標的型攻撃メール訓練や、サポート詐欺・フィッシング体験サイトを作っていると、こんな悩みはありませんか？
- ログを見ると 明らかに人ではないアクセス が混ざっている
- 検証用URLに 自動巡回ツールやBot が大量に来る
- 「本当に人が操作した結果」だけを KPIとして計測したい
そこで本記事では、人による操作だけを通過させやすく、Botは弾きやすい
実践的な仕掛けとして、
JSトークン ＋ スクロール必須 ＋ 遅延クリック
を組み合わせた訓練用サイトの実装例を紹介します。
なぜ「組み合わせ」が重要なのか？
まず、単一の対策は、簡単に突破されやすいということがあります。
| 対策 | Botに対する抑止効果 | UXとの親和性 |
|---|---|---|
| User-Agent判定 | 低い | ◎ |
| JavaScript必須 | 中 | ◎ |
| CAPTCHA | 高い | △ |
訓練サイトでは UXは落とさずに、でも、人によるアクセスであるかどうかを確認できるようにするために、
- 人が「無意識にやっている行動」
- Botが「実装しづらい行動」
を踏まえて、模擬フィッシングサイトや種明かしページを作成するのがコツです。言い換えると
- 人であるからこそ行われる行動
- 人であればしない行動
- Botにはできない行動
- Botだからこそしてしまう行動
を組み合わせ、人によるアクセスであることを判別しやすくするということです。
例えば、人であれば目に見えないリンクはクリックできませんが、コードを見てしまうBotは目に見えないリンクにもアクセスしてしまいます。こうした事象を逆手に取って、Botからのアクセスを判別するのは一つの方法です。
① JSトークン：JavaScriptが動いているか確認する
考え方
- ページ表示時に ランダムトークンをJSで生成
- 次の操作（クリック等）で その値を送らせる
- JSが動かないBotはここで脱落
実装例
<script>
// ページ表示時にトークン生成
const humanToken = Math.random().toString(36).slice(2);
sessionStorage.setItem("human_token", humanToken);
</script>
<input type="hidden" id="humanToken">
<script>
document.getElementById("humanToken").value =
sessionStorage.getItem("human_token");
</script>
サーバー側では、トークンが存在するか／想定通りかをチェックします。
② スクロール必須：内容を読んだ「動き」を見る
考え方
- 人は警告文や説明文を読むとき、自然にスクロールする
- Botは スクロールイベントを発生させない ことが多い
実装例
画面をスクロールし、且つ、一定時間以上ページを表示していないと「次へ進む」ボタンを押せないようにすることで、スクロールできない Botや、即クリックするようなBotを排除する。
<script>
let scrolled = false;
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
scrolled = true;
}
});
</script>
<button id="nextBtn" disabled>次へ進む</button>
<script>
setInterval(() => {
if (scrolled) {
document.getElementById("nextBtn").disabled = false;
}
}, 300);
</script>
これだけで、
- 一切スクロールしないアクセス
- HTMLを直接取得するだけのBot
をかなり除外できます。
③ 遅延クリック：即クリックは「怪しい」
考え方
- 人はページ表示から 数秒は読む
- 0.1秒でクリックするのは不自然
実装例
<script>
const loadedAt = Date.now();
function checkDelay() {
const elapsed = Date.now() - loadedAt;
return elapsed > 3000; // 3秒以上
}
</script>
<button onclick="handleClick()">送信</button>
<script>
function handleClick() {
if (!checkDelay()) {
alert("少し読んでから操作してください。");
return;
}
alert("人による操作と判定されました");
}
</script>
④ 3つを組み合わせた「人判定」
判定イメージ
if (
tokenExists &&
scrolled === true &&
elapsedTime > 3000
) {
// 人による操作
} else {
// 機械的アクセスの可能性
}
訓練用途でのおすすめ設定
| 判定要素 | 推奨 |
|---|---|
| JSトークン | 必須 |
| スクロール | 100〜300px |
| 遅延時間 | 2〜5秒 |
CAPTCHAは最後の手段として、
この3点を満たさない場合のみ表示するとUXを損ねません。
セキュリティ訓練での活用ポイント
✔ KPIの精度が上がる
- 「人がクリックした率」だけを計測できる
- Bot巡回による 誤クリックカウントを排除
✔ 本物の攻撃体験に近づく
- 実際の詐欺サイトも JSや挙動チェックを使う
- 「なぜこのサイトは怪しいのか」の教材にもなる
✔ 説明がしやすい
- 事後教育で
「人間らしい操作はログで分かる」
と説明できる
まとめ
標的型攻撃メール訓練サイトでは、自然な人間判定を行うことができる仕掛けが重要です。
- JSトークン
- スクロール
- 遅延クリック
といった小技を組み合わせ、クリック者の情報取得と連動させることで、完璧とは言えないまでも、
かなり実用的なレベルで人と機械のアクセスを判別することができるようになります。
