訓練用の閉じられない
警告画面を自作してみた

最近、サポート詐欺の相談を受ける機会が増えてきました1。とくに高齢の方から「画面が閉じられなくて怖かった」という話を聞くと、防災訓練のように安全な環境で練習しておく必要性を感じます。閉じにくい画面の仕組みを理解しておけば、いざというときに落ち着けるはずです。

そこで、自分で“閉じにくいサポート詐欺風の訓練ページ”を作り、実際に動かしてみました。

<svg class="eyecatch-svg" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="192" height="192" rx="32" ry="32" fill="white" />
  
  <!-- 盾の本体 -->
  <path d="M 96 40 L 140 55 L 140 95 C 140 120 130 140 96 155 C 62 140 52 120 52 95 L 52 55 Z" fill="#2196F3" stroke="#1976D2" stroke-width="3" stroke-linejoin="round" />
  
  <!-- 盾の中央ライン(立体感) -->
  <path d="M 96 45 L 96 150" stroke="#1565C0" stroke-width="2" />
  
  <!-- 警告三角形(背景) -->
  <g transform="translate(96, 95)">
    <path d="M 0 -25 L 22 20 L -22 20 Z" fill="#FF9800" stroke="#F57C00" stroke-width="2.5" stroke-linejoin="round" />
    
    <!-- 感嘆符 -->
    <line x1="0" y1="-8" x2="0" y2="8" stroke="white" stroke-width="4" stroke-linecap="round" />
    <circle cx="0" cy="15" r="2.5" fill="white" />
  </g>
  
  <!-- チェックマーク(訓練・安全確認) -->
  <g transform="translate(135, 50)">
    <circle cx="0" cy="0" r="12" fill="#4CAF50" />
    <path d="M -4 0 L -1 4 L 5 -4" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
  </g>
</svg>訓練用の閉じられない<br class="chiilabo-br is-on">警告画面を自作してみた

ちなみに、このような訓練ページは、独立行政法人情報処理推進機構セキュリティセンターでも公開されています2

関連記事

1. 訓練ページの仕組み

「閉じられない画面」の裏側はどう動いているのでしょうか。
サポート詐欺ページは、×ボタンが効かないように見えたり、画面が全画面化して戻れなくなったり、警告音まで鳴らすことがあります。
これらの仕組みは、ブラウザの正規の機能の組み合わせで実行されています。

しかし、実際の詐欺ページを触るのは危険です。
そこで、ブラウザがどう反応するのか確認するために、教育用途の安全なダミーページを自作することにしました。

高齢者向け講習などで、この訓練ページは役に立つと思いました。実際の詐欺ページに近い見た目と挙動を体験しておくと、「閉じられない=壊れた」ではなく「閉じられない=ブラウザ内の挙動」と理解できます。タスクマネージャーで閉じる練習にも使えます。

1.1. ウィンドウ風の偽警告

まずは、シンプルな白い背景から始まるページを用意しました。
訓練を開始すると、背景色が深い赤に切り替わり、いかにも“不穏な画面”に見えるようにしています。

切り替えボタンを押したあとに、仕掛けが順番に動すようにしています。

実際の詐欺画面に寄せるため、上部バーと×ボタンをつけた“ウィンドウ風の箱”を作りました。
×ボタンに見えるだけで、押しても閉じません。訓練でこの動きを知っておくと、実際の詐欺画面を落ち着いて見られるようになります。

番号がじわっと縮むアニメーションを入れています。意味はありませんが、視線が吸い寄せられるので「見た瞬間に電話番号が目に入る」という詐欺ページの心理的演出の再現になります。

1.2. 全画面化を試みる(Fullscreen API)

Fullscreen APIを使い、全画面表示をリクエストします3
ブラウザや設定によっては拒否されることもありますが、成功するとブラウザの枠が消えるので、「閉じる」ボタンは使えなくなります。

全画面化を試みる(Fullscreen API) 通常表示 https://example.com 閉じるボタン有効 API実行 全画面表示 閉じるボタンが消える ブラウザUI非表示 Fullscreen API の仕組み element.requestFullscreen() で全画面化

1.3. 右クリックを無効化する(contextmenu

右クリックでメニューを開けると脱出のヒントを与えてしまうので、contextmenu を無効化します4

1.4. タブを閉じにくくする(onbeforeunload

onbeforeunload という仕組みを使うと、タブを閉じようとしたときに「本当に閉じますか?」と警告を出すことができます5

タブを閉じにくくする(onbeforeunload) タブを閉じる 警告ダイアログ 「本当に閉じますか?」 心理的に押しにくい 仕組み ① イベント検知 onbeforeunload ② 確認ダイアログ表示 ブラウザ標準メッセージ

ブラウザでは文言が固定化されていますが、それでも心理的には “押しにくい” と感じます。

1.5. 警告音を鳴らす(自動再生はブラウザ依存)

ループ再生の警告音を鳴らす自動再生機能は、練習では音が出たり出なかったりします。
Chromeなどではブロックされる場合があり、このあたりの挙動はブラウザ依存です6

2. 実際に動かしてみて気づいたこと

ただ、タブを閉じるだけだとChromeの動作が少し不安定になることがありました。

どうもFullscreenの解除処理やonbeforeunloadの挙動が完全には同期しないことが理由のようです。
Chromeを再起動すると落ち着くので、ここは訓練時の注意点だと感じました。

閉じにくいサポート詐欺画面を自分で作ってみると、一つ一つの機能は技術的には単純なことがわかります。
でも、心理的には十分なインパクトがあります。
仕組みを体験しておくと、騙されないための心構えにもつながります。

  1. IPAの情報セキュリティ安心相談窓口における「偽セキュリティ警告(サポート詐欺)」の月間相談件数は、2023年10月に過去最高の519件を記録しました。 – サポート詐欺の「偽セキュリティ警告画面の閉じ方体験サイト」を公開
  2. IPAの体験サイトでは、ESCキーを長押しして全画面表示を解除する操作を体験できます。体験サイトは約2分で自動終了する仕様になっており、初心者でも安全に練習できます。 – 偽セキュリティ警告(サポート詐欺)対策特集ページ
  3. Fullscreen APIは、特定の要素を全画面モードで表示するためのWeb標準APIです。element.requestFullscreen()メソッドを呼び出すことで全画面化し、document.exitFullscreen()で解除できます。ブラウザのUIを完全に隠すことができるため、動画プレーヤーやゲームなどでも広く使用されています。 – 全画面 API のガイド
  4. JavaScriptのcontextmenuイベントでpreventDefault()を実行することで、右クリック時のコンテキストメニュー表示を無効化できます。ただし、ブラウザの開発者ツールから簡単に解除できるため、セキュリティ対策としての効果は限定的です。 – JavaScriptによる右クリックの禁止・禁止を解除する方法
  5. beforeunloadイベントは、ページがアンロードされる直前に発生するイベントです。かつては独自のメッセージを表示できましたが、悪用を防ぐため、現在のブラウザでは標準的な確認ダイアログのみが表示されます。また、ユーザーの操作がないページでは警告が表示されない場合もあります。 – Window: beforeunload イベント
  6. 多くの現代ブラウザは、ユーザーの操作なしでの音声自動再生をブロックします。これは、望まない音声による迷惑を防ぐためのセキュリティポリシーです。IPAの体験サイトでも、音声が流れることを事前に警告し、ボリューム調整を促しています。 – 「偽セキュリティ警告体験サイト」IPAが公開