referrerpolicy属性必须显式写在<img>标签上才生效,否则走默认策略no-referrer-when-downgrade;常用值包括no-referrer(不发Referer)、origin(只发协议+域名+端口)、strict-origin-when-cross-origin(同源发完整URL、跨源仅发origin、HTTPS→HTTP不发),大小写敏感且需规避浏览器兼容性及服务端响应头覆盖等问题。

referrerpolicy 属性必须显式写在 <img> 标签上才对这张图的请求生效,不设就走浏览器默认策略(no-referrer-when-downgrade),而这个默认值在跨域时会发完整 URL,可能泄露 query 参数里的 token、user_id 等敏感信息。
哪些值能用,又分别发什么 Referer?
浏览器只认特定字符串,大小写敏感,拼错或加空格直接忽略:
-
no-referrer:请求头里彻底没有Referer:行 -
origin:只发协议+域名+端口,比如https://a.com,路径和查询参数全砍掉 -
strict-origin-when-cross-origin:同源请求发完整 URL;跨源只发origin;HTTPS → HTTP 时不发 —— 这是目前最平衡安全与兼容性的选择 -
no-referrer-when-downgrade:默认值,HTTPS → HTTP 不发,但 HTTPS → HTTPS 跨域仍发完整 URL,隐私风险高 -
unsafe-url:连 HTTP 页面也发完整 URL(含路径、查询参数),生产环境禁用
别用 same-origin 或 strict-origin,<img> 上它们会被浏览器静默降级,行为不可控。
为什么设了却没效果?常见失效原因
不是写了就一定管用,这几个硬约束常被忽略:
立即学习“前端免费学习笔记(深入)”;
- 值必须是字符串字面量:
referrerpolicy="origin"✅,referrerpolicy={policy}(React 动态绑定)❌,除非确保挂载后 DOM 已更新且值合法 - 服务端响应头
Referrer-Policy会全局覆盖,除非你设的是no-referrer(它优先级最高) - 旧版 Safari(≤15.4)不支持该属性,得靠 CDN 或图床服务端配 Referer 白名单兜底
- 如果图片 403 且响应头带
X-Referer-Rejected,说明服务端校验失败,前端策略再对也没用,得对齐服务端接受的 origin 或关校验
怎么验证 referrerpolicy 真生效了?
不能只看页面是否显示图片,得查真实请求头:
- 打开 DevTools → Network → 找到对应图片请求 → 点开 → Headers → 查
Request Headers区域 - 设了
no-referrer却看到Referer:行 → 被响应头或<meta name="referrer">覆盖了 - 设了
origin却看到https://a.com/path?x=1→ 浏览器版本太低,或策略被忽略(比如用了无效值) - 图片加载成功但 Referer 是空或不符合预期 → 服务端可能做了重定向,第二跳请求不继承原
referrerpolicy,得在重定向目标页自己再设
真正关键的不是“有没有 Referer”,而是“它包含什么”——尤其当 URL 带临时 token 或用户标识时,少发一个字符都可能绕过防盗链或暴露身份。


















