referrerpolicy属性的作用原理
Referer头的控制与隐私影响
在浏览器与服务器之间的通信中，Referer头信息用于告知目标资源来自哪里的上下文，但这也可能暴露敏感的来源数据。referrerpolicy属性可以统一调整在不同请求场景下发送的Referer信息，从而降低潜在的隐私风险并提升页面的隐私保护水平。
通过对引用来源的可见性进行约束，前端可以在跨域请求、同源请求以及嵌入资源（如图片、脚本、字体等）时，控制共享的来源粒度，避免不必要的来源暴露。
浏览器的默认策略与降级场景
当页面未显式设置referrerpolicy时，浏览器会应用一个或多个默认策略，这些策略在不同浏览器之间可能略有差异，且会在页面降级/升级的过程中发生变化。默认策略的理解对于确保应用在历史版本中的一致性至关重要。
在某些场景下，降级策略会保留部分来源信息，以便分析与调试，但这也可能带来数据泄露的风险。通过显式设置策略值，可以确保在跨来源请求时的一致行为而不被浏览器的随机默认所覆盖。
常用值及其含义
常用值及对比
常见的<referrer policy 值包括 no-referrer、origin、origin-when-cross-origin、same-origin、strict-origin-when-cross-origin 以及 same-origin-when-cross-origin 等。不同值代表在不同情境下发送的Referer信息粒度：
no-referrer：任何情况下都不发送Referer，最大程度保护隐私；
origin：仅发送源（协议+域名+端口），不包含路径和查询参数，适合跨站点聚合分析时的基本来源识别。
在跨域资源请求中的行为
跨域资源请求通常更需要谨慎处理 Referer 信息，因此origin-when-cross-origin和strict-origin-when-cross-origin在跨域场景下提供了更有区分度的策略，既保留有用的来源信息，又减少敏感路径信息的暴露。
综合应用时，可以将全站策略设为same-origin或origin-when-cross-origin，并对关键外部资源再通过逐元素策略进行覆盖，以实现更细粒度的控制。
在前端的实操指南
全局策略的设置（meta标签与HTTP头）
除了逐一元素设置外，全局策略可以通过标签或HTTP头来实现，从而在站点级别统一引用来源行为。常见做法是在文档头部添加元标签：
<meta name="referrer" content="origin-when-cross-origin">也可以通过服务端设置HTTP头来实现全局覆盖：Referrer-Policy头可以直接作用于所有响应，确保无论页面如何嵌套，引用来源都遵循同一策略。
# Nginx 示例
add_header Referrer-Policy "origin-when-cross-origin" always;
# Apache 示例
Header always set Referrer-Policy "origin-when-cross-origin"
逐元素引用策略的应用示例
某些场景需要对特定资源或链接应用不同策略，这时可以在具体标签上添加referrerpolicy属性，例如：
<a href="https://example.com" referrerpolicy="no-referrer">外部链接</a>图片、脚本、字体等资源也同样支持该属性，用以精确控制资源加载过程中的Referer暴露。
常见兼容性与调试要点
在不同浏览器版本之间，少量边缘情况可能导致策略表现不完全一致。开发者应通过浏览器开发者工具(Network 面板)查看Referer头的实际发送情况，以确保策略按预期工作。
调试要点包括检查页面元标签、生效的HTTP头、以及逐元素策略是否覆盖到关键资源，必要时结合 CSP（内容安全策略）来进一步加强对来源的控制。
实际案例与代码示例
HTML示例：在页面中应用 referrerpolicy
下面的示例展示了在不同场景下如何应用 referrerpolicy，确保在跨域请求中只暴露必要的来源信息：
<!-- 全局策略：浏览器请求头级别控制 -->
<meta name="referrer" content="same-origin"><!-- 链接：跨域请求时仅暴露来源的源信息 -->
<a href="https://external.example.com/resource" referrerpolicy="origin">外部资源</a><!-- 图片：不暴露Referer信息 -->
<img src="/images/logo.png" referrerpolicy="no-referrer" />通过以上组合，可以实现对不同资源、不同场景的精细化控制，满足前端安全与隐私要求。
服务器端配置示例（Nginx/Apache）
若希望对整站实施统一策略，下面的服务器端配置示例可以作为起点：
# Nginx 全局策略
add_header Referrer-Policy "no-referrer-when-downgrade" always;
# Apache 全局策略
Header always set Referrer-Policy "same-origin"
针对特殊页面或资源，可以在某些路由内覆盖上述全局策略，从而实现局部策略覆盖的效果。
本文围绕 referrerpolicy属性作用与引用来源控制实操指南，结合前端开发的实际场景，提供从原理到落地的操作路径，帮助你在不影响用户体验的前提下，有效管理引用来源信息的暴露与保护。
