异常教程
HTML DOM referrer 属性（长文解析）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：网页的“数字信封”与来源追踪
在互联网世界中，每个网页访问都像一封寄出的信件，而 HTML DOM referrer 属性 就是这封“数字信封”上的寄件地址。它记录了用户访问当前页面前所在的上一个页面地址，是浏览器提供的核心导航信息之一。无论是分析用户行为、优化网站流量，还是实现安全验证，referrer 属性都扮演着重要角色。本文将从基础概念到高级应用，逐步解析这一属性的功能与实践方法。
一、什么是 referrer 属性？
referrer 属性（也写作 HTTP Referer）是 HTML DOM 中用于获取当前页面来源地址的属性。它属于 document 对象，通过 JavaScript 可直接调用：
console.log(document.referrer);
例如，如果用户从 https://example.com/page1 跳转到当前页面 https://your-site.com/page2，则 document.referrer 的值为 "https://example.com/page1"。
比喻理解：像快递单的“寄件人地址”
可以将 referrer 想象成快递包裹上的寄件人地址：
- 寄件人地址（referrer）：标明包裹的来源地。
- 收件人地址（当前页面 URL）：标明包裹的最终目的地。
浏览器在每次页面跳转时，都会自动记录这一“寄件地址”，但用户或开发者也可通过配置修改或隐藏该信息。
二、referrer 属性的核心特性
1. 数据来源与限制
-
来源类型：referrer 的值可以是以下形式：
- 完整的 URL（如
https://example.com/source-page）。 - 空字符串（当用户直接输入 URL 或通过隐私模式访问时）。
about:blank（当页面通过无来源的跳转生成时）。
- 完整的 URL（如
-
安全性限制：
- 若当前页面协议高于来源页面（如从
http到https），referrer 可能仅包含域名而非完整路径。 - 部分浏览器支持通过
meta标签或 HTTP 头（如Referrer-Policy）控制 referrer 的发送行为。
- 若当前页面协议高于来源页面（如从
2. 与 HTTP Referer 头的区别
虽然名称相似，但 DOM 的 referrer 属性与 HTTP 协议中的 Referer 头存在关键差异：
| 特性 | DOM referrer 属性 | HTTP Referer 头 |
|---------------------|--------------------------------|------------------------------|
| 作用对象 | 浏览器客户端（JavaScript 可读） | 服务器端（随 HTTP 请求发送） |
| 数据可见性 | 可通过 JavaScript 直接获取 | 需通过服务器日志或代码解析 |
| 隐私控制 | 受浏览器设置和网页配置影响 | 完全由浏览器和网络策略决定 |
三、基础用法与代码示例
1. 获取并展示 referrer 信息
通过 JavaScript 可以轻松获取 referrer 值并展示在页面上：
<!DOCTYPE html>
<html>
<head>
<title>Referrer Example</title>
</head>
<body>
<p>您来自：<span id="referrer-display"></span></p>
<script>
document.getElementById("referrer-display").textContent = document.referrer || "直接访问";
</script>
</body>
</html>
运行此代码后，页面会显示用户来源地址；若为空则显示“直接访问”。
2. 判断来源类型
结合条件语句，可实现不同来源的差异化逻辑：
if (document.referrer.includes("search-engine.com")) {
console.log("用户来自搜索引擎");
// 触发广告分析或优化策略
} else if (document.referrer === "") {
console.log("用户直接访问或隐私模式");
}
四、实际应用场景与案例
1. 用户行为分析
案例背景：某电商平台希望分析用户从社交媒体跳转至商品页的转化率。
解决方案：
// 在商品页的 JavaScript 中添加埋点
if (document.referrer.includes("social-media.com")) {
// 向分析服务器发送埋点数据
fetch('/api/track', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
source: 'social',
page: window.location.pathname
})
});
}
通过持续追踪 referrer，可优化广告投放策略。
2. 安全验证与反爬虫
案例背景：防止恶意爬虫直接请求 API 接口。
解决方案：
// 在关键页面的加载阶段检查来源
if (document.referrer !== "https://your-allowed-domain.com") {
alert("非法来源访问，页面功能受限！");
// 可进一步隐藏敏感内容或跳转至错误页
}
五、注意事项与常见问题
1. 浏览器兼容性差异
不同浏览器对 referrer 的处理存在差异，例如：
- Firefox：支持
Referrer-Policy头设置，允许开发者精确控制发送规则（如no-referrer、same-origin）。 - Chrome：默认发送完整 referrer，但可通过隐私设置关闭。
- Safari：在智能跟踪预防（ITP）模式下，可能仅发送域名而非完整路径。
2. 隐私保护与数据准确性
- 用户隐私：部分用户会启用“禁止发送 referrer”功能（如通过浏览器扩展），此时
document.referrer为空。 - 间接跳转问题：若用户通过多个中间页面跳转，referrer 只记录最近一次来源，而非全路径。
六、高级技巧与扩展应用
1. 结合 URL 解析实现深度分析
使用 URL API 解析 referrer 的域名和路径：
const referrer = document.referrer;
if (referrer) {
const parsedUrl = new URL(referrer);
console.log("来源域名:", parsedUrl.hostname);
console.log("来源路径:", parsedUrl.pathname);
}
2. 与服务器端协同工作
通过表单提交或 AJAX 将 referrer 信息发送至后端：
// 在表单提交时添加 referrer 隐藏字段
document.querySelector('form').addEventListener('submit', (e) => {
const hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'referrer';
hiddenInput.value = document.referrer;
e.target.appendChild(hiddenInput);
});
结论：合理利用 referrer 属性提升开发效率
HTML DOM referrer 属性是理解用户行为与优化网页逻辑的重要工具。通过掌握其基础用法、应用场景及注意事项，开发者可以实现：
- 精准分析流量来源，优化广告投放与用户体验；
- 增强安全性，防范非法访问与爬虫攻击；
- 构建动态交互逻辑，根据用户路径调整页面内容。
然而，需注意 referrer 的局限性——它仅反映最近一次来源，且受隐私策略影响。在实际开发中，建议结合其他技术（如 Cookies、Session 或服务器日志）形成完整的追踪体系。
未来，随着浏览器隐私保护功能的加强，referrer 的使用场景可能进一步受限。开发者需持续关注技术演进，探索更合规的用户行为追踪方案。