本文仅供网络安全学习交流，请勿用于非法用途。

---

一、你点的每一个链接，都在"出卖"你

你有没有想过，为什么有些网站能知道你来自哪个城市？为什么广告总能精准推送你附近的服务？

答案很简单：你的 IP 地址，暴露了你。

当你打开一个网页时，浏览器会向服务器发送请求，这个请求里天然携带了你的 IP 地址。通过 IP 地址，可以查到：

• 你所在的 城市（大致位置，不是精确地址）
• 你的 网络运营商（移动、联通、电信）
• 你用的 设备和浏览器

所以我想了一个问题：如果我做一个看起来人畜无害的网页，发给朋友，能不能查到他的位置？

于是我做了一个——表面上是满屏烟花，背后却悄悄记录了访问者的信息。

在线体验（该链接不会追踪）： https://wcc.xeno.ccwu.cc

获取访问码：https://wcc.xeno.ccwu.cc/_config

---

二、效果演示

获取访问码：https://wcc.xeno.ccwu.cc/_config

访问携带访问码的网址将会记录访问者的信息

发送方看到的：
复制一个链接发给朋友 → 等他点开 → 打开查询页 → 看到他的 IP、城市、设备、访问时间

接收方看到的：
一个漂亮的烟花网页 🎆

就是这么简单。

---

三、技术原理

3.1 整体架构

用户点击链接 → 烟花页面加载 → 前端埋点上报 → Cloudflare Worker 接收 → 写入 D1 数据库
                                                                              ↓
                                               					查询页面 ← API 读取

三个核心角色：

• 前端（Vue 3）：烟花动画 + 埋点上报
• 后端（Cloudflare Worker）：API 接口 + 静态资源托管
• 数据库（Cloudflare D1）：存储访问记录

3.2 访问码机制——每个链接都是唯一的

每个追踪链接有一个专属「访问码」，格式：

6-7位时间戳(base36) + 2位随机字符

例如：kf2a91q8

• 时间戳部分：基于生成时的秒级时间，保证唯一性
• 随机部分：2位 base36 字符，提供 1296 种组合，避免同一秒内碰撞

链接格式：https://你的域名/t/kf2a91q8

3.3 前端埋点——页面打开就记录

当访问者打开 /t/xxx 链接时，前端 JS 会：

1. 从 URL 中提取访问码作为 visitor_id
2. 收集当前页面 URL、标题、设备 UA
3. 通过 navigator.sendBeacon() 发送到后端

// 核心上报逻辑
function postTracking(endpoint, payload) {
  const body = JSON.stringify(payload)
  if (navigator.sendBeacon) {
    const blob = new Blob([body], { type: 'application/json' })
    navigator.sendBeacon(endpoint, blob)
    return
  }
  // 降级方案：fetch + keepalive
  fetch(endpoint, {
    method: 'POST',
    body,
    keepalive: true
  })
}

为什么用 sendBeacon？

• 即使用户立刻关闭页面，请求也能发出去
• 不阻塞页面卸载
• 浏览器自动处理，比 fetch 更可靠

3.4 后端接收——Cloudflare Worker

Worker 的职责：

1. 静态资源托管：把 Vue 打包后的文件通过 ASSETS 绑定直接返回
2. API 处理：接收埋点数据、查询记录
3. IP 提取：从请求头中获取真实 IP

function getClientIp(request) {
  return (
    request.headers.get('CF-Connecting-IP') ||   // Cloudflare 提供
    request.headers.get('True-Client-IP') ||
    request.headers.get('X-Real-IP') ||
    pickFirstIp(request.headers.get('X-Forwarded-For')) ||
    ''
  )
}

CF-Connecting-IP 是 Cloudflare 自动添加的，代表客户端真实 IP，比 X-Forwarded-For 更可靠。

4. 地理位置解析：利用 Cloudflare 内置的 request.cf 对象

const country = request.cf?.country || ''
const city = request.cf?.city || ''

不需要额外的 IP 地理库，Cloudflare 已经帮你做好了。

5. 写入 D1 数据库：

CREATE TABLE click_events (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  visitor_id TEXT NOT NULL,    -- 访问码
  event_type TEXT NOT NULL,    -- 事件类型
  ip_address TEXT,             -- IP 地址
  device_user_agent TEXT,      -- 设备信息
  country TEXT,                -- 国家
  city TEXT,                   -- 城市
  visited_at TEXT NOT NULL,    -- 访问时间
  url TEXT                     -- 访问的完整 URL
);

3.5 查询页面

访问 /_query/访问码 即可查看该链接的所有访问记录：

事件类型	IP 地址	国家/地区	城市	访问时间	设备/浏览器
page_view	223.x.x.x	中国	上海	2026-06-09 14:30	Chrome/Windows

---

四、这个能查到什么？不能查到什么？

✅ 能查到的：

• IP 地址
• 大致地理位置（城市级别）
• 网络运营商
• 设备类型和浏览器
• 访问时间

❌ 不能查到的：

• 精确家庭地址
• 真实姓名
• 手机号码
• 身份证信息

IP 定位的精度通常在城市级别，不可能定位到具体门牌号。不要相信影视作品里"输入 IP 就能定位到你家"的情节。

---

五、如何防范？

1. 不要随意点击陌生链接——这是最根本的
2. 使用代理——隐藏你的真实 IP
3. 使用代理服务器——中间加一层转发
4. 公共 WiFi——暴露的是公共 IP，不是你的家庭网络

---

六、结语

这个项目的核心思路很简单：利用 HTTP 请求天然携带 IP 的特性，通过一个吸引人的页面诱导访问。

技术上没有什么高深的东西，但它提醒我们：在网络世界里，你的每一步都可能被记录。

保护隐私，从不乱点链接开始。

---

🔗 项目开源地址： GitHub - ip-track

仅供学习交流，请勿用于非法用途。使用者需自行承担法律责任。

---

觉得有用？点个 👍 收藏一下，下次不迷路。

注意：浏览器的"无痕模式"只能防止本地留下记录，不能隐藏你的 IP 地址。

---

六、技术栈总结

层级	技术	作用
前端	Vue 3	烟花动画 + 埋点
后端	Cloudflare Worker	API + 静态托管
数据库	Cloudflare D1	存储访问记录
部署	Cloudflare Pages	一键部署

为什么选 Cloudflare？

• 免费额度足够个人使用
• Worker 自带 IP 地理位置解析
• D1 是 Serverless 数据库，不需要管服务器
• 全球边缘节点，访问速度快

---

七、结语

这个项目的核心思路很简单：利用 HTTP 请求天然携带 IP 的特性，通过一个吸引人的页面诱导访问。

技术上没有什么高深的东西，但它提醒我们：在网络世界里，你的每一步都可能被记录。

保护隐私，从不乱点链接开始。

---

项目已开源，欢迎 Star ⭐

仅供学习交流，请勿用于非法用途。使用者需自行承担法律责任。