no-referrer-when-downgrade不能通过设置,因其仅支持no-referrer、origin、unsafe-url三个值,该策略属level 2标准,必须由http响应头referrer-policy或实现。

no-referrer-when-downgrade 不能通过 <meta name="referrer"> 设置,写了也无效。
浏览器会直接忽略 <meta name="referrer" content="no-referrer-when-downgrade">,退回到默认行为——也就是它本该代表的策略,但不是因为你写了这行 meta。
为什么 <meta name="referrer"> 不支持 no-referrer-when-downgrade
W3C 规范明确限定:<meta name="referrer"> 只接受三个值:no-referrer、origin、unsafe-url。拼写错误或用其他值(包括 no-referrer-when-downgrade、strict-origin-when-cross-origin 等)都会被静默忽略。
这个限制是因为 <meta name="referrer"> 是旧版兼容机制,而 no-referrer-when-downgrade 属于 Referrer Policy Level 2 标准,必须由服务端响应头或更现代的 <meta http-equiv="Referrer-Policy"> 控制。
-
<meta name="referrer">和<meta http-equiv="Referrer-Policy">是两个不同机制,属性名不能混用 - 即使你写了
content="no-referrer-when-downgrade",Chrome/Firefox/Safari 都不认 - 开发者工具 Network 标签页里能看到 Referer 字段照常发送,就说明 meta 没生效
想让 no-referrer-when-downgrade 生效,只能靠响应头
这是唯一可靠方式。服务器需在 HTTP 响应中返回:
Referrer-Policy: no-referrer-when-downgrade
常见部署方式:
- Nginx:在 location 或 server 块加
add_header Referrer-Policy "no-referrer-when-downgrade"; - Apache:用
Header set Referrer-Policy "no-referrer-when-downgrade" - Node.js(Express):
res.set('Referrer-Policy', 'no-referrer-when-downgrade') - 静态托管(如 Vercel、Cloudflare Pages):通过 _headers 文件或规则配置
注意:响应头优先级高于任何 <meta>,且对所有请求类型(fetch、img、iframe、a 跳转)都生效。
<meta name="referrer"> 实际能管什么
它只对 HTML 自动触发的资源加载和导航有效,比如:
-
<img src="...">加载图片 -
<link rel="stylesheet">引入 CSS -
<a href="..."></a>点击跳转(非 JS 触发) -
<form></form>提交(未显式设置referrerpolicy)
但它完全不管:
-
fetch()或XMLHttpRequest请求 -
window.location.href = "..."这类 JS 跳转 -
<iframe src="..."></iframe>(得单独写referrerpolicy="...") - 用户右键“在新标签页打开”
如果非要前端控制,no-referrer 是唯一可用 fallback
写成这样是有效的:
<meta name="referrer" content="no-referrer">
但它比 no-referrer-when-downgrade 激进得多——所有请求都不带 Referer,包括 HTTPS→HTTPS 跳转。后果可能包括:
- 分析平台丢失来源路径(如 /login?token=abc → /dashboard)
- CDN 或图片服务因无 Referer 拒绝返回资源(虽然多数已放宽)
- 某些支付回调校验失败(依赖 Referer 白名单)
真正需要精细控制时,别指望 <meta name="referrer">——它只是兜底,不是主力。
referrerpolicy 做局部覆盖,JS 请求手动传 referrerPolicy 选项——单靠一行 meta 解决不了事。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











