HTML的`referrerpolicy`属性：控制浏览器发送Referer头的精确策略与安全考量 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Referrer Policy：控制你的浏览足迹，保护你的用户隐私

大家好，今天我们来深入探讨HTML的referrerpolicy属性。这是一个常常被开发者忽略，但却对用户隐私和网站安全至关重要的属性。它控制着浏览器在发送HTTP请求时，Referer请求头应该包含哪些信息，以及在什么情况下发送。理解并正确配置referrerpolicy能有效地防止敏感数据泄露，提升网站安全性。

1. 什么是Referer头？

在深入referrerpolicy之前，我们先来了解一下Referer头。当用户从一个网页（比如A.com）点击链接访问另一个网页（比如B.com）时，浏览器会自动在发送给B.com的HTTP请求中包含Referer请求头。这个头的信息就是用户来自的网页的URL（A.com）。

Referer头对于很多场景都很有用：

分析来源： 网站可以通过Referer头分析流量来源，了解用户是从哪些网站跳转过来的。
防盗链： 某些资源（比如图片、视频）可以设置只允许从特定网站访问，通过检查Referer头可以防止其他网站盗用资源。
用户体验优化： 根据Referer头的信息，可以提供更个性化的用户体验。

2. Referer头的潜在风险

虽然Referer头有很多优点，但它也存在一些潜在的风险，尤其是在处理敏感数据时：

泄露敏感信息： 如果URL中包含敏感信息（比如用户ID、会话ID、API密钥等），这些信息会被包含在Referer头中，从而泄露给目标网站。
跨站请求伪造（CSRF）： 虽然Referer头本身并不能直接防御CSRF攻击，但它可以作为一种辅助手段，验证请求的来源是否合法。如果Referer头被篡改，可能会导致CSRF防御失效。
隐私泄露： 用户可能不希望自己的浏览历史被跟踪，Referer头可能会暴露用户的浏览行为。

3. referrerpolicy属性：控制Referer头的发送策略

referrerpolicy属性允许开发者精确控制浏览器在发送HTTP请求时，Referer头应该包含哪些信息。它可以应用于以下HTML元素：

<a> (链接)
<area> (图像映射区域)
<img> (图像)
<iframe> (内联框架)
<link> (外部资源链接)
<script> (脚本)

referrerpolicy属性的值可以是以下字符串之一：

值	描述
`no-referrer`	永远不发送`Referer`头。
`no-referrer-when-downgrade`	(默认值) 如果协议降级（例如，从HTTPS到HTTP），则不发送`Referer`头。否则，发送完整的URL作为`Referer`。
`origin`	只发送来源（origin），即协议、域名和端口。例如，如果当前页面是`https://www.example.com/page1.html`，则`Referer`头的值将是`https://www.example.com/`。
`origin-when-cross-origin`	对于同源请求，发送完整的URL作为`Referer`。对于跨域请求，只发送来源。
`same-origin`	对于同源请求，发送完整的URL作为`Referer`。对于跨域请求，不发送`Referer`头。
`strict-origin`	对于同源请求，发送来源（origin）。对于跨域请求，如果协议降级，则不发送`Referer`头。否则，发送来源。
`strict-origin-when-cross-origin`	对于同源请求，发送完整的URL作为`Referer`。对于跨域请求，如果协议降级，则不发送`Referer`头。否则，发送来源。这是推荐的安全策略，因为它在保护隐私的同时，仍然允许网站分析流量来源。
`unsafe-url`	总是发送完整的URL作为`Referer`。这是最不安全的策略，应该避免使用。

4. 代码示例

下面是一些代码示例，展示了如何在不同的HTML元素中使用referrerpolicy属性：

链接：

<a href="https://www.example.com" referrerpolicy="no-referrer">访问Example.com (不发送Referer)</a>
<a href="https://www.example.com" referrerpolicy="origin">访问Example.com (只发送Origin)</a>
<a href="https://www.example.com" referrerpolicy="strict-origin-when-cross-origin">访问Example.com (推荐策略)</a>

图片：

<img src="https://www.example.com/image.jpg" referrerpolicy="no-referrer" alt="Example Image">

iframe：

<iframe src="https://www.example.com/embedded-page" referrerpolicy="origin"></iframe>

使用meta标签设置全局策略：
```
<head>
  <meta name="referrer" content="strict-origin-when-cross-origin">
</head>
```
这个meta标签会设置整个页面的referrerpolicy为strict-origin-when-cross-origin。

