在Web开发与数据分析领域，精准获取用户的来源域名是进行流量统计、SEO优化以及安全防护（如防盗链）的基础。获取来源域名最核心且通用的方法是在前端通过JavaScript访问 document.referrer 属性，或是在后端服务器（如Node.js）中读取HTTP请求头中的 Referer 字段，但为了确保数据的准确性与安全性，必须结合正则表达式提取主机名，并充分考虑跨域限制、隐私策略以及HTTPS协议对Referer信息的传递影响。
前端JavaScript获取来源域名的核心实现
在浏览器端，JavaScript提供了原生的 document.referrer 属性，该属性返回跳转到当前页面的上一个页面的完整URL，这是获取来源域名最直接的方式，直接使用该属性往往包含路径、参数等冗余信息,因此我们需要对其进行解析以提取纯域名。
基础解析方法
最稳健的做法是创建一个辅助函数，利用浏览器的 URL API 或正则表达式来提取主机名。URL API 是现代浏览器推荐的标准方法,它能自动处理各种复杂的URL格式。
function getSourceDomain() {
const referrer = document.referrer;
// 如果没有来源（如直接输入网址访问），返回空或特定标识
if (!referrer) return 'Direct/None';
try {
// 使用URL API解析，兼容性较好
const urlObj = new URL(referrer);
return urlObj.hostname;
} catch (e) {
// 降级处理：针对旧版浏览器或不规范的URL字符串
const match = referrer.match(/^https?:\/\/([^\/?#]+)/i);
return match ? match[1] : '';
}
}
console.log(getSourceDomain());
处理特殊情况
在实际应用中，必须考虑到用户是直接访问的情况。document.referrer 为空字符串，专业的统计代码应当区分“直接访问”与“外部链接”，通常将空值标记为 Direct 或（直接流量）,以便后续数据分析时能准确计算跳出率。
后端Node.js获取来源域名的权威方案
虽然前端JS可以获取来源，但前端数据极易被篡改，不具备权威性，对于涉及权限控制、防盗链或计费系统的场景，必须在后端服务器端获取来源域名。
在Node.js（以Express框架为例）中，来源信息存储在请求头的 referer 或 referrer 字段中。
function getSourceDomainFromRequest(req) {
// 获取referer头，注意部分客户端可能拼写为referrer
const referrer = req.headers['referer'] || req.headers['referrer'];
if (!referrer) return 'Direct/None';
try {
// 后端同样使用URL对象进行解析
const urlObj = new URL(referrer);
return urlObj.hostname;
} catch (e) {
return null;
}
}
后端验证的优势在于不可伪造性，浏览器会自动遵循同源策略和跨域规则发送Referer，前端JS无法通过代码修改请求头中的Referer字段,因此后端获取的数据是判断请求真实来源的可信依据。
深入解析：Referrer-Policy 对获取来源的影响
在专业开发中，仅仅知道如何获取是不够的，还必须了解现代浏览器隐私安全策略对Referer的限制。Referrer-Policy 是一个影响来源域名获取成功率的关键因素。
如果来源网站设置了 Referrer-Policy: no-referrer，那么当前页面接收到的 document.referrer 将会是空的，同样，如果设置为 same-origin，只有当来源页面和当前页面同属一个域名时,才能获取到信息。
解决方案与最佳实践：
- 不要完全依赖 Referer： 在构建统计系统时，
document.referrer为空，不要默认一定是直接访问,可能是因为隐私策略被截断。 - 结合UTM参数： 对于重要的营销流量，推广链接应附带 UTM 参数（如
?utm_source=google.com），这种方式不受 Referrer-Policy 影响,是最可控的来源追踪方式。 - 设置合理的策略： 作为网站运营者，若希望下游站点能统计到你的流量贡献，应将你的 Referrer-Policy 设置为
strict-origin-when-cross-origin，这样既能保护路径隐私,又能传递域名信息。
防盗链场景下的来源域名校验
获取来源域名的一个典型应用场景是防盗链，为了防止其他网站直接引用本站的图片或视频资源，消耗服务器带宽,我们需要校验请求的来源域名。
专业的防盗链逻辑如下：
- 获取请求头的
Referer。 - 解析出
hostname。 - 判断该
hostname是否在白名单内（如本站域名或授权的合作伙伴域名）。 Referer为空，通常需要根据业务需求决定是否放行（部分浏览器隐私模式下不发送Referer）。
// 伪代码示例：中间件层面的防盗链
app.use((req, res, next) => {
const referer = req.headers['referer'];
const allowedDomains = ['yoursite.com', 'trusted-partner.com'];
if (referer) {
const sourceDomain = new URL(referer).hostname;
// 检查来源域名是否以白名单域名结尾（处理子域名情况）
const isAllowed = allowedDomains.some(domain =>
sourceDomain === domain || sourceDomain.endsWith('.' + domain)
);
if (!isAllowed) {
return res.status(403).send('Hotlinking not allowed');
}
}
next();
});
常见误区与排错指南
在实施过程中，开发者常遇到“明明是从A站跳转过来，为什么获取不到来源”的问题，除了上述的 Referrer-Policy,还需注意以下两点：
- HTTPS 到 HTTP 的降级： 如果用户从 HTTPS 的安全页面跳转到 HTTP 的非安全页面，现代浏览器（如Chrome）出于安全考虑，默认不会发送 Referer 信息，这是浏览器内置的安全机制，无法通过JS绕过。唯一的解决方案是将目标页面也升级为 HTTPS。
- 跨域与iframe： 如果页面是被嵌入在 iframe 中的，且父页面与子页面跨域，父页面的 URL 可能会被完全隐藏，
document.referrer可能仅显示父页面的地址，甚至为空（取决于sandbox属性）。
获取来源域名看似简单，实则涉及前端API、后端协议、网络安全策略以及浏览器隐私机制等多个层面。核心在于：前端使用 document.referrer 配合 URL API 进行快速解析，用于轻量级统计；后端读取请求头 referer 用于安全校验；同时必须正视 Referrer-Policy 和 HTTPS 升级带来的数据缺失风险，并结合UTM参数构建多维度的流量来源追踪体系。
相关问答
Q1: 为什么有时候 document.referrer 获取到的是空字符串，但用户确实是从其他网站跳转过来的？
A: 这种情况通常由三个原因导致，第一，用户是直接输入网址或通过书签访问（Direct Traffic）；第二，来源网站设置了 Referrer-Policy 为 no-referrer，导致浏览器不发送来源信息；第三，从 HTTPS 页面跳转到 HTTP 页面时，浏览器会剥离 Referer 以防止敏感数据泄露，建议检查链接协议是否一致，并考虑使用 URL 参数作为补充追踪手段。
Q2: 在前端JS中能否伪造或修改 document.referrer 的值？
A: 不能，出于安全原因，document.referrer 是一个只读属性，JavaScript 代码无法对其进行修改或赋值，这意味着前端获取到的来源信息在当前页面环境下是可信的，但需要注意的是，恶意用户可以通过代理工具或直接构造 HTTP 请求包来修改发送给服务器的 Referer 请求头，因此后端的安全逻辑不能仅依赖 Referer，还需配合 Token 或其他验证机制。
希望这篇文章能帮助您彻底掌握JavaScript获取来源域名的技术细节，如果您在实施防盗链或流量统计的过程中遇到任何特殊问题，欢迎在评论区留言,我们一起探讨解决方案。
