对跨域资源加载完全失效，因其仅作用于导航类行为（如点击链接），而静态资源请求在html解析早期同步发起，此时meta尚未生效；必须为每个资源标签显式设置referrerpolicy属性，或通过响应头、js调用参数控制。
只在 <meta name="referrer"> 里设策略，对跨域资源请求基本没用——它不控制 <img>、<script></script>、<link> 加载时的 Referer，更不管 JS 发起的 fetch() 或 XMLHttpRequest。
为什么 <meta name="referrer"> 对跨域资源加载完全失效
这个标签只在页面解析后、由 HTML 自动触发的「导航类行为」中起作用，比如用户点击链接、未显式设策略的 <form></form> 提交。但所有静态资源加载（CSS/JS/字体/<img>）都是浏览器在解析 HTML 过程中**同步发起的请求**，此时 <meta> 尚未生效或已被忽略。
常见错误现象包括：
- CDN 图片返回
403 Forbidden，因为 Referer 带了完整路径，而 CDN 只校验 origin - 第三方统计脚本因 Referer 被截断，上报失败或漏埋点
- 用户点击跳转时策略生效，但页面一打开就发出去的
<script src="https://cdn.com/analytics.js"></script>仍带敏感参数
根本原因：资源加载发生在 DOM 构建早期，<meta name="referrer"> 的作用域和时机都错位了。
referrerpolicy 属性必须写在每个资源标签上
要真正控制跨域资源请求的 Referer，必须把 referrerpolicy 直接加在对应元素上，且值大小写敏感、拼错即退化为默认策略 no-referrer-when-downgrade。
实操建议：
-
<img src="https://cdn.com/photo.jpg?x-oss-process=image/resize,p_40" referrerpolicy="origin">—— 防止图床因 Referer 不匹配拒绝服务 -
<script src="https://cdn.com/lib.js" referrerpolicy="strict-origin-when-cross-origin"></script>—— 同域保留路径用于调试，跨域只发 origin -
<link rel="stylesheet" href="https://fonts.googleapis.com/css2..." referrerpolicy="no-referrer">—— 字体请求常被 origin 校验，清空最稳妥 -
<iframe src="https://embed.example.com/widget" referrerpolicy="origin-when-cross-origin"></iframe>—— 控制 iframe 内部向第三方发请求时的 Referer，不是父页面向它发的
注意：<iframe></iframe> 的 referrerpolicy 影响的是 iframe 里 JS 请求的 Referer，和父页面是否能访问 window.frames[0].location 无关。
JS 请求（fetch/XMLHttpRequest）必须靠响应头或调用时指定
前端代码里写的 fetch("https://api.example.com") 完全无视 <meta> 和所有 HTML 属性。Referer 行为由两处决定：
- 后端响应头
Referrer-Policy: strict-origin-when-cross-origin—— 全局生效，覆盖所有本域发起的请求（含 JS） - 调用时传
referrerPolicy选项：fetch(url, { referrerPolicy: "no-referrer" })—— 局部覆盖，优先级高于响应头
性能与兼容性影响：
- Nginx/FastAPI 等后端统一配响应头，比每个
fetch都手动加选项更可持续，也避免漏配 -
strict-origin-when-cross-origin在 Safari 15.4+、Chrome 85+、Firefox 90+ 全支持；旧版 Safari 可降级为origin-when-cross-origin - 不要用
unsafe-url，它会把?token=xxx暴露给第三方
右键“在新标签页中打开”永远绕过所有前端策略
这是最容易被忽略的一点：无论你 <meta> 设得多严、每个 <a></a> 都加了 referrerpolicy="no-referrer"，只要用户右键点击链接选择“在新标签页中打开”，浏览器就**直接忽略所有前端声明**，按自身默认策略（通常是 no-referrer-when-downgrade）发 Referer。
唯一能彻底阻断这种行为的方式是：<a href="https://target.com" rel="noreferrer"></a>。它不仅清 Referer，还隐式启用 noopener，防 window.opener 攻击。
但注意：rel="noreferrer" 只对 <a></a> 和 <area> 生效，不能用于 <img> 或 <script></script> —— 这些仍得靠 referrerpolicy 属性或响应头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
