HTML5设置ReferrerPolicy方法详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML5中如何设置ReferrerPolicy？控制请求中的Refer信息方法》，聊聊，希望可以帮助到正在努力赚钱的你。

控制Referrer信息的原因是保护用户隐私和防止安全风险。1. Referer头部可能泄露敏感信息，如用户来源页面的URL参数；2. 恶意网站可伪造Referer进行钓鱼或CSRF攻击；3. 合理设置ReferrerPolicy可在安全与可用性之间取得平衡。选择策略时应遵循：1. 最小权限原则，使用限制性强的策略；2. HTTPS优先使用strict-origin-when-cross-origin；3. 同源请求使用same-origin；4. 特殊场景如统计使用origin。可通过HTML标签属性、标签或HTTP头部设置，其中HTTP头部优先级最高。兼容性方面主流浏览器支持良好，但旧版本可能不支持需测试。JavaScript无法直接修改策略，但可获取document.referrer或动态创建标签。rel="noreferrer"仅作用于单个链接，而ReferrerPolicy影响整个页面。对SEO的影响在于过于严格的策略可能影响流量统计准确性，建议使用origin或origin-when-cross-origin兼顾安全与统计需求。

ReferrerPolicy控制着浏览器在发送请求时，Referer头部中包含哪些信息。简单来说，就是控制你从哪个页面跳转到目标页面这件事，在HTTP请求中暴露的程度。

控制Referrer信息，本质上是在安全和可用性之间做权衡。完全不暴露来源，虽然安全，但可能影响一些依赖Referer的统计、分析功能。暴露全部信息，虽然方便，但可能泄露用户隐私，甚至带来安全风险。

ReferrerPolicy的使用方式有很多种，可以在HTML的标签中设置，也可以在、、等标签上使用referrerpolicy属性，还可以在服务器端通过HTTP头部进行配置。

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，避免将支付页面的信息泄露给银行。

去支付

或者，如果你的网站需要进行流量统计，可以使用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是针对整个页面的。

跳转到example.com

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

ReferrerPolicy对SEO有什么影响？

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

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

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

以上就是《HTML5设置ReferrerPolicy方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！