cookie在广告追踪的作用
核心作用是"用户识别"，用户的"身份证"。
过程描述：
- 1.用户访问
new.com，新闻站嵌入【广告联盟】ads.com的图片、链接、脚本 - 2.登录后，用户在
ads.com有了一个生成的cookie值 - 3.
ads.com如果是脚本，可以记录当前用户的【点击】【浏览页地址】... - 4.用户访问
sports.com，同时这个网站如果也是【广告联盟】，也会嵌入ads.com - 5.随着【广告联盟】不断扩大，【用户画像】就越清晰。
类似的记录数据
user_id 行为记录
abc123 访问 news.com/article1，阅读 2分钟
abc123 点击 sports.com 的篮球广告
【其中利用到的cookie特性】
- 持久化的记录 Max-Age
- 自动发送 cookie【这里主要指的是
ads.com的cookie】
所有【广告联盟】的网站都将嵌入ads.com。
随着你在各类资源站的行为积累，广告资源站通过跨站 cookie逐步【构建】出【完整的用户画像】）
你的【搜索习惯】【甚至消费倾向】，在【数据聚合】下变得透明。
行为积累 -> 数据聚合 -> 商业应用【个性化定制/推荐】
这种精准的用户行为收集，正是所谓「个性化推荐」背后的技术本质。
如果不使用 cookie
则需要其他标识符作为替代品。
流程图
sequenceDiagram
Actor user as 用户
participant news as 新闻站（news.com)
participant sports as 体育站（sports.com）
participant shop as 购物站（shop.com）
participant ads as 广告联盟（ads.com）
%% 首次访问（生成 Cookie）%%
Note over user,ads: 🎯 阶段1，首次访问，生成 Cookie
user ->>+ news: 访问新闻站（内嵌广告联盟链接），无 cookie
news ->>+ ads: 请求广告链接
ads -->>- news: 返回广告 + Set-Cookie，uid = 123
news -->>- user: 返回新闻+广告内容（浏览器留下cookie）
Note over user,ads: ✅ cookie生效，收集行为数据
user ->>+ sports: 访问体育页Cookie uid = 123
sports ->>+ ads: 请求广告（uid = 123,like = sports）
ads -->>- sports: 记录用户喜欢体育，返回体育广告
sports -->>- user: 显示体育 + 广告
Note over user,ads: 💰 用户行为 -> 商业应用
user ->>+ shop: 访问购物站 Cookie uid = 123 like = sports
shop ->>+ ads: 请求购物广告
ads ->>- shop: 记录浏览搜索行为，积累数据
shop -->>- user: 显示购物 + 广告
Note over ads: 用户画像构建逐渐完善
ads ->> ads: Cookie uid = 123 like = sports shop = shoots
Note over user: ❗用户处于数据围栏，等待收割
案例
【由于 Chrome 浏览器，测试下方代码需要 本地支持 https 】
switchhost 本地配置
【代理域名】
bash
127.0.0.1 news.com #新闻站
127.0.0.1 ads.com #广告主
127.0.0.1 hacker.com #黑客网站 csrf攻击第三方广告服务
javascript
const Koa = require('koa');
const Router = require('@koa/router');
const cookie = require('koa-cookie').default;
const fs = require('fs');
const https = require('https');
const app = new Koa();
const router = new Router();
app.use(cookie());
// 模拟用户数据库
const userDatabase = new Map();
router.get('/track', (ctx) => {
let userId = ctx.cookies.get('tracker_id');
console.log('🍀🍀🍀🍀当前的userId', userId);
console.log('🍀🍀🍀🍀当前用户数据库', userDatabase)
const isNewUser = !userDatabase.has(userId);
console.log('🍀🍀🍀🍀是否是新用户?', isNewUser ? '是' : '否')
if (isNewUser) {
userId = `user_${Math.floor(Math.random() * 1000000)}`;
ctx.cookies.set('tracker_id', userId, {
httpOnly: false,
sameSite: 'none',
secure: true, // 开发环境禁用，生产环境必须true
maxAge: 365 * 24 * 60 * 60 * 1000, // 1年
domain: 'ads.com' // 允许子域共享
});
userDatabase.set(userId, userId);
}
// 记录访问行为
const userData = userDatabase.get(userId) || {};
userData.lastSeen = new Date();
userData.pageViews = (userData.pageViews || 0) + 1;
userDatabase.set(userId, userData);
// 返回透明像素
ctx.set('Content-Type', 'image/gif');
ctx.body = Buffer.from('R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', 'base64');
console.log(`[Tracker] ${isNewUser ? '新用户' : '老用户'}: ${userId}`);
});
app.on('error', (err) => {
console.log('❌❌❌❌', `服务器错误${err}`);
});
app.use(router.routes());
const port = 8001;
// 加载 mkcert 生成的证书
const options = {
key: fs.readFileSync('../ads.com+4-key.pem'), // 注意文件名变化
cert: fs.readFileSync('../ads.com+4.pem') // 注意文件名变化
};
// 创建 HTTPS 服务器
https.createServer(options, app.callback()).listen(port, '0.0.0.0', () => {
console.log(`第三方追踪服务器【用户习惯跟踪，用于广告推送】运行在 http://ads.com:${port}`);
console.log('🍀🍀🍀🍀', '行为积累 -> 数据聚合 -> 精准推送/商业应用')
});用于实现 ads.com的 cookie 读取/设置。
通过记录此次生成的 cookie，追踪过期时间内的用户行为，收集用户数据。
【测试方式】
curl -v "http://localhost:4001/track"
-vverbose mode，它会显示 HTTP 请求和响应的 完整细节，包括：请求头（Request Headers）、响应头（Response Headers）、连接过程（DNS 解析、TCP 握手等）、错误信息（如果有）
客户端网页
html
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>电商网站</title>
<!-- 隐藏的第三方预连接 -->
<link
rel="preconnect"
href="htts://ads.com:4001"
crossorigin
>
</head>
<body>
<div id="root"></div>
<!-- 开发环境提示 -->
<script>
if (window.location.hostname === 'localhost') {
console.warn('请先在/etc/hosts中添加:\n127.0.0.1 news.com');
}
</script>
</body>
</html>React-App.js
javascript
import React, { useEffect } from 'react';
function App() {
// 模拟用户交互，在购买的时候，发送给【广告联盟】
const handleCheckout = () => {
// 【时机1.用户交互时】暗中发送购买事件
const x = new Image();
x.src = 'https://ads.com:8001/track?action=purchase';
x.crossOrigin = 'use-credentials'; // 允许跨域 Cookie
alert('感谢购买！');
};
// 【时机2.加载完成后】页面加载时暗中追踪
useEffect(() => {
// 方法1：像素追踪
const pixel = new Image();
pixel.src = 'https://ads.com:8001/track?page=home';
}, []);
return (
<div style={{ padding: 20 }}>
<h1>欢迎来到「不知情」电商网站</h1>
<button onClick={handleCheckout}>立即购买</button>
</div>
);
}
export default App;React-index.js
javascript
import { createRoot } from 'react-dom/client';
import App from './App';
const oRoot = createRoot(document.getElementById('root'));
oRoot.render(<App />)package.json
perl
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.9.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-scripts": "^5.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}设置 https
由于chrome浏览器禁止secure: false情况下的三方cookie设置。
安装 https 证书工具
bash
brew install mkcert
mkcert -install # 安装本地 CA 证书到系统信任库通过工具生成
bash
# 生成证书（绑定你的域名）
mkcert ads.com news.com localhost 127.0.0.1 ::1
进行实验
如果我们没有实现上方的 https，会出现下方的 【感叹号】，并且会发现【无法成功设置 cookie】
如果按照步骤，可以发现
识别 cookie 成功。
成功追踪用户
运行结论
基于 Cookie 的用户跟踪是可实现的。
目前来看，只要 Chrome 不完全禁用第三方 Cookie，并且服务端做好 CORS 配置，广告追踪仍然可以像以前一样运作。
1. Chrome 并未彻底禁止第三方 Cookie
谷歌原计划在 2025 年逐步淘汰第三方 Cookie，但最新决定是保留第三方 Cookie，改为让用户自行选择是否允许跨站跟踪。
目前，Chrome 仍然允许第三方 Cookie 运行，只要服务端正确配置 CORS（跨域资源共享），广告商和第三方服务仍然可以像以前一样进行用户追踪。
2. 第三方 Cookie 的未来趋势
Safari 和 Firefox 默认屏蔽第三方 Cookie，但 Chrome 仍然是市场主导（约 65% 份额），因此广告商仍依赖其生态系统。
监管压力（如英国 CMA） 迫使谷歌调整策略，避免因垄断问题被迫拆分广告业务。
3. 广告商如何应对？
短期：继续使用第三方 Cookie + CORS，确保跨域请求正常。
长期：强化第一方数据（如用户登录、会员系统）