JavaScript中动态设置：

const img = document.createElement('img');
img.src = 'https://www.example.com/image.jpg';
img.referrerPolicy = 'origin';
document.body.appendChild(img);

5. 选择合适的referrerpolicy

选择合适的referrerpolicy需要权衡安全性、隐私性和功能性。以下是一些建议：

strict-origin-when-cross-origin (推荐): 这是通常情况下的最佳选择。它在同源请求时发送完整的URL，提供最大的功能性，而在跨域请求时只发送来源，保护用户隐私。如果协议降级，则不发送任何Referer头，进一步提高安全性。
origin: 如果你只需要知道流量来源的域名，而不需要具体的页面URL，可以使用origin。
no-referrer: 如果你完全不想发送Referer头，可以使用no-referrer。但这可能会影响某些网站的功能，例如防盗链。
避免使用 unsafe-url: 除非你有非常特殊的理由，否则应该避免使用unsafe-url，因为它会泄露完整的URL，包括可能包含的敏感信息。

6. 优先级和覆盖规则

referrerpolicy属性的优先级如下（从高到低）：

HTML元素上的referrerpolicy属性
<a>, <area>, <img>, <iframe>, <link>, <script> 元素上的rel="noreferrer" 属性 (等价于 referrerpolicy="no-referrer")
meta 标签中设置的全局策略
浏览器默认策略

也就是说，如果一个<a>标签同时设置了referrerpolicy="origin" 和 rel="noreferrer"，那么rel="noreferrer"会覆盖referrerpolicy="origin"，最终不会发送Referer头。

7. 浏览器兼容性

referrerpolicy属性的浏览器兼容性很好，几乎所有现代浏览器都支持它。你可以通过Can I use网站 (caniuse.com) 查看最新的兼容性信息。

8. 实际应用场景

保护用户隐私： 在包含用户敏感信息的页面上，使用strict-origin-when-cross-origin或origin可以防止敏感信息泄露给第三方网站。
防止API密钥泄露： 如果你的网站使用了API密钥，并且密钥包含在URL中，使用strict-origin-when-cross-origin可以防止密钥泄露给其他网站。
控制第三方嵌入内容的行为： 通过在<iframe>标签上设置referrerpolicy，可以控制第三方嵌入内容的行为，防止它们跟踪用户的浏览历史。
优化广告追踪： 在广告链接上设置referrerpolicy可以控制广告平台获取的Referer信息，帮助用户更好地管理自己的隐私。

9. 测试与验证

如何测试和验证referrerpolicy是否生效呢？

使用浏览器的开发者工具： 打开浏览器的开发者工具（通常按F12键），在Network标签中查看HTTP请求的Referer头。
使用在线工具： 有一些在线工具可以模拟HTTP请求，并显示Referer头的值。
搭建简单的测试服务器： 你可以搭建一个简单的HTTP服务器，接收请求并记录Referer头的值。

例如，使用Node.js可以创建一个简单的服务器：

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true);
  const pathname = parsedUrl.pathname;

  console.log(`Request received for ${pathname}`);
  console.log(`Referer: ${req.headers.referer}`);

  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Referer logged to console.');
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

将这段代码保存为 server.js，然后在命令行中运行 node server.js。访问 http://localhost:3000，然后从另一个页面链接到这个地址，你就可以在控制台中看到Referer头的值。

10. 与其他安全策略的结合

referrerpolicy并不是万能的，它只是安全策略的一部分。为了提高网站的整体安全性，应该将referrerpolicy与其他安全策略结合使用，例如：

HTTPS： 使用HTTPS可以加密HTTP通信，防止中间人攻击。
Content Security Policy (CSP)： CSP可以限制浏览器加载的资源来源，防止跨站脚本攻击（XSS）。
Subresource Integrity (SRI)： SRI可以验证第三方资源的完整性，防止资源被篡改。
SameSite Cookies： SameSite Cookies可以防止跨站请求伪造（CSRF）攻击。

11. 总结

合理使用 referrerpolicy 属性是现代Web开发中保护用户隐私和网站安全的重要一环。通过细致的配置，开发者可以在流量分析、功能实现与隐私保护之间取得平衡。选择合适的策略，并与其他安全措施配合，共同构建一个更安全的网络环境。

Referrer Policy：控制你的浏览足迹，保护你的用户隐私

发表回复 取消回复

发表回复取消回复