如何在React JS网站中添加referrer标签？referrer policy是什么

首先纠正一个常见拼写误区：HTTP 请求头里的引用来源字段写作 Referer（历史遗留拼写错误，少了一个r），但相关的策略名、标签属性都是正确拼写的 referrer/Referrer-Policy，很多人配置失效就是拼错了字段。
Referrer Policy 是浏览器内置的来源信息管控规则，核心作用是控制页面发起跳转、资源请求、接口调用时，要不要携带、携带多少来源页面的URL信息，平衡用户隐私保护和业务功能（比如来源统计、防盗链、第三方接口校验）的正常运行。
浏览器默认的策略是 no-referrer-when-downgrade，也就是只有HTTPS站点往HTTP站点发请求（安全等级降级）时不携带来源，其余场景都会把当前页面的完整URL（包括路径、查询参数）放在Referer头里发给对方，隐私泄露风险比较高。

• no-referrer：所有场景完全不携带Referer头，对方拿不到任何来源信息
• no-referrer-when-downgrade：浏览器默认值，仅安全降级场景不携带，其余场景带完整来源URL
• origin：所有场景只携带来源的根域信息（协议+域名+端口，比如来源是https://demo.com/article/123?uid=456，只会传https://demo.com，不带路径和参数）
• origin-when-cross-origin：同域名请求带完整URL，跨域请求只带根域信息
• same-origin：同域名请求带完整URL，跨域请求完全不携带Referer
• strict-origin：安全降级场景不携带，其余场景只带根域信息
• strict-origin-when-cross-origin：目前行业通用推荐值，同域请求带完整URL，跨域且无安全降级时带根域信息，跨域降级时完全不携带，兼顾隐私和可用性
• unsafe-url：所有场景都携带完整来源URL，隐私风险极高，无特殊需求不建议使用

配置优先级从高到低为：单个HTML元素配置 > 页面meta配置 > HTTP响应头配置，高优先级规则会覆盖低优先级规则，根据自己的权限选对应方案即可。

1. HTTP响应头配置（全局生效，最推荐） #

直接给站点所有响应加上Referrer-Policy响应头，是兼容性最好、覆盖最全面的方案，常见环境配置示例：

• Nginx：在站点对应的server/location配置块中添加

add_header Referrer-Policy "strict-origin-when-cross-origin";

• Apache：在站点配置或.htaccess文件中添加

Header always set 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()
})

2. 页面meta标签配置（单页生效） #

如果没有服务器/网关配置权限，可以直接在HTML页面的<head>标签内添加meta标签，作用范围是当前页面的所有请求和跳转：

<meta name="referrer" content="strict-origin-when-cross-origin">

注意：这里meta的name属性必须写referrer（双r），写成和HTTP头一样的referer会直接失效，是最常见的配置踩坑点。

3. 单个元素单独配置 #

如果只需要控制某一个链接、某一个资源的Referer携带规则，可以直接给对应标签加referrerpolicy属性，仅对当前元素生效：

<!-- 单个外链不携带任何来源 -->
<a href="https://third-party.com" referrerpolicy="no-referrer">外部站点</a>
<!-- 单个图片请求只带根域 -->
<img src="https://img-cdn.com/demo.jpg" referrerpolicy="origin">

对于老旧浏览器兼容场景，a标签可以用rel="noreferrer"实现和referrerpolicy="no-referrer"一样的效果：

<a href="https://third-party.com" rel="noreferrer">外部站点</a>

• 配置完成后打开浏览器开发者工具，切换到「网络」面板，触发对应请求后查看请求头里的Referer字段值是否符合预期，即可确认配置是否生效
• 如果站点对接了第三方统计、广告联盟、防盗链服务，配置前先确认对方对Referer的校验规则，避免配置过严导致服务异常
• 非必要不要使用unsafe-url策略，避免页面URL中携带的用户敏感参数（如token、身份标识、查询参数）泄露给第三方站点

内容的提问来源于stack exchange，提问作者Anizzama Sub