悠悠楠杉
网站页面
如何在JavaScript中正确设置Fetch请求的Referer
07/15
一、Referer头的核心作用
Referer（注意拼写错误是HTTP规范的历史遗留问题）是HTTP请求头中的重要字段，主要用于标识请求来源。在以下场景中尤为重要：
- 防盗链系统：图片/视频服务验证请求来源
- 数据分析：统计流量来源渠道
- 安全策略：CSRF防护机制的组成部分
在传统XMLHttpRequest中，浏览器会自动处理Referer头，但Fetch API的开放性带来了更多控制需求。
二、基础设置方法与陷阱
2.1 简单设置方式
javascript
fetch('https://api.example.com/data', {
headers: {
'Referer': 'https://yourdomain.com'
}
})
常见误区：
- 浏览器可能忽略手动设置的Referer头
- 跨域请求时某些头部会被自动过滤
- 违反安全策略可能导致请求被拒绝
2.2 现代浏览器安全限制
自2014年起，主流浏览器实施以下策略：
1. 禁止修改敏感头（如Origin、Cookie）
2. Referer的修改受CORS策略影响
3. HTTPS页面向HTTP资源发送请求时会剥离Referer
三、可靠解决方案
3.1 使用meta标签全局设置
html
<meta name="referrer" content="origin">
可选值包括：
- no-referrer：完全不发送
- same-origin：同源时发送
- strict-origin：HTTPS→HTTPS时发送
3.2 通过fetch参数控制
javascript
fetch(url, {
referrer: 'https://trusted-origin.com',
referrerPolicy: 'strict-origin-when-cross-origin'
})
推荐策略组合：
| 策略模式 | 适用场景 |
|---------|---------|
| no-referrer-when-downgrade | 默认值，HTTPS→HTTP时不发送 |
| strict-origin | 严格保持安全级别一致 |
| unsafe-url | 强制发送完整URL（需谨慎） |
四、高级应用场景
4.1 与CORS配合使用
javascript
// 服务器需设置
Access-Control-Allow-Headers: Referer
Access-Control-Expose-Headers: Referer
// 客户端设置
const res = await fetch(url, {
credentials: 'include',
referrerPolicy: 'same-origin'
});
4.2 动态Referer生成
javascript
function getDynamicReferer() {
return ${window.location.origin}/path/${Date.now()};
}
fetch(url, {
headers: {
'X-Origin-Referer': getDynamicReferer()
}
})
五、调试与验证技巧
查看实际发送的头部：
javascript // 在请求拦截器中打印 navigator.sendBeacon = async (...args) => { console.debug('Sent headers:', args[1]?.headers); };Chrome DevTools验证：
- Network面板查看Request Headers
- 使用
Preserve log选项跟踪重定向
服务器端日志检查：bash
Nginx示例日志格式
logformat refererlog '$remoteaddr - $httpreferer';
六、安全注意事项
- 避免泄漏敏感URL参数
- 在支付等敏感场景建议使用
no-referrer - 定期审计Referer头的使用情况
- 考虑使用替代方案：
- 加密令牌（JWT）
- 会话ID验证
- 时间戳签名
总结：正确设置Fetch的Referer需要理解浏览器安全策略的多层限制。通过组合使用meta标签、fetch参数和服务器配置，可以实现既满足业务需求又符合安全规范的解决方案。在实际项目中，建议优先考虑strict-origin-when-cross-origin策略，它在安全性和功能性之间取得了较好的平衡。
