推荐文章 Go 技术课程下载专题 AI

首页 > 文章 > 前端

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学习网公众号！

相关阅读

更多>

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

JavaScript函数定义及示例详解

502 收藏
文章 · 前端 | 1个月前 |

CSS变量简化按钮悬停效果技巧

501 收藏
文章 · 前端 | 1个月前 |

JavaScript符号类型详解与应用

501 收藏
文章 · 前端 | 1个月前 |

HTML剪贴板复制粘贴怎么用

501 收藏
文章 · 前端 | 1个月前 |

data-*属性详解：HTML数据存储与DOM操作技巧

501 收藏

最新阅读

更多>

文章 · 前端 | 1天前 | 前端 · vite · 运维手册 · 白屏排查 · CDN缓存 · 发布回滚 · React 前端白屏 vite CDN缓存 index.html 发布回滚 JS 404

Vite 前端发布后白屏怎么处理：JS 404、CDN 旧缓存和回滚路径

342 收藏
文章 · 前端 | 2天前 | 前端 · 性能优化 · css · Core Web Vitals · 渲染性能 · 前端渲染性能 CSS性能 CLS content-visibility contain-intrinsic-size Layout

前端长页面渲染卡顿怎么排查：用 content-visibility 跳过离屏区块

430 收藏
文章 · 前端 | 1星期前 | 前端 · 性能优化 · dom · 虚拟列表 · JavaScript 前端滚动性能虚拟列表长列表优化 DOM性能

前端长列表卡顿怎么优化：从全量 DOM 到虚拟列表架构

260 收藏
文章 · 前端 | 1星期前 | 前端 · javascript · AbortController · 表单提交 · AbortController 旧响应覆盖前端重复提交 loading锁 fetch取消按钮防抖

前端按钮重复提交怎么办：loading 锁和 AbortController 最小配方

442 收藏
文章 · 前端 | 1星期前 | 前端 · 缓存 · Service Worker · 白屏 · 发布故障 · 缓存策略前端白屏 Service Worker CacheStorage 资源404 发布回滚

前端发布后白屏复盘：Service Worker 缓存旧入口导致 JS 资源 404

469 收藏
文章 · 前端 | 1星期前 | 异步任务 · 前端开发 · 接口设计 · 后台系统 · 批量导出 · 异步任务文件下载接口设计前端导出状态查询报表导出

前端批量导出接口怎么设计：异步任务、状态查询和下载链接

296 收藏
文章 · 前端 | 1星期前 | 前端开发 · localStorage · 表格配置 · 用户偏好 · 后台系统 · 用户偏好 localStorage 前端表格列配置可见列列宽保存

前端表格列设置刷新后丢失怎么办：可见列、列宽和顺序这样保存

351 收藏
文章 · 前端 | 1星期前 | websocket · 前端开发 · sse · 实时通知 · 方案选型 · websocket 消息推送 EventSource SSE 前端实时通知短轮询

前端实时通知方案选型：短轮询、SSE、WebSocket 怎么选

498 收藏
文章 · 前端 | 1星期前 | 前端 · 接口排查 · 运维手册 · 性能告警 · 前端 AbortController 接口超时 Network瀑布图降级回滚线上告警

前端接口超时告警运行手册：从瀑布图到降级回滚

287 收藏
文章 · 前端 | 1星期前 | 前端 · css · sticky · 布局调试 · CSS Overflow position sticky 滚动容器前端调试吸顶布局

CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位

179 收藏
文章 · 前端 | 1星期前 | 前端 · 静态资源 · cdn · 云部署 · 对象存储静态资源缓存策略 cdn 前端部署容器服务

前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选

433 收藏
文章 · 前端 | 2星期前 | 前端 · 接口联调 · 表单交互 · 重复提交 · 用户体验 · 前端表单提交重复请求 AbortController 幂等键按钮禁用

前端表单重复提交防护工作流：从按钮状态到请求取消和幂等键

374 收藏

课程推荐

更多>

前端进阶之JavaScript设计模式

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

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

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

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

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

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

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

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

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

立即学习 485次学习