漏洩百貨店（loo100）

ニュースを、セキュリティの教材にする

「〇〇社で個人情報が漏洩したおそれ」というニュースは、ほとんど毎週のように流れてきます。けれど、見出しを読んで「またか」と思ったあと、なぜ起きたのか、どうすれば防げたのかまで追いかけることはあまりありません。続報が出るころには、最初のニュースのことは忘れています。

漏洩百貨店（loo100）は、最近ニュースになった日本企業の情報漏洩事件を1件ずつ取り上げ、時系列・原因・対策の3つの視点で解説するサイトです。実際に起きた事件を入口にすることで、教科書の中の言葉だった「ランサムウェア」や「委託先管理」を、自分の現場の話として学べるようにしたいと考えました。

想定している読者は、セキュリティの専門家ではありません。自分が使っているサービスの漏洩かどうか知りたい人、自分の現場の対策に活かしたい開発者や IT 担当者、実例を通して基礎を学びたい人です。アカウント登録のような仕組みは持たず、誰でもそのまま読めます。

事件記事の中身

事件記事は、どれも同じ構成で書いています。

• 概要: 何が起きたのかを短く
• 時系列: 発生・検知・公表・続報を、線の上に順に並べた図
• 原因: 攻撃の経路や設定の不備を図にして、どこが破られたのかを示す
• 対策: 「この対策があれば、ここで止まった」を、同じ図の上で経路が止まる形で示す
• 影響: 漏洩した件数と、漏洩した情報の種類
• 出典と更新履歴

扱うのは日本企業の情報漏洩事件に絞っています。海外だけの事件や、脆弱性の情報だけのもの、漏洩を伴わないサービス障害は扱いません。

記事の中の「関連する技術」からは、ランサムウェアや VPN 機器の脆弱性、パスワードの保存方法といった基礎知識の解説ページへ移れます。解説ページからは、同じ技術が問題になったほかの事件へ戻れるので、1つの事件から、同じ弱点を抱えたほかの事件へとたどっていけます。

書かないことを決めてある

セキュリティ事件を扱うサイトなので、書く内容には決まりを設けています。

• 出典にないことは書かない。 被害企業の公式発表や公的機関の情報を優先し、一次情報がなければ報道から分かる範囲で書く。どの記事にも出典の URL と公開日を付ける
• 事実と推測を分ける。 原因や被害規模が分かっていなければ「調査中」「公表されていない」と書き、断定しない
• 漏洩したデータそのものは扱わない。 漏洩した個人情報や、リーク先へのリンクは載せない
• 攻撃の手順は書かない。 手口の解説は仕組みの理解と防御のためにとどめ、再現できる手順は載せない
• 被害を受けた組織を貶めない。 原因と対策の解説に徹し、憶測で批判しない

見た目と、トップの歴史のグラフ

トップ画面は、記事の一覧ではなく、事件の歴史そのものを1枚のグラフにしています。横軸は事件の公表日、縦軸は漏洩した件数で、1件の事件が1本の細い線になります。件数は10万件から1億件まで桁がまったく違うので、縦軸は対数にしています。件数が公表されていない事件は、下に別の段を設けて並べています。線にカーソルを乗せる（スマホなら触れる）と、その事件の概要がカードで出て、そこから記事へ進めます。

全体の見た目は、グレーの背景に白黒だけで描くモノクロの画面、等幅のフォント、黒地に白抜きの箱のラベル、画面を囲む枠と下部のバーで揃えました。色に頼らず、線と塗りで区別するのが決まりです。ライトとダークも切り替えられます。

細かいところでは、ページを開き直すたびにタイトルやボタンがわずかに動く、という問題がありました。原因は等幅フォントの読み込みで、フォントが届く前に別のフォントで描き、届いた瞬間に描き直していたため、箱のラベルの幅が変わっていたのです。フォントを HTML と同時に先読みし、最初の描画に間に合わなければ、そのページは途中で切り替えない設定に変えて直しました。

匿名のコメント

事件記事には、アカウントなしで書き込める匿名のコメント欄があります。名前やメールアドレスの欄はなく、投稿はすぐに公開されます。そのぶん、荒らしや個人情報の書き込みを防ぐ仕組みを入れています。

• 1件は140文字まで
• URL を含む投稿は受け付けない。 https:// で始まるものだけでなく、ドメイン名の形をした文字列、IP アドレス、hxxp や [.] のように検出を避けた書き方、全角で書かれたものまで弾く
• メールアドレス・電話番号・カード番号らしき文字列を含む投稿も受け付けない
• 同じ接続元からは5分間に3件まで
• bot 対策に Cloudflare Turnstile
• 表示はすべてプレーンテキスト。HTML として解釈せず、自動でリンクにもしない

入力のチェックは、画面側とサーバー側で同じルールのコードを共有しています。画面側のチェックはあくまで入力の補助で、本当の判定は必ずサーバー側で行います。

中身の話

記事のページは Astro で作っています。記事は1件ずつ Markdown のファイルで、ビルドのときに記事の項目（日付・タグ・出典など）の形が正しいかを検査してから、静的なページに書き出します。時系列や攻撃の流れの図は、記事ごとにスクリプトを書くのではなく、記事のファイルに図のデータだけを書き、共通のコンポーネントが描きます。図のデザインが揃い、記事に任意のコードが入り込まないので安全です。

配信は Cloudflare Workers で、ページはすべて事前に生成した静的なファイルです。リクエストのたびに動くのは、コメントの API（Hono）だけで、コメントは Cloudflare D1 に保存しています。

Astro 7 には、Hono のアプリをサイト全体の入口に置く新しい仕組みもあり、最初はそれを試しました。ところが、ページがすべて事前生成だと Astro が「サーバーは要らない」と判断して Worker を出力せず、本番で API が動かなかったので、API のルートの中から Hono を呼ぶ形に戻しています。

公開時点で事件記事は21件、技術の解説は8件です。新しい事件が出るたびに、そして続報が出るたびに、記事を足し、書き直していきます。