referrerpolicy 是控制 <img> 请求是否及如何发送 Referer 头的属性；必须设置以应对 CDN/图床因 Referer 校验导致的 403；常用值包括 no-referrer（不发）、origin（仅源站）、strict-origin-when-cross-origin（默认，较保守）等，需注意大小写、浏览器兼容性及 HTTP 响应头覆盖问题。
referrerpolicy 是什么，什么时候必须设
它控制 <img> 发起请求时是否携带 Referer 请求头，以及带什么内容。默认行为是继承父文档（通常是 strict-origin-when-cross-origin），但跨域图片加载时可能被拦截或返回 403 —— 比如某些 CDN 或图床会校验 Referer，不匹配就拒收。这时候就得手动设成 no-referrer 或 origin。
常用 referrerpolicy 值及适用场景
不同值影响请求头内容和兼容性，选错会导致图片不显示或埋点失效：
-
no-referrer：完全不发Referer头，最“干净”，适合防盗链严格、又不想暴露来源的场景； -
origin：只发源站协议+域名+端口（如https://a.com），不带路径，平衡安全与来源识别； -
strict-origin-when-cross-origin：默认值，同站全路径，跨站只发 origin + 协议限制（HTTPS→HTTP 不发），最稳妥但有时太保守； -
unsafe-url：连跨站也发完整 URL，有隐私风险，仅限内网可信环境。
注意：same-origin 和 strict-origin 在 <img> 上基本无效，浏览器会降级处理，别用。
怎么写才生效，容易踩的坑
直接写在 <img> 标签里就行，但有几个硬约束：
立即学习“前端免费学习笔记（深入）”；
- 值必须是字符串字面量，不能用 JS 动态拼接（
referrerpolicy={policy}在 React 中需确保是合法字符串且已挂载）； - 大小写敏感，
No-Referrer或no_referrer都无效，只能是no-referrer； - 如果页面启用了
Referrer-PolicyHTTP 响应头，它会全局覆盖单个<img>的设置（除非设为no-referrer，它优先级最高）； - 旧版 Safari（≤15.4）不支持
referrerpolicy，得靠服务端做 Referer 白名单兜底。
示例：<img src="https://cdn.example.com/photo.jpg" referrerpolicy="origin">
调试 referrerpolicy 是否起作用
打开 DevTools → Network → 点开图片请求 → Headers → 查看 Request Headers 里有没有 Referer，以及它的值是否符合预期：
- 设了
no-referrer还看到Referer，说明被响应头或 meta 标签覆盖了； - 设了
origin却看到完整 URL，可能是浏览器版本太低或策略被忽略； - 图片 403 且响应头含
X-Referer-Rejected类字段，基本能确认是服务端校验失败，得对齐策略。
真正麻烦的是混合部署场景：CDN、图床、前端构建工具各自对 Referer 有不同策略，得一层层查日志和响应头，而不是只改一个属性。
