第18篇：嵌入外部内容

第18篇嵌入外部内容地图、视频、音乐、天气……网页经常需要展示来自第三方平台的内容。iframe是最常用的嵌入工具但它也是一把双刃剑——用得好丰富体验用不好引入安全风险。学习目标掌握iframe的基本用法和常用属性理解sandbox和referrerpolicy等安全属性学会安全地嵌入地图、视频、社交媒体等内容了解embed和object的适用场景能够评估嵌入第三方内容的安全风险核心知识点一、iframe基础iframeInline Frame在当前页面中嵌入另一个 HTML 页面。iframesrchttps://example.com/page.htmlwidth600height400您的浏览器不支持 iframe。/iframeiframe核心属性属性作用示例src嵌入页面的 URLsrchttps://...width/height尺寸width600title可访问性标题必须title地图frameborder边框HTML5 已废弃用 CSS—allowfullscreen允许全屏allowfullscreenloading加载策略loadinglazysandbox安全沙箱限制见下文referrerpolicy控制 referrer 发送见下文!-- 标准安全写法 --iframesrchttps://www.youtube.com/embed/VIDEO_IDwidth560height315title视频标题allowfullscreenloadinglazy/iframe⚠️title 属性是必须的没有title的 iframe 对屏幕阅读器用户来说是一个黑盒他们不知道里面是什么内容。二、iframe安全属性详解sandbox沙箱限制sandbox限制 iframe 中页面的权限防止恶意代码影响父页面。!-- 最严格的 sandboxiframe 中的页面什么都不能做 --iframesrc...sandbox/iframe!-- 选择性放开权限 --iframesrc...sandboxallow-scripts allow-same-origin allow-popups/iframesandbox取值值允许的行为allow-scripts执行 JavaScriptallow-same-origin被视为同源可访问 localStorage 等allow-popups打开弹出窗口allow-forms提交表单allow-top-navigation导航父页面跳转顶部窗口allow-downloads下载文件安全建议默认使用空sandbox最严格根据需要逐步放开权限。不要同时设置allow-scripts和allow-same-origin这相当于没有沙箱。referrerpolicy控制 referrer!-- 不发送 referrer保护隐私--iframesrc...referrerpolicyno-referrer/iframe!-- 只发送来源域名推荐--iframesrc...referrerpolicyorigin/iframe值发送的 referrerno-referrer不发送origin只发送域名如https://example.comno-referrer-when-downgradeHTTP→HTTPS 时不发送默认三、常见嵌入场景嵌入地图!-- 高德地图嵌入 --iframesrchttps://uri.amap.com/marker?position116.397428,39.90923name天安门width600height450title地图位置loadinglazy/iframe嵌入 Bilibili 视频iframesrc//player.bilibili.com/player.html?bvidBV1xx411c7mDwidth800height600titleBilibili 视频allowfullscreensandboxallow-scripts allow-same-origin allow-popupsreferrerpolicyno-referrer/iframe嵌入 YouTube 视频iframesrchttps://www.youtube.com/embed/VIDEO_IDwidth560height315titleYouTube 视频allowaccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-pictureallowfullscreen/iframeallow属性现代 iframe 使用allow属性替代旧的allowfullscreen等单独属性来声明需要哪些权限iframesrc...allowfullscreen; camera; microphone/iframe权限说明fullscreen全屏camera摄像头microphone麦克风autoplay自动播放媒体geolocation地理位置四、iframe 安全风险点击劫持Clickjacking攻击者将你的页面嵌入到他的页面中用透明层覆盖按钮诱导用户点击。防御方法设置 X-Frame-Options HTTP 响应头服务器端X-Frame-Options: DENY ← 禁止任何页面嵌入 X-Frame-Options: SAMEORIGIN ← 只允许同源页面嵌入使用 CSP frame-ancestors现代推荐Content-Security-Policy: frame-ancestors self https://trusted-site.com数据窃取恶意 iframe 可能通过 JavaScript 窃取用户信息。防御方法使用sandbox限制权限不同源 iframe 默认无法访问父页面同源策略保护不要同时设置allow-scriptsallow-same-origin五、embed和object除了iframe还有两个嵌入外部内容的标签。embed简单嵌入!-- 嵌入 PDF --embedsrcdocument.pdftypeapplication/pdfwidth600height400!-- 嵌入 Flash已淘汰--embedsrcanimation.swftypeapplication/x-shockwave-flashobject功能更丰富的嵌入!-- 嵌入 PDF可指定回退内容--objectdatadocument.pdftypeapplication/pdfwidth600height400p您的浏览器不支持 PDF 预览请ahrefdocument.pdf下载/a。/p/object!-- 嵌入视频 --objectdatamovie.mp4typevideo/mp4width640height360p视频加载失败。/p/object三者对比iframeembedobject用途嵌入完整网页嵌入插件内容PDF/Flash嵌入各种资源回退内容支持不支持支持控制力强sandbox弱中等推荐使用✅ 嵌入网页⚠️ 特定场景⚠️ 需要回退时现代建议嵌入网页 → 用iframe嵌入视频 → 用video标签第08篇嵌入 PDF → 用iframe或链接避免插件依赖嵌入 Flash → ❌ 已淘汰不要使用六、完整示例带地图的联系页面!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title联系我们 - 示例公司/title/headbodyheaderh1联系我们/h1navahref/首页/a/nav/headermainsectionh2公司地址/h2addressp北京市朝阳区 xxx 大厦 10 层/pp电话ahreftel:861012345678010-1234-5678/a/p/address/sectionsectionh2地图导航/h2!-- 嵌入地图使用 sandbox 限制权限 --iframesrchttps://uri.amap.com/marker?position116.397428,39.90923name示例公司width100%height400title公司位置地图loadinglazysandboxallow-scripts allow-same-origin allow-popupsreferrerpolicyno-referrer/iframe/sectionsectionh2宣传视频/h2iframesrc//player.bilibili.com/player.html?bvidBV1xx411c7mDwidth640height360title公司宣传视频allowfullscreenloadinglazysandboxallow-scripts allow-same-origin allow-popupsreferrerpolicyno-referrer/iframe/section/mainfooterp© 2024 示例公司/p/footer/body/html 完整代码文件CODE/18/embed-external.html动手练习练习 1iframe 安全分析判断以下 iframe 是否安全并说明原因!-- A --iframesrchttps://untrusted-site.com/iframe!-- B --iframesrchttps://youtube.com/embed/xxxsandboxallow-scripts allow-same-origin/iframe!-- C --iframesrchttps://partner-site.com/widgetsandboxallow-scriptsreferrerpolicyno-referrer/iframe练习 2创建嵌入页面创建一个页面嵌入以下内容一个地图高德或百度一个 Bilibili 或 YouTube 视频每个 iframe 都有title属性每个 iframe 都有适当的sandbox限制使用loadinglazy延迟加载练习 3CSP 防御配置假设你有一个网站允许被https://partner.com嵌入但禁止其他网站。写出对应的 HTTP 响应头Content-Security-Policy: frame-ancestors ???常见误区 ⚠️误区真相“iframe 可以随意嵌入任何网页”很多网站通过 X-Frame-Options 或 CSP 禁止被嵌入“sandbox 会影响 iframe 中的功能”是的这是设计目的。根据需要逐步放开权限“同时设置 allow-scripts 和 allow-same-origin 很安全”❌ 这几乎等于没有沙箱iframe 中的 JS 可以干任何事“iframe 中的内容和父页面完全隔离”同源 iframe 可以互相访问跨源受同源策略限制“title 属性可有可无”❌ 对可访问性至关重要必须设置“object 可以替代 iframe”两者用途不同不能简单替代“Flash 仍然可用”❌ Flash 已于 2020 年底停止支持绝对不要使用“iframe 加载的内容不会影响页面性能”iframe 会独立加载资源可能阻塞主页面渲染速查卡片 iframe 安全模板iframesrchttps://trusted-site.com/embedwidth600height400title描述性标题loadinglazysandboxallow-scriptsreferrerpolicyno-referrer/iframesandbox 权限速查空 sandbox 最严格JS、表单、弹出窗口等都禁止 常用组合 ├── 纯展示内容sandbox无 JS ├── 需要 JSsandboxallow-scripts ├── 需要 JS 同源sandboxallow-scripts allow-same-origin ⚠️ 慎用 └── 视频播放器sandboxallow-scripts allow-same-origin allow-popups allow-presentation防御点击劫持# 服务器响应头 X-Frame-Options: DENY # 或 X-Frame-Options: SAMEORIGIN # 现代推荐CSP Content-Security-Policy: frame-ancestors self https://trusted-site.comiframe vs embed vs object场景推荐标签嵌入网页iframe嵌入视频video优先或iframe嵌入地图iframe嵌入 PDFiframe或链接需要回退内容objectiframe 安全 checklist设置了title属性可访问性使用sandbox限制权限非必要不放行allow-scriptsallow-same-origin设置了referrerpolicy保护隐私非首屏内容使用loadinglazy服务器端设置了 X-Frame-Options / CSP frame-ancestors扩展阅读MDN: 元素MDN: sandbox 属性MDN: Clickjacking 防御英文OWASP: Clickjacking 防护英文下一步外部内容丰富了页面。进入 第19篇高级语义与微数据学习让机器更懂你的网页内容。