探していた古いカメラのレンズを、検索で見つけました。
相場より三割ほど安く、在庫ありと書いてあります。写真はきれいで、アドレスバーには鍵のマークがあり、会社概要のページもあります。カートに入れて、住所を入れて、カード番号の画面まで進んだところで手が止まりました。
前にも同じような店を見た気がして検索してみると、よく似た名前の店がいくつか出てきます。どれも同じ写真を使っていて、どれも三割安い。
その日は買わずに閉じて、翌週、少し高い別の店で買いました。あの店が本物だったのかどうかは、今も分かりません。
店先が見えない
街の店なら、入る前にいろいろなものが目に入ります。建物の古さや店員の様子、レジの後ろの棚、そこに何年あるのか。人はそういう手がかりで、ここで財布を出してよいかを決めてきました。
ネットの店には、その店先がありません。見えるのは画面だけで、画面は誰でも同じように作れます。きれいな写真も丁寧な会社概要も、本物の店から写せば一晩で揃います。
鍵のマークも、かつては目印のひとつでした。今は、通信が暗号化されていることを示しているだけです。証明書は無料で取れるようになり、偽の店に付いていることも珍しくありません。
本当に知りたいことは、画面の裏側にあります。入力したカード番号がどこへ行くのか。決済を専門にする会社にまっすぐ渡るのか、店のサーバーにいったん入るのか。店のソフトウェアは手入れされているのか。
材料は、もうブラウザの中にある
画面の裏側は見えないと書きましたが、すべてが見えないわけではありません。ページを開いた時点で、ブラウザはその材料の一部を受け取っています。
たとえばカード番号の入力欄です。決済会社の多くは、入力欄を自分のサーバーから出す小さな枠として提供しています。この枠の中に打った番号は店のページからは読めず、店のページを通らずに決済会社へ送られる作りです。枠を使わず、店のページにそのまま入力欄を置いている店もあります。どちらの形なのかは、ページの作りを見れば分かります。
ほかにも、ページはいろいろなものを抱えています。読み込んでいるプログラムの名前とバージョン、安全のためにサーバーが付けている設定、どこのサービスと通信しているか。サーバーの側で何が動いているかも、URL の形やエラー表示の癖から、ある程度は推し量れます。
足りなかったのは、それを読む手段です。ブラウザの開発者向けの画面を開けば一部は見えますが、買い物の途中にそこまでする人はいません。
読み解くための知識のほうは、揃ってきました。どのプログラムがどんな痕跡を残すか、どのバージョンにすでに見つかっている弱点（脆弱性）があるかといった知識は、公開のデータベースとして共有されています。偽の通販サイトの特徴も、警察や消費生活センター、セキュリティの研究者がまとめて公開しています。
SafePeek
SafePeek は、ブラウザの中にあるこの材料をその場で読んで見せる、Chrome の拡張機能です。無料で、GitHub で公開しています。
調べたいページを開いてツールバーのアイコンを押すと、そのタブだけを読んで、結果を小さな画面に出します。分かるのは次のようなことです。
- カード番号を入れる場所が、決済会社の枠の中か、店のページの中で番号を決済会社用の別の文字列に置き換えてから送る形（トークン化）か、店のフォームにそのまま入力する形か
- ページが使っている技術とそのバージョン、サポートの終わったソフトウェアや、弱点が見つかっている部品
- 店のサーバーで動いていそうな仕組みと、その推定がどのくらい確かか
- 偽の通販サイトに見られる特徴（特定商取引法に基づく表記がない、販売業者名が「株式会社〇〇」のまま、決済会社の入力枠の横に店自身のカード番号欄がある、など）
- ページのプログラムがデータを送っていると見られる先。アクセス解析や広告のほか、画面での操作を記録するサービス、端末の特徴から利用者を見分けるサービスなどを、用途ごとに推定します
どれも、ページに残っているものからの推定です。そのかわり、指摘にはどれも根拠が付いています。どのヘッダーを見たのか、どのスクリプトを見たのかが書いてあるので、自分で確かめられます。
結果は、いちばん上に全体の判定が一行で出ます。「重大な懸念があります」「注意点があります」「大きな問題は見つかりませんでした」のどれかで、その下に一つずつの指摘が、重大・注意・軽微・情報・良好の印つきで並びます。
カード決済の欄には、たとえば「カード入力は決済会社の画面内です」と出ます。これは良好の印で、番号は決済会社の枠の中で入力する作りだということです。「カード番号をサイト自身のページで入力させています」と出たら、番号が店のサーバーを通る可能性があります。どちらの場合も、決済会社の名前がわかれば、かっこの中に出ます。
冒頭のレンズの店のようなページで開けば、カード番号を入れる前に確かめられることがあります。特定商取引法に基づく表記へのリンクはあるか、販売業者の欄が仮の値のままになっていないか、カード番号を決済会社の枠の中で入れる作りか、といったことです。偽の通販サイトの特徴は一つだけでは決め手にならないので、弱い手がかりは、いくつか重なったときにだけ示すようにしています。
SafePeek でなくてもできること
ここに挙げたことの多くは、SafePeek でなくても調べられます。
ページで使われている技術を表示する拡張機能は以前からありますし、URL を入れると安全かどうかを判定してくれる Web サービスもあります。開発者向けの画面を開けば、通信先もヘッダーも全部見えます。
違いは二つあります。
一つは、SafePeek が自分から何も外へ送らないことです。URL を判定する Web サービスに頼めば、どのページを見ているかをそのサービスに伝えることになります。拡張機能の中には、閲覧したページの情報を集めているものもあります。SafePeek は、そのどちらも起きないように作っています。
SafePeek が求める権限は、アイコンを押したタブを読むことだけで、解析はすべてブラウザの中で終わります。通信が起きるのは、ヘッダーを読むためにそのページを読み直すときと、ページが読み込み済みのスクリプトをもう一度取得するときだけです。どちらも、そのページ自身が使っているサーバーへのアクセスです。
もう一つは、問いの立て方です。技術の一覧や点数を出すのではなく、買い物の前に知りたいことに答える形にしています。カード番号はどこへ行く作りになっているか、この店に偽物の特徴はあるか、という問いです。
書いてあることと、使っていること
作っている途中で、SafePeek を紹介した自分の記事を SafePeek で開いてみたことがあります。出てきたのは、このサイトのサーバーでは Seasar2 が動いているかもしれない、という警告でした。Seasar2 は Web サイトを作るための Java の仕組みで、2016年にサポートが終わっています。サポートの終わった仕組みは、弱点が見つかっても直らないので、SafePeek は警告として出します。
その記事では、SafePeek が何を手がかりにするかの例として、Seasar2 の画面が残すコードを一行載せていました。SafePeek はそれを、ページが実際に使っている印として読んでいたのです。
ページに書いてあることと、ページが使っていることは違います。ここを取り違えると、仕組みを解説した技術記事は、どれも古いシステムで動いていることになってしまいます。Web ページは、画面に表示される文章と、ページの作りを書いた部分（タグ）でできています。そこで、この二つを Web の仕様どおりに分けて読み、仕組みの痕跡は作りの部分だけで探すように直しました。分け方が正しいかは、たくさんの例を、広く使われている別の読み取りプログラムにも読ませて、同じ結果になるかで確かめています。
同じような取り違えは、作っているあいだ何度も起きました。会員カードでログインする画面を、クレジットカードの入力画面と取り違えたこともあります。どれも実際のページで試して見つかったもので、直すたびに規則として残しています。
使い方
Chrome ウェブストアでは配布していません。GitHub から入手して、自分で Chrome に読み込みます。Edge と Brave でも、同じ手順で使えます。
- SafePeek の Releases から、最新版の
safepeek-v1.0.0.zipをダウンロードして解凍します。解凍したフォルダは Chrome が使い続けるので、消さない場所に置いてください - Chrome のアドレスバーに
chrome://extensionsと入力して開き、右上のデベロッパーモードをオンにします - 「パッケージ化されていない拡張機能を読み込む」を押して、解凍したフォルダを選びます
- ツールバーのパズルの形のアイコンから、SafePeek をピン留めしておくと便利です
あとは、調べたいページでアイコンを押せば結果が出ます。カード番号の扱いを知りたいときは、カード番号を入力する画面を開いた状態で押してください。番号を入れる必要はありません。
ストアを使わないので、自動では更新されません。知らないうちに中身が変わらないよう、あえてそうしています。新しい版を使うときは、古いものを削除して、同じ手順で入れ直します。GitHub のアカウントがあれば、リポジトリの Watch からリリースだけを通知するように設定しておくと、新しい版が出たことが分かります。
分からないこと
SafePeek が見ているのは、ブラウザから見える範囲だけです。
きちんと運用されているサイトほど、サーバーの情報を隠しています。何も見つからなかったことは、安全の保証ではありません。偽の通販サイトの特徴も手がかりにすぎず、どれにも当てはまらない偽物もあります。決済の画面が、今見ているページとは別にあることもあります。
判定がおかしいと思ったら、指摘の下にある「誤判定を報告」から知らせてください。GitHub の報告フォームが、サイトのアドレスのドメインまでの部分と、指摘の種類や重さ、SafePeek のバージョンといった判定の情報を入れた状態で開きます。ページの本文や、根拠に使ったページ側の値は含まれません。これらはリンクのアドレスに入っているので、リンクを開いた時点で GitHub には届きますが、公開の報告になるのはフォームを送信したときだけです。
まとめ
ネットの店を信用してよいかは、これまで見た目で決めるしかありませんでした。その見た目は、誰でも作れます。
SafePeek が手がかりにするのは、見た目ではなく、ページの作りに残っているものです。何かを保証するものではありませんが、あのレンズの店でアイコンを押していたら、少なくとも、カード番号を入れる欄が決済会社の枠の中にあるかどうかは、番号を入れる前に確かめられました。
ソースコードと、判定の一覧は GitHub にあります。