img标签的referrerpolicy必须显式设置为小写字符串字面量（如origin）才生效，否则走默认no-referrer-when-downgrade，跨域时仍发送含敏感参数的完整URL；它仅作用于该次请求，不继承或响应头策略，且旧版Safari（≤15.4）不支持。
img 标签的 referrerpolicy 必须显式写，否则不生效
浏览器不会自动继承全局策略或 <meta name="referrer"> 的设置，<img alt="如何在HTML中使用img标签的referrerpolicy属性保护隐私" > 请求在 HTML 解析早期就发出了，此时 <meta> 还没被读取。不加 referrerpolicy 属性，就走默认值 no-referrer-when-downgrade——跨域 HTTPS 图片仍会把完整 URL（含 ?token=xxx 或 /admin/user/123）作为 Referer 发出去。
常见错误写法：<img src="https://cdn.com/photo.jpg" alt="如何在HTML中使用img标签的referrerpolicy属性保护隐私" >（没设属性）、<img src="..." referrerpolicy="{policy}" alt="如何在HTML中使用img标签的referrerpolicy属性保护隐私" >（React 动态绑定未渲染完成）、referrerpolicy="Origin"（大小写错误，被静默降级）。
正确写法必须是：<img src="https://cdn.com/photo.jpg" referrerpolicy="origin" alt="如何在HTML中使用img标签的referrerpolicy属性保护隐私" >，且值为小写字符串字面量。
选 origin 还是 strict-origin-when-cross-origin？
origin 和 strict-origin-when-cross-origin 都能避免泄露路径和查询参数，但行为有关键差异：
立即学习“前端免费学习笔记（深入）”；
-
origin：同源、跨源都只发https://a.com，简单粗暴，适合 CDN 字体、埋点图等对来源路径完全无依赖的资源 -
strict-origin-when-cross-origin：同源发完整 URL（利于内部监控调试），跨源只发origin，HTTPS→HTTP 时彻底不发——当前 Chrome/Firefox 默认值，推荐作为多数站点的起点 - 别用
same-origin或strict-origin：<img alt="如何在HTML中使用img标签的referrerpolicy属性保护隐私" >上它们会被浏览器静默降级，行为不可控 - 禁用
unsafe-url：生产环境绝对不要用，它强制发送带参完整 URL
为什么图片 403 了，或者 Referer 没按预期裁剪？
设了属性却失效，往往不是前端写错了，而是被其他机制覆盖或服务端不认：
- 服务端响应头
Referrer-Policy会全局覆盖，除非你设的是no-referrer（它优先级最高） - 旧版 Safari（≤15.4）根本不支持该属性，得靠图床或 CDN 配白名单兜底
- CDN 返回 403 且带
X-Referer-Rejected头？说明它校验 Referer，但只接受完整 URL 或特定 origin，而你设的是origin→ 需对齐服务端规则 - 图片加载成功但 Referer 不符预期？检查是否发生了重定向——第二跳请求不继承原
referrerpolicy，得在重定向目标页自己再设
怎么验证 referrerpolicy 真起作用了？
不能只看图片有没有显示，必须查真实网络请求头：
- 打开 DevTools → Network → 找到对应图片请求 → 点开 → Headers → 查 Request Headers 区域的
Referer行 - 设了
no-referrer却看到Referer:行 → 被响应头或<meta>覆盖了 - 设了
origin却看到https://a.com/path?x=1→ 浏览器版本太低，或用了无效值（比如拼错、大小写错） - 注意：右键“在新标签页打开”图片链接时，
referrerpolicy完全不生效，那是导航行为，由<a></a>标签控制
最易被忽略的一点：这个属性只影响这张图的**单次请求**，不控制后续 JS 动态创建的 Image 实例或 fetch() 加载行为——那些得靠响应头或 JS 参数控制。
