首页 > 文章 > 前端

HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信</h1> <div class="info"> <p> <span>时间：2026-05-23 22:56:37</span> <span class="user_view"><i class="view"></i>211浏览</span> <span class="collectBtn user_collection" style="cursor: pointer" data-type="article" data-id="609337"><i class="collect"></i>收藏</span> </p> </div> </div> <div class="cont"> <blockquote>HTML iframe 的 `referrerpolicy` 属性是一个常被误解却至关重要的隐私控制机制，它精准限制 iframe 内部发起的子资源请求（如图片、脚本、fetch 调用）所携带的 Referer 信息，而非父页面加载 iframe 时的来源头——这意味着它既不能隐藏父页 URL 给第三方 iframe，也无法阻止 iframe 脚本读取 `document.referrer` 或 `window.parent.location`；合理选用 `no-referrer`（彻底屏蔽，适用于广告/不可信 widget）或 `same-origin`（仅同源透传，适合可控子系统）可有效防止敏感路径和参数泄露，但务必避开 `unsafe-url` 等高风险值，并认清其作用边界：它不是万能的“来源隐身斗篷”，而是专注子资源请求层级的精细化 Referer 策略开关。</blockquote><p><img src="/uploads/20260523/17795480676a11bfa358dc9.png" alt="HTML iframe标签的referrerpolicy？控制内嵌页面来源信息"></p><h3><code>iframe</code> 的 <code>referrerpolicy</code> 控制什么</h3> <p>它只控制 <code>iframe</code> 内部向第三方发起的请求（比如 iframe 里的 <code><img></code>、<code><script></code>、<code><fetch()></code>）所带的 <code>Referer</code> 头，不是父页面加载这个 <code>iframe</code> 时发给它的 Referer。很多人误以为加在 <code><iframe src="https://third.com/widget"></code> 上能防止第三方知道你从哪来——其实不能，那是父页面的请求行为，不受该属性影响。</p> <h3>哪些值常用？<code>no-referrer</code> 和 <code>same-origin</code> 怎么选</h3> <p>常见取值中，<code>no-referrer</code> 最彻底：iframe 里所有外链请求都不带 Referer；<code>same-origin</code> 则只允许同源资源带完整 Referer，跨源请求不发——适合嵌入可控子站但要防第三方追踪的场景。</p> <ul><li><code>no-referrer</code>：适合嵌入广告、统计脚本、用户不可信的第三方 widget，避免泄露当前页面 URL（含路径和 query 参数）</li> <li><code>same-origin</code>：适合嵌入自己团队维护的子系统（如 <code>https://admin.example.com</code>），允许内部通信保留来源，同时阻断对其他域的 Referer 泄露</li> <li>别用 <code>unsafe-url</code>：它会让 iframe 内所有请求（包括降级到 HTTP）都发完整 URL，极易暴露 <code>?token=xxx</code> 类参数</li> </ul><h3>为什么加了没生效？常见失效原因</h3> <p>最常踩的坑是混淆作用对象和触发时机：</p> <ul><li><code><iframe src="https://third.com"></code> 加了 <code>referrerpolicy="no-referrer"</code>，但第三方页面里 <code><img src="https://cdn.evil.com/track.png"></code> 仍带 Referer？说明该属性没起作用——因为 <code>referrerpolicy</code> 只影响 iframe 自身文档上下文发起的请求，而第三方页面的 HTML 是独立解析执行的，它自己的策略才管用</li> <li>父页面用了 <code>Referrer-Policy: strict-origin-when-cross-origin</code> 响应头，但 iframe 内 JS 调用 <code>fetch("https://api.third.com")</code> 仍带 origin？因为响应头不继承，iframe 内 JS 请求遵循 iframe 文档自身的策略（由其响应头或 <code><meta name="referrer"></code> 决定）</li> <li>浏览器 DevTools Network 面板看到 Referer，不代表真实生效——重定向、缓存、HTTPS→HTTP 降级都可能干扰显示，验证必须靠目标服务端原始日志</li> </ul><h3>真正要防“父页来源被 iframe 知道”，该怎么做</h3> <p>如果目标是不让 iframe 里的脚本知道它被谁嵌入（即防止 <code>window.parent.location</code> 或 <code>document.referrer</code> 暴露父页 URL），<code>referrerpolicy</code> 完全不管这事。你需要的是：</p> <ul><li>服务端响应头设置 <code>X-Frame-Options: DENY</code> 或 <code>Content-Security-Policy: frame-ancestors 'none'</code> —— 这能阻止被嵌入，但不解决“已被嵌入后”的隐私</li> <li>在父页面用 <code><iframe sandbox="allow-scripts"></code> 移除默认权限，配合 <code>document.domain</code> 隔离（仅限同域子域）</li> <li>若必须允许嵌入且隐藏来源，唯一可行方式是让 iframe 页面本身不读取 <code>document.referrer</code> 或 <code>window.parent</code>，这属于第三方页面的实现责任，前端无法强制</li> </ul><p>说到底，<code>referrerpolicy</code> 在 <code>iframe</code> 上的作用非常具体：它只约束 iframe 自己发出的子资源请求，不是父子通信的防火墙，也不是来源隐身斗篷。想清楚你要拦的是哪一层流量，再决定加在哪、怎么加。</p><p>本篇关于《HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是 <iframe> 标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信息。Referer 是 HTTP 请求头的一部分，用于告诉服务器当前页面是从哪个页面跳转过来的。通过设置 referrerpolicy，可以控制是否将源页面的 URL 发送给目标页面。🧠 支持的 referrerpolicy 值值行为no-referrer不发送 Referer 头，即不传递来源信息。no-referrer-when-downgrade默认值，仅在从 HTTPS 页面嵌入到 HTTP 页面时不发送 Referer。origin仅发送来源页面的域名（不包括路径和查询参数）。origin-when-cross-origin对同源请求发送完整 Referer，对跨域请求只发送来源域名。same-origin仅在同源情况下发送 Referer，跨》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！
继续访问

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载

