referrerpolicy属性对有效，但仅控制其内部向第三方发起的请求（如内嵌脚本、图片），不控制父页面加载该iframe时的referer；后者须依赖http响应头referrer-policy全局配置。
referrerpolicy 属性对
给 <iframe></iframe> 加 referrerpolicy，控制的是 iframe 里页面向第三方发起的请求（比如它自己加载的 <img>、<script></script>），不是父页面向这个 iframe 发请求时的 Referer。这点常被误解——父页面加载 iframe 本身的行为，完全不受该属性影响。
常见错误现象：在 <iframe src="https://thirdparty.com/widget.html" referrerpolicy="no-referrer"></iframe> 上加了属性，结果发现第三方 widget 仍能拿到父页面完整 URL，这是因为 widget 是通过 JavaScript 读取 window.parent.location 或 document.referrer 得到的，和 HTTP Referer 头无关。
-
referrerpolicy="no-referrer"确保 iframe 内部资源请求不带 Referer，适合嵌入广告或分析脚本 -
referrerpolicy="origin"更平衡：iframe 里请求第三方 API 时只暴露源站，不泄露路径和 query 参数 - 旧版 Safari（≤15.4）忽略该属性，需配合服务端 Referer 白名单兜底
- 不能写成
<div referrerpolicy="no-referrer"><iframe src="..."></iframe></div>—— 属性必须直接挂在<iframe></iframe>标签上
父页面加载 iframe 时的 Referer 无法用 referrerpolicy 控制
浏览器加载 <iframe src="..."></iframe> 这个动作本身会发送 Referer，而这个 Referer 的行为由父页面的全局策略决定：Referrer-Policy HTTP 响应头 > <meta name="referrer"> > 浏览器默认策略。你在 <iframe></iframe> 标签上设的 referrerpolicy 对它无效。
如果第三方 iframe 提供方要求你隐藏来源，仅靠前端属性做不到。必须后端统一配置响应头，例如 Nginx 中：add_header Referrer-Policy "origin-when-cross-origin";。
- 若父页面响应头设为
strict-origin-when-cross-origin，则 iframe 加载请求的 Referer 是https://your-site.com（不含路径） - 若父页面没配响应头，且用了默认
no-referrer-when-downgrade，HTTPS 页面加载 HTTPS iframe 时 Referer 是完整 URL，含敏感 query 参数 -
<meta name="referrer" content="origin">对 iframe 加载无效，它只影响后续导航（如点击链接）
调试时重点看 Network 面板里的 iframe 主文档请求
验证策略是否生效，不能只检查 iframe 内部的子资源（如图片），而要先定位到 iframe 自身的 HTML 请求（即 src 指向的那个 URL），再看它的 Request Headers 里 Referer 字段值：
- 设了
Referrer-Policy: origin响应头，但请求头里仍是完整 URL → 说明响应头未生效（检查 Nginx/FastAPI 是否真返回了该 header） - 请求头里
Referer为空，但 iframe 页面 JS 报错说拿不到document.referrer→ 正常，因为 JS 读的是当前 iframe 文档的 referrer，不是父页面传来的 - iframe 加载成功，但内部
<img src="https://cdn.example.com/ads.jpg?x-oss-process=image/resize,p_40">返回 403 → 查它自己的请求头，确认是否被 CDN 拒绝，这时才轮到referrerpolicy起作用
真正需要限制 Referer 的场景，得组合使用
单靠 <iframe></iframe> 的 referrerpolicy 只能解决一半问题。实际部署中容易漏掉三层：
- 父页面加载 iframe 时的 Referer → 必须靠后端
Referrer-Policy响应头 - iframe 内部所有主动请求（图片、脚本、fetch）→ 用
referrerpolicy属性或其自身页面的响应头 - 用户在 iframe 里点击跳转到外部链接 → 需在 iframe 内部 HTML 的
<a></a>上加rel="noreferrer"，否则右键新标签页仍走浏览器默认策略
最麻烦的是跨域嵌套 + 动态内容生成的场景：iframe 内容由 JS 渲染，referrerpolicy 只对静态 HTML 生效，动态插入的 <img> 不继承该策略，得靠服务端统一配响应头兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
