Screenshot Redact
Build note.

スクリーンショットにも、個人情報が写る。

操作方法やエラー画面を共有したいだけでも、スクリーンショットには意図しない情報が入り込む。

• メールアドレス
• 電話番号
• 社内IPアドレス
• 管理画面のURL
• APIキーやアクセストークン
• 名前、顔、通知、ファイル名

画像を見直して手作業で隠すこともできるが、文字が多い画面では見落としやすい。そこで、自動検出で候補を出し、最後は利用者が確認する形にした。

自動検出だけを信用しない。

Screenshot Redactは、ブラウザ内OCRで画像から文字と位置を取得する。そこから、形式をある程度判定できる情報だけを抽出する。

小さなスクリーンショットでは文字認識率が落ちやすいため、長辺が短い画像はOCR用の作業領域だけ最大4倍まで拡大する。さらにグレースケール化とコントラスト補正を加え、取得した座標を元画像の大きさへ戻してマスクする。表示画像と保存画像そのものは拡大しない。

人名や社名は文脈によって意味が変わり、顔も文字OCRでは検出できない。これらを無理に自動判定すると、誤検出が増えて確認しづらくなるため、v1では手動マスクに任せた。

OCRもブラウザの中で動かす。

文字認識には、Tesseract.jsを使った。OCRエンジンはWeb WorkerとWebAssemblyでブラウザ内実行され、日本語と英語を読み取る。

画像を選択・貼り付け
  ↓
OCRエンジンと言語データを読み込み
  ↓
ブラウザ内で文字と位置を認識
  ↓
形式が一致する文字列を検出
  ↓
利用者が候補を確認

初回の自動検出時には、外部CDNからOCRエンジンと日本語・英語の学習データを取得する。ただし、選択したスクリーンショットをCDNや7okenmのサーバーへ送信する処理はない。

認識エンジンや言語データは高速化のためブラウザへキャッシュされる場合があるが、選択した画像や検出結果をLocalStorageやサーバーへ保存する処理は行わない。

通信できない場合でも、画像を読み込んで手動マスクを追加し、保存する機能は使える。

自動と手動を同じ画面で確認する。

自動検出した候補は、画像上の範囲と右側の一覧へ表示する。候補ごとにチェックを外したり、不要な範囲を削除したりできる。

自動検出されなかった部分は、ADD MASKを押して画像上をドラッグする。名前、顔、通知、顧客番号など、共有したくないものを利用者自身で追加できる。

検出結果の一覧では、メールアドレスや電話番号をそのまま再表示せず、一部を伏せて表示するようにした。

黒塗りを標準にする。

マスク形式は2種類用意した。

1. BLACK：対象範囲を黒く塗りつぶす
2. PIXEL MOSAIC：対象範囲を低解像度化して拡大する

初期値は黒塗り。モザイクは見た目が自然でも、元の文字の形や長さが推測できることがある。APIキーやカード番号など、漏れてはいけない情報には黒塗りを推奨する。

出力はPNGとして新しく生成し、青い選択枠は保存画像へ含めない。

見落としを前提に設計する。

OCRは画像の解像度、文字の大きさ、配色、フォントによって認識精度が変わる。正規表現による検出にも、見落としと誤検出がある。

そのため画面上でも「自動検出済み＝安全」とは表現せず、保存前に画像全体とマスクを確認するよう案内した。

Auto-detect, then verify.

完全な判定を約束するより、候補を速く見つけ、最後の判断をしやすくすることを優先した。

検出ロジックをテストする。

画像操作と切り離した検出部分には、次の自動テストを追加した。

• 分割認識されたメールアドレスの結合
• 空白区切りの日本の電話番号
• IPv4アドレスの数値範囲
• URLと代表的なAPIキー形式
• カード番号候補のLuhnチェック
• 検出値を一覧表示するときの伏せ字

既存ツールのテストと合わせ、ローカル処理ツールの基本動作を公開前に確認できる状態にした。