一、referrerpolicy是什么？
当你在网页上点击一个链接跳转到另一个网站时，浏览器默认会告诉目标网站："嘿，我是从某某页面过来的！"这个信息就是HTTP Referer（注意，虽然拼写是"Referer"，但正确的英文应该是"Referrer"，这是HTTP协议的历史遗留问题）。
但有时候，我们并不希望泄露来源信息，比如：
- 从内部管理后台跳转到外部网站时，不希望暴露后台地址
- 某些安全敏感页面不希望被第三方追踪来源
- 需要减少请求头大小以优化性能
这时候，HTML的referrerpolicy属性就派上用场了！它可以精细控制浏览器发送的Referer信息。
二、referrerpolicy的取值及效果
这个属性支持多个值，每个值的行为略有不同：
<!-- 示例1：完全不发送Referer -->
<a href="https://example.com" referrerpolicy="no-referrer">安全跳转</a>
<!-- 示例2：只发送源站信息（不包含路径） -->
<img src="logo.png" referrerpolicy="origin">
<!-- 示例3：在同源情况下发送完整Referer -->
<script src="analytics.js" referrerpolicy="same-origin"></script>
具体可选值如下表：
| 值 | 行为描述 |
|---|---|
no-referrer |
完全不发送Referer头 |
no-referrer-when-downgrade |
默认值，HTTPS→HTTP时不发送 |
origin |
只发送协议+域名（如https://example.com） |
origin-when-cross-origin |
跨域时只发送origin，同源发送完整URL |
same-origin |
仅同源时发送完整Referer |
strict-origin |
只发送origin，且HTTPS→HTTP时不发送 |
strict-origin-when-cross-origin |
跨域时发送origin，同源发送完整URL，且HTTPS→HTTP时不发送 |
unsafe-url |
总是发送完整URL（即使HTTPS→HTTP） |
三、实际应用示例
案例1：保护隐私的第三方链接
假设你的博客有很多外链，但不想让这些网站知道读者具体是从哪篇文章跳转的：
<!-- 技术栈：纯HTML -->
<p>
推荐阅读：
<a href="https://external-site.com/article"
referrerpolicy="origin">
外部优质文章
</a>
</p>
<!-- 效果：只会发送"https://yourblog.com"，不包含具体文章路径 -->
案例2：安全敏感操作
在银行网站中，从交易页面跳转到客服系统时应该限制Referer：
<!-- 技术栈：HTML + JavaScript -->
<button onclick="window.open('https://support.bank.com', '_blank', 'referrerpolicy=strict-origin')">
联系客服
</button>
<!-- 效果：如果当前页是HTTPS则发送"https://bank.com"，否则不发送 -->
案例3：CDN资源加载优化
使用CDN加载静态资源时，减少不必要的Referer信息可以节省带宽：
<!-- 技术栈：HTML -->
<link rel="stylesheet"
href="https://cdn.example.com/style.css"
referrerpolicy="no-referrer-when-downgrade">
<!-- 默认行为，在HTTPS页面上加载HTTP资源时不发送Referer -->
四、注意事项与最佳实践
兼容性：
- 现代浏览器全面支持，但IE11及以下需要polyfill
- 可以通过
<meta name="referrer">设置全局策略
安全权衡：
unsafe-url可能泄露敏感信息strict-origin-when-cross-origin是推荐的安全默认值
性能影响：
- 减少Referer信息可以降低请求头大小
- 但某些服务（如防盗链）可能依赖完整Referer
服务端配合：
即使设置了no-referrer，某些浏览器仍可能通过Origin头发送源站信息
<!-- 全局设置示例 -->
<meta name="referrer" content="strict-origin-when-cross-origin">
五、与其他技术的协作
结合CSP策略
Content Security Policy也可以控制Referer行为：
<!-- 技术栈：HTML + CSP -->
<meta http-equiv="Content-Security-Policy"
content="referrer strict-origin-when-cross-origin">
与JavaScript的交互
通过document.referrer可以读取当前页面的Referer（受策略限制）：
// 技术栈：JavaScript
console.log(document.referrer);
// 如果上级页面设置了no-referrer，这里将得到空字符串
六、总结
通过精细控制referrerpolicy，我们能在隐私保护、安全性和功能性之间取得平衡。关键点回顾：
- 优先使用
strict-origin-when-cross-origin作为安全默认值 - 敏感操作使用
no-referrer或strict-origin - 注意与服务端策略的配合
- 在CDN等性能敏感场景合理优化
记住：没有放之四海而皆准的策略，根据你的具体场景选择最合适的配置吧！
评论