img 标签怎么去掉 Referer 请求头？一招搞定防盗链
加载别人服务器上的图片，结果浏览器控制台一片红，图片全裂成小方块。
八成是对方做了防盗链，靠检查 Referer 请求头来挡外站引用。
解决思路很直接：让 <img> 发请求时别带上 Referer。
HTML 早就给了现成的属性，不用动后端。
先搞清楚 Referer 是什么
Referer 是一个 HTTP 请求头，告诉服务器「这个请求是从哪个页面发起的」。
你在 a.com 的页面里引用了 b.com/pic.jpg，浏览器请求这张图时，默认会带上 Referer: https://a.com/xxx。
很多图床、CDN 就是靠它做防盗链：发现 Referer 不是自家域名，直接返回 403 或者一张「禁止盗链」的占位图。
说个冷知识，这个头在 HTTP 标准里拼错了，少了一个 r，正确拼写应该是 referrer。
但属性和策略名用的是正确拼写 referrer，请求头却一直将错就错叫 Referer。
第一次写的时候我也愣了一下，以为自己手抖打错了。
核心方案：给 img 加 referrerpolicy
单张图片去掉 Referer，加一个属性就行：
<img src="https://b.com/pic.jpg" referrerpolicy="no-referrer">referrerpolicy="no-referrer" 的意思是：请求这张图时，完全不发送 Referer 头。
服务器收到的请求里压根没这个字段，防盗链自然就拦不住了。
这是 W3C 的标准属性，Chrome、Firefox、Edge、Safari 现代版本全都支持。
IE 不支持，不过 2026 年了，应该没人还在管它。
整个页面统一处理：meta 标签
如果页面里图片很多，一个个加属性太累，可以在 <head> 里放一行：
<head>
<meta name="referrer" content="no-referrer">
</head>这条策略对整个页面的所有请求生效，包括图片、脚本、AJAX 等。范围更大，但要注意副作用。
两种方式的区别简单对比一下：
| 方式 | 作用范围 | 适用场景 |
|---|---|---|
<img referrerpolicy> |
单个元素 | 只想处理某几张外链图片 |
<meta name="referrer"> |
整个页面所有请求 | 全站图片都来自需绕过防盗链的源 |
我自己的习惯是优先用 img 属性。
页面级 meta 影响面太广，万一你的某个接口在后端靠 Referer 做安全校验，一刀切关掉可能把自己也坑了。
注意，如果你的网站有一些统计脚本、广告脚本，那么一定不能加这个，否则所有的统计和广告都会失效
Referrer-Policy 的取值有哪些
no-referrer 是最彻底的，但不是唯一选项。完整取值这里列全：
| 取值 | 行为 |
|---|---|
no-referrer |
任何情况都不发送 Referer |
no-referrer-when-downgrade |
HTTPS 跳 HTTP 时不发，其余照常（旧版默认值） |
origin |
只发送源（如 https://a.com/），去掉路径和参数 |
origin-when-cross-origin |
同源发完整地址，跨源只发源 |
same-origin |
同源才发，跨源不发 |
strict-origin |
只发源，且 HTTPS 降级到 HTTP 时不发 |
strict-origin-when-cross-origin |
现代浏览器默认值，平衡安全与可用 |
unsafe-url |
始终发送完整地址（不推荐，泄露隐私） |
绕过防盗链选 no-referrer 最稳。如果对方的校验比较松，只是不能接受跨域来源，用 origin 有时也够，但成功率不如直接清空。
实际踩过的坑
去年帮一个静态博客处理外链图片，加了 referrerpolicy="no-referrer" 之后大部分图能出来了，但有几张还是 403。
折腾了快一个小时才搞明白：对方那个 CDN 不光看 Referer，还校验了 User-Agent 和签名参数。这种情况下属性怎么改都没用，纯属人家防得更死。
所以这招的前提是：对方仅靠 Referer 做防盗链。它能解决的范围是有限的，不是万能钥匙。
还有一点容易忽略,动态插入的图片同样吃这个属性：
const img = document.createElement("img");
img.referrerPolicy = "no-referrer"; // 注意 JS 里是驼峰 referrerPolicy
img.src = "https://b.com/pic.jpg";
document.body.appendChild(img);JS 属性名是驼峰的 referrerPolicy，HTML 属性是全小写的 referrerpolicy，别搞混。
常见问题
referrerpolicy 和 meta referrer 冲突时听谁的？
元素级的 referrerpolicy 优先级更高。
如果某张 <img> 单独写了属性，它会覆盖页面 meta 里的设置，只对这一个元素生效。
设了 no-referrer 还是加载不出图片，怎么回事？
说明对方防盗链不只看 Referer。
可能还校验了 Cookie、签名 token、User-Agent 等。这种情况前端搞不定，常见做法是自己搭一个图片代理服务中转。
这个属性安全吗？会泄露隐私吗？
恰恰相反，去掉 Referer 反而更保护隐私，对方拿不到你来自哪个页面。
要警惕的是 unsafe-url，它会把完整 URL（含参数）发出去，可能泄露敏感信息，别用。
移动端浏览器支持吗？
支持。
iOS Safari、Android Chrome 等主流移动浏览器都实现了这个属性，行为和桌面端一致。
小结
去掉 img 的 Referer，记住两个写法就够：单张图用 referrerpolicy="no-referrer"，整页用 <meta name="referrer" content="no-referrer">。
前者更精准，推荐优先用。
但它只对「仅靠 Referer 防盗链」的场景管用。遇到带签名、校验 UA 的硬核防护，老老实实上图片代理。
如果你在绕防盗链时遇到了别的奇葩情况，或者对某个取值还有疑问，欢迎在评论区聊聊～～～
版权声明
未经授权，禁止转载本文章。
如需转载请保留原文链接并注明出处。即视为默认获得授权。
未保留原文链接未注明出处或删除链接将视为侵权，必追究法律责任！
本文原文链接： https://fiveyoboy.com/articles/img-referrerpolicy-remove-referer/
备用原文链接： https://blog.fiveyoboy.com/articles/img-referrerpolicy-remove-referer/