YourInfo — リアルタイムブラウザ指紋と行動分析デモ

Web
YourInfo — リアルタイムブラウザ指紋と行動分析デモ

YourInfo — リアルタイムブラウザ指紋と行動分析デモ

YourInfoは、ブラウザ指紋（Canvas / WebGL / audio / フォントなど）とユーザー行動（マウス、スクロール、入力）のリアルタイム収集によって、ウェブ上でどのように個人が識別・追跡されうるかを可視化するデモアプリケーションです。クロスブラウザ追跡やハードウェアに基づく識別、Grok AIを使ったプロファイリング解析、インタラクティブな3Dグローブ表示などを組み合わせ、プライバシー意識喚起と技術的理解を促します。開発はTypeScript中心で、リアルタイム性と視覚化に重点を置いています。

https://github.com/siinghd/yourinfo

概要

YourInfoは、ウェブサイトがブラウザやユーザー行動からどれだけ多くの情報を取得できるかを示す教育的なデモプロジェクトです。CanvasやWebGL、オーディオの特徴やインストール済みフォントなどのブラウザ指紋情報に加え、マウスの動きやスクロール、入力パターンといった行動データをリアルタイムで収集・分析します。収集したデータはハッシュやスコアリングにより識別子として扱われ、クロスブラウザでも追跡可能なハードウェアに基づく識別の仕組みや、Grok AIを用いたプロファイリング結果をインタラクティブな3Dグローブで可視化し、プライバシーとセキュリティの理解を深めます。

GitHub

リポジトリの統計情報

  • スター数: 63
  • フォーク数: 9
  • ウォッチャー数: 63
  • コミット数: 9
  • ファイル数: 15
  • メインの言語: TypeScript

主な特徴

  • ブラウザ指紋収集：Canvas、WebGL、Audio、フォント情報など多角的に収集
  • クロスブラウザ追跡：ハードウェアや環境要素を利用した識別を試験
  • 行動分析のリアルタイム可視化：マウス、スクロール、タイピングパターンの追跡
  • Grok AIプロファイリング＆3Dグローブ表示：AIによるプロファイル生成と地理的可視化

技術的なポイント

YourInfoはクライアント側で豊富なセンサデータを収集し、リアルタイムにサーバへ送信して解析・可視化する構成が想定されます。ブラウザ指紋収集はCanvasレンダリング差分、WebGLレンダリング特性、AudioContextの生成差、利用可能フォントリスト、ユーザーエージェントやスクリーン情報といった高エントロピー要素を組み合わせてユニークID（ハッシュ）を生成します。行動分析ではマウス座標や移動速度、スクロール挙動、キー入力のタイミングといった動的な特徴量を抽出し、セッションごとの振る舞いプロファイルを作成します。クロスブラウザ追跡は、純粋なソフトウェア情報に依存しないハードウェア寄りの特徴（例：グラフィックスタックの微差、オーディオ処理の差）を用いて複数ブラウザ間で同一と思われるクライアントを突き合わせるアプローチを取ります。Grok AIプロファイリングは、収集データからユーザー傾向や推定属性を生成するための自然言語／MLベースの補助ツールとして機能している可能性が高く、生成されたプロファイルを3Dグローブやダッシュボード上で表示して地域分布や相関を視覚化します。実装面ではTypeScriptを中心に、リアルタイム通信（WebSocketやServer-Sent Events）、高頻度イベント処理（デバウンスやスロットリング）、クライアント側でのプライバシー配慮（データ最小化や同意取得）の取り扱いが重要です。また、可視化にはWebGL/Three.js系のライブラリを使ったインタラクティブな3D表現や、データの匿名化・ハッシュ化処理、APIキー管理のための.env設定（.env.exampleあり）などの運用面の配慮も見られます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .env.example: file
  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • bun.lock: file

…他 10 ファイル

まとめ

プライバシー可視化の教育用デモとして完成度が高く、実装は実践的で学びが多いリポジトリです。

リポジトリ情報：

READMEの抜粋：

YourInfo

Live Demo: yourinfo.hsingh.app

A privacy awareness demonstration that shows what information websites can collect about you through browser fingerprinting and behavioral analysis.

Features

  • Browser Fingerprinting: Canvas, WebGL, audio, fonts, and more
  • Cross-Browser Tracking: Hardware-based identification that works across different browsers
  • Real-time Behavior Tracking: Mouse movements, scroll patterns, typing behavior
  • **Dev…