HTML5的ReferrerPolicy怎么用？如何控制Referrer信息？
在Web开发中，当用户从一个页面点击链接跳转到另一个页面时，浏览器通常会在请求头中携带Referer字段，用来标识请求的来源页面。虽然这在流量统计和来源追踪中非常有用，但在某些场景下，完整的Referrer信息可能会导致隐私泄露（如URL中包含Token、用户ID等敏感参数）或安全风险（如CSRF攻击）。
为了解决这些问题，HTML5引入了Referrer Policy（引用策略），允许开发者精确控制请求头中Referer字段的发送规则。本文将详细讲解ReferrerPolicy的使用方法和控制技巧。
一、 什么是 Referrer Policy？
Referrer Policy 是一组规则，它决定了浏览器在发起请求（如点击链接、加载图片、提交表单等）时，是否携带Referer请求头，以及携带多少信息（完整URL、仅域名或不携带）。
二、 Referrer Policy 的可用值
Referrer Policy 提供了多个策略值，以下是常用的选项及其含义：
| 策略值 | 说明 |
|---|---|
no-referrer | 任何情况下都不发送 Referer 头。 |
no-referrer-when-downgrade | （浏览器默认行为）HTTPS -> HTTPS 发送完整URL；HTTPS -> HTTP 不发送；HTTP -> HTTP 发送完整URL。 |
origin | 任何情况下只发送来源的域名（Origin，即协议+主机+端口），不包含路径和查询参数。 |
origin-when-cross-origin | 同源请求发送完整URL；跨域请求只发送域名。 |
same-origin | 只有同源请求才发送完整URL；跨域请求不发送 Referer。 |
strict-origin | 只发送域名；且 HTTPS -> HTTP 时不发送（安全级别更高）。 |
strict-origin-when-cross-origin | （现代浏览器推荐默认值）同源发送完整URL；跨域发送域名；HTTPS -> HTTP 不发送。 |
unsafe-url | 任何情况下都发送完整URL（最不安全，即使 HTTPS -> HTTP 也会暴露路径和参数）。 |
三、 如何使用 Referrer Policy？
控制Referrer信息主要通过以下三种方式实现，它们的优先级从高到低依次为：标签属性 > HTTP响应头 > Meta标签。
1. 使用 HTML Meta 标签（全局控制）
在文档的 <head> 中添加 <meta> 标签，可以为整个页面的所有请求设定默认的Referrer策略。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- 设置整个页面的 Referrer 策略为仅发送域名 --> <meta name="referrer" content="origin"> <title>Referrer Policy Demo</title> </head> <body> <!-- 此处加载的图片和点击的链接都将遵循 origin 策略 --> <a href="https://www.ipipp.com/page">跳转到第三方网站</a> </body> </html>
2. 使用 HTTP 响应头（全局控制）
在服务端配置 Referrer-Policy 响应头，这是后端最常用的全局控制方式，优先级高于 Meta 标签。
Nginx 配置示例：
# 在 Nginx 的 server 或 location 块中添加 add_header Referrer-Policy "strict-origin-when-cross-origin";
Node.js (Express) 示例：
app.use((req, res, next) => {
res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
next();
});3. 使用 HTML 标签属性（局部控制）
如果你只想对特定的链接或资源控制Referrer，可以在具体的HTML标签上使用 referrerpolicy 属性。此方法优先级最高，会覆盖全局设置。
<!-- 对单个链接设置不发送 Referrer --> <a href="https://www.ipipp.com/secret" referrerpolicy="no-referrer">隐私链接</a> <!-- 对单个图片设置仅发送域名 --> <img src="https://www.ipipp.com/avatar.jpg" referrerpolicy="origin" alt="用户头像"> <!-- 对 iframe 设置同源才发送 --> <iframe src="https://www.ipipp.com/widget" referrerpolicy="same-origin"></iframe>
特殊属性：rel="noreferrer"
在HTML5 Referrer Policy出现之前，开发者常使用 rel="noreferrer" 来阻止发送Referrer。它的效果等同于 referrerpolicy="no-referrer"。为了兼容老浏览器，两者可以同时使用：
<a href="https://www.ipipp.com" rel="noreferrer" referrerpolicy="no-referrer">兼容老浏览器的隐私链接</a>
四、 实际应用场景与最佳实践
1. 保护 URL 中的敏感参数
如果你的页面URL包含重置密码的Token、用户ID或搜索关键词（如 https://www.ipipp.com/reset?token=abc123），跳转到第三方时绝对不能暴露完整URL。建议使用 origin-when-cross-origin 或 strict-origin-when-cross-origin，确保跨域时只发送域名。
2. 防止 HTTPS 降级泄露
当你的HTTPS网站链接到HTTP网站时，如果发送了包含敏感信息的Referrer，由于HTTP是明文传输，信息会被中间人截获。使用 strict-origin 或 strict-origin-when-cross-origin 可以在协议降级时自动切断Referrer发送。
3. 满足第三方资源加载要求
某些第三方API或图床（如OAuth认证接口）强制要求请求必须携带正确的Referrer以验证来源，此时需避免全局使用 no-referrer，而是针对特定标签使用 referrerpolicy="origin" 以通过验证。
五、 总结
合理使用 Referrer Policy 是保障Web应用隐私与安全的重要一环。推荐的开发策略如下：
全局默认策略：在服务器或Meta标签中设置
strict-origin-when-cross-origin（这也是现代浏览器的默认值），兼顾了安全性与可用性。敏感外链：针对跳转到外部的不信任站点，在
<a>标签上单独添加referrerpolicy="no-referrer"。避免使用
unsafe-url：除非有极其特殊的业务需求，否则永远不要使用该策略，它会把你的完整路径和参数暴露给任何第三方。
通过以上方法，你就可以在HTML5中灵活、安全地控制Referrer信息了。