HTML5ReferrerPolicy详解与设置教程

ReferrerPolicy的具体取值包括：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、same-origin、strict-origin、strict-origin-when-cross-origin、unsafe-url。

为什么需要控制Referrer信息？

Referer头部虽然看起来不起眼，但它包含了用户从哪个页面跳转过来的信息。在很多情况下，这可能泄露用户的隐私，甚至带来安全风险。比如，用户从一个包含敏感信息的页面跳转到另一个页面，如果Referer头部包含了这个敏感信息，那么目标页面就有可能获取到这些信息。

此外，一些恶意的网站可能会伪造Referer头部，进行钓鱼攻击或CSRF攻击。通过控制ReferrerPolicy，我们可以有效地防止这些安全风险。

如何选择合适的ReferrerPolicy？

选择合适的ReferrerPolicy，需要根据具体的应用场景进行权衡。一般来说，可以遵循以下原则：

• 最小权限原则： 尽可能使用限制性更强的策略，只暴露必要的信息。
• HTTPS优先原则： 优先使用strict-origin-when-cross-origin，它只在HTTPS降级到HTTP时才会不发送Referer。
• 同源策略： 对于同源的请求，可以使用same-origin，它只在跨域请求时才会不发送Referer。
• 特殊场景考虑： 对于一些需要Referer进行统计、分析的场景，可以考虑使用origin或origin-when-cross-origin。

举个例子，如果你的网站是一个电商网站，用户在支付页面跳转到银行页面时，可以使用no-referrer，避免将支付页面的信息泄露给银行。

<a href="https://bank.example.com/pay" referrerpolicy="no-referrer">去支付</a>

或者，如果你的网站需要进行流量统计，可以使用origin，只暴露来源的域名。

<img src="https://analytics.example.com/track.gif" referrerpolicy="origin">

ReferrerPolicy在不同浏览器中的兼容性如何？

ReferrerPolicy的兼容性总体来说还是不错的，主流浏览器都支持。但是，不同浏览器对不同策略的支持程度可能略有差异。在使用ReferrerPolicy时，最好进行兼容性测试，确保在不同浏览器中都能正常工作。

可以通过Can I use网站查询具体的兼容性信息。

此外，一些旧版本的浏览器可能不支持referrerpolicy属性，可以考虑使用标签或HTTP头部进行配置，以提高兼容性。

如何通过HTTP头部设置ReferrerPolicy？

除了在HTML中设置ReferrerPolicy，还可以通过HTTP头部进行配置。HTTP头部的优先级高于HTML标签。

在服务器端，可以通过设置Referrer-Policy头部来控制Referer信息的发送。例如，要设置ReferrerPolicy为strict-origin-when-cross-origin，可以添加以下HTTP头部：

Referrer-Policy: strict-origin-when-cross-origin

这种方式的优点是可以全局控制ReferrerPolicy，不需要在每个HTML页面中都进行配置。

如何使用JavaScript获取和修改ReferrerPolicy？

虽然无法直接通过JavaScript修改页面的ReferrerPolicy，但可以通过JavaScript获取当前页面的document.referrer属性，来获取Referer信息。

需要注意的是，如果ReferrerPolicy设置为no-referrer，或者用户直接在浏览器地址栏中输入URL，document.referrer将返回空字符串。

此外，可以通过JavaScript动态创建标签，并设置ReferrerPolicy属性，来动态修改页面的ReferrerPolicy。但这种方式可能会影响页面的性能，需要谨慎使用。

function setReferrerPolicy(policy) {
  let meta = document.createElement('meta');
  meta.name = "referrer";
  meta.content = policy;
  document.head.appendChild(meta);
}

setReferrerPolicy('origin');

ReferrerPolicy与rel="noreferrer"的区别是什么？

rel="noreferrer"是HTML链接标签的一个属性，用于告诉浏览器在用户点击链接跳转到目标页面时，不要发送Referer头部。它只对特定的链接生效，而ReferrerPolicy是全局性的策略，会影响所有请求的Referer头部。

简单来说，rel="noreferrer"是针对单个链接的，而ReferrerPolicy是针对整个页面的。

<a href="https://example.com" rel="noreferrer">跳转到example.com</a>

使用rel="noreferrer"的优点是可以精确控制哪些链接不发送Referer头部，缺点是需要在每个链接上都进行配置。

ReferrerPolicy对SEO有什么影响？

ReferrerPolicy对SEO的影响是间接的。如果网站依赖Referer进行流量统计、分析，而ReferrerPolicy设置过于严格，可能会导致统计数据不准确，从而影响SEO效果。

例如，如果网站使用no-referrer，那么所有的外部链接都无法被追踪到，从而无法了解哪些网站为网站带来了流量。

因此，在设置ReferrerPolicy时，需要权衡安全和SEO，选择合适的策略。一般来说，可以使用origin或origin-when-cross-origin，只暴露来源的域名，既能保护用户隐私，又能进行流量统计。

到这里，我们也就讲完了《HTML5ReferrerPolicy详解与设置教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！