HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是 <iframe> 标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信-Golang学习网

当前位置：首页 > 文章列表 > 文章 > 前端 > HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信</span></p></div> <div class="dxSeat_"></div> <div class="articleDetailBox"> <div class="tit"> <h1>HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是 <iframe> 标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信</h1> <div class="info"> <span>2026-05-23 22:56:37</span> <span class="user_view"><i class="view"></i>0浏览</span> <span class="collecbtn user_collection" style="cursor: pointer" data-type="article" data-id="609337"><i class="collect"></i>收藏</span> </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学习网公众号！