YourInfo

实时演示：yourinfo.hsingh.app

这是一款隐私意识展示工具，旨在说明网站如何通过浏览器指纹识别和行为分析收集您的信息。

功能特性

• 浏览器指纹识别：Canvas、WebGL、音频、字体等
• 跨浏览器追踪：基于硬件的设备标识，可在不同浏览器间保持一致
• 实时行为追踪：鼠标移动轨迹、滚动模式、打字习惯
• 设备检测：GPU、CPU核心数、内存大小、屏幕分辨率
• AI驱动的用户画像：利用Grok AI从指纹数据中推断个人详细信息
• 交互式3D地球仪：使用CesiumJS实时查看其他访问者
• 隐私状态检测：VPN、广告拦截器、无痕模式检测

技术栈

• 前端：React + TypeScript + Vite
• 后端：Bun + Hono
• 实时通信：WebSocket
• 地球仪：CesiumJS 结合 OpenStreetMap 地图瓦片
• AI：Grok (X.AI) 用于用户画像（可选）
• 缓存：Redis 用于用户画像缓存及独立访客追踪（可选）

快速开始

前置条件

• Bun 运行时
• Redis（可选，用于缓存）
• Grok API 密钥（可选，用于 AI 用户画像）

安装步骤

# 克隆仓库
git clone https://github.com/siinghd/yourinfo.git
cd yourinfo

# 安装依赖
bun install

# 复制环境变量文件
cp .env.example .env

# 编辑 .env 文件以配置您的设置

开发模式

# 启动开发服务器（前端 + 后端）
bun run dev

生产部署

# 构建前端
bun run build

# 启动生产服务器
bun run server/index.ts

环境变量

变量	描述	是否必填
PORT	后端服务器监听端口	是
VITE_WS_PORT	开发环境下的 WebSocket 端口	是
REDIS_URL	Redis 连接 URL	否
GROK_API_KEY	Grok API 密钥（用于 AI 用户画像）	否

收集的信息

硬件信息

• 屏幕分辨率、颜色深度、像素比
• CPU 核心数、内存大小（浏览器限制为 8GB）
• GPU 厂商及型号
• 是否支持触控屏

浏览器信息

• User Agent、平台、语言
• 已安装字体列表
• Canvas 和 WebGL 指纹
• 音频处理指纹
• 支持的编解码器及 DRM 信息

行为数据

• 鼠标速度、加速度、移动轨迹
• 页面滚动深度及方向变化
• 打字速度及按键按住时间
• 标签页切换与焦点停留时间
• 冲动点击及离开意图

网络信息

• IP 地址及地理位置
• 网络连接类型及速度
• WebRTC 获取的本地 IP
• VPN/代理检测结果

部署指南

使用 nginx

server {
    listen 443 ssl http2;
    server_name yourinfo.example.com;

    location / {
        root /path/to/yourinfo/dist;
        try_files $uri $uri/ /index.html;
    }

    location /ws {
        proxy_pass http://localhost:3020;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /api {
        proxy_pass http://localhost:3020;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

使用 PM2

pm2 start bun --name yourinfo -- run server/index.ts

隐私保护建议

本演示旨在提高用户对在线跟踪的认识。为了更好地保护您的隐私：

1. 使用 VPN 隐藏您的 IP 地址
2. 在浏览器中启用“请勿追踪”功能
3. 选择注重隐私的浏览器，如 Firefox 或 Brave
4. 安装防指纹插件
5. 禁用 WebRTC 以防止本地 IP 泄露
6. 使用 Tor 浏览器以获得最高级别的匿名性

许可证

MIT

YourInfo 快速上手指南

YourInfo 是一个隐私意识演示工具，旨在展示网站如何通过浏览器指纹和行为分析收集用户信息。本项目采用 React + TypeScript + Vite 前端与 Bun + Hono 后端架构，支持实时行为追踪及可选的 AI 画像功能。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 运行时：安装 Bun (推荐最新稳定版)。
  • 国内用户可使用镜像加速安装：

    curl -fsSL https://registry.npmmirror.com/bun.sh/install | bash
    

• 可选依赖：
  • Redis：用于配置文件缓存和独立访客追踪（非必须）。
  • Grok API Key：用于启用 AI 驱动的用户画像功能（非必须）。

安装步骤

1. 克隆项目仓库

   git clone https://github.com/siinghd/yourinfo.git
   cd yourinfo
   

2. 安装依赖 使用 Bun 安装项目所需依赖：

   bun install
   

3. 配置环境变量 复制示例配置文件并根据需要编辑：

   cp .env.example .env
   

   在 .env 文件中配置以下关键变量（必填项需设置）：

   • PORT: 后端服务端口
   • VITE_WS_PORT: 开发环境 WebSocket 端口
   • REDIS_URL: Redis 连接地址（可选）
   • GROK_API_KEY: Grok API 密钥（可选，用于 AI 画像）

基本使用

启动开发服务器

运行以下命令即可同时启动前端和后端开发服务：

bun run dev

启动后，访问本地地址（通常为 http://localhost:5173）即可查看演示效果，实时观察浏览器指纹采集、设备检测及行为追踪数据。

构建与生产部署

若需构建生产版本：

# 构建前端资源
bun run build

# 启动生产服务器
bun run server/index.ts

提示：生产环境部署可参考原文档中的 Nginx 反向代理配置或 PM2 进程管理方案。