相关阅读

更多>

文章 · 前端 | 1年前 | 提升箭头函数函数表达式函数声明 Function构造函数

JavaScript函数定义及示例详解

502 收藏
文章 · 前端 | 2年前 | CSS 优化体验

优化用户界面体验的秘密武器：CSS开发项目经验大揭秘

501 收藏
文章 · 前端 | 2年前 | 图片轮播微信小程序特效

使用微信小程序实现图片轮播特效

501 收藏
文章 · 前端 | 2年前 | sessionStorage 存储能力限制解析

解析sessionStorage的存储能力与限制

501 收藏
文章 · 前端 | 2年前 | 团队合作冒泡事件促进作用

探索冒泡活动对于团队合作的推动力

501 收藏

最新阅读

更多>

文章 · 前端 | 16分钟前 |

JavaScript展开运算符是什么？它有哪些实用场景？

153 收藏
文章 · 前端 | 18分钟前 |

开启视频控件，显示原生播放条

490 收藏
文章 · 前端 | 25分钟前 |

CSS首字下沉怎么调？initial-letter属性详解

302 收藏
文章 · 前端 | 45分钟前 |

Vue 实例数据安全防护指南

333 收藏
文章 · 前端 | 45分钟前 |

手机客服页面制作技巧【指南】

481 收藏
文章 · 前端 | 48分钟前 |

微信小程序WebSocket连接失败解决方法

330 收藏
文章 · 前端 | 53分钟前 |

JavaScript调试技巧：Chrome DevTools高级用法

405 收藏
文章 · 前端 | 1小时前 |

JavaScript数据可视化教程：D3.js为何强大

149 收藏
文章 · 前端 | 1小时前 |

HTML嵌入外部插件方法详解

143 收藏
文章 · 前端 | 1小时前 |

Tailwind控制SVG颜色技巧

140 收藏
文章 · 前端 | 1小时前 |

文字左浮动，图片右浮动怎么设置？

290 收藏
文章 · 前端 | 1小时前 |

Closure Compiler 混淆后内存泄漏排查指南

246 收藏

课程推荐

更多>

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

立即学习 543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

立即学习 516次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

立即学习 500次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

立即学习 487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

立即学习 485次学习