iframe 技术测试题（含详细答案）

iframe技术测试题（含详细答案）适用人群：前端开发、页面测试、兼容性测试人员考试时长：40分钟满分：100分一、单项选择题（共10题，每题3分，共30分）1.以下关于iframe的核心作用，描述正确的是？（）A.用于优化页面加载速度B.在当前网页中嵌入另一个独立的网页文档C.用于实现页面跳转刷新D.用来定义页面布局样式2.下列哪个属性是iframe用来指定嵌入页面地址的核心属性？（）A.srcB.hrefC.urlD.link3.默认情况下，iframe嵌入页面后，超出容器内容会出现什么效果？（）A.自动裁剪隐藏B.自适应缩小内容C.显示滚动条D.自动拉伸iframe尺寸4.想要隐藏iframe默认的边框，需要设置哪个属性？（）A.border="0"B.frameborder="0"C.border="none"D.outline="0"5.为了防止当前页面被恶意网站嵌套劫持，需要设置哪个响应头？（）A.Content-Security-PolicyB.X-Frame-OptionsC.X-Content-Type-OptionsD.Referrer-Policy6.以下哪种iframe嵌套场景，属于跨域场景？（）A.主页面嵌套下的子页面B.主页面localhost:8080嵌套localhost:8080页面C.主页面嵌套页面D.主页面嵌套不同路由页面7.想要让iframe完全自适应父容器大小，无滚动条、无留白，下列做法最合理的是？（）A.仅设置宽高100%B.设置宽高100%+去除边框+禁止滚动C.仅禁止滚动条D.仅隐藏边框8.iframe标签中，sandbox属性的主要作用是？（）A.提升页面加载速度B.给嵌套页面添加安全限制，防止恶意操作C.实现跨域数据互通D.自适应适配移动端9.同源情况下，主页面无法通过js获取iframe内部的哪项内容？（）A.内部DOM元素B.内部页面CookieC.内部页面完整源码D.内部页面网络请求日志10.以下不属于iframe常见缺点的是？（）A.增加HTTP请求，影响加载性能B.嵌套过多会导致页面层级混乱C.无法嵌入外部网站页面D.部分场景存在安全风险二、填空题（共5题，每题4分，共20分）1.浏览器同源策略中，判断页面是否同源的三个要素是________、________、________。2.开启iframe沙箱模式且不允许任何权限的写法是________。3.跨域场景下，主页面和iframe子页面通信的核心方法是________。4.想要禁止iframe页面显示滚动条，需要设置________属性为no。5.X-Frame-Options中，________表示仅允许自身域名嵌套，________表示禁止所有域名嵌套。三、简答题（共3题，每题10分，共30分）1.简述iframe的优缺点（各答3点即可）。2.简述iframe跨域和同源的区别，以及对应的操作限制。3.项目中使用iframe时，常见的安全风险有哪些？对应的解决方式是什么？四、实操分析题（共1题，20分）现有业务场景：官网首页需要嵌套一个第三方活动页面，要求：1.嵌套页面铺满父容器，无边框、无滚动条；2.限制第三方页面的弹窗、脚本跳转权限，保障主站安全；3.避免当前页面被其他网站恶意嵌套；请写出完整的iframe代码，并逐一说明代码中各属性、配置的作用。详细参考答案一、单项选择题答案及解析1.B解析：iframe的核心功能是行内嵌套独立网页文档，不具备优化加载速度、页面跳转、样式布局的核心作用。2.A解析：iframe通过src属性指定嵌入资源地址；href是超链接标签属性，url、link不属于iframe标准属性。3.C解析：默认状态下，iframe内容超出容器尺寸时，浏览器会自动显示横向或纵向滚动条。4.B解析：frameborder是iframe专属边框属性，设置为0可彻底隐藏默认边框；border样式无法清除iframe原生边框。5.B解析：X-Frame-Options专门用于控制页面是否允许被iframe嵌套，防止点击劫持攻击。6.C解析：域名、协议、端口任意一个不同即为跨域，和域名不同，属于典型跨域场景。7.B解析：仅设置宽高无法彻底适配，需搭配去除边框、禁止滚动，才能实现全屏无留白适配效果。8.B解析：sandbox是沙箱安全属性，可限制嵌套页面的脚本执行、表单提交、页面跳转等权限，提升安全性。9.D解析：同源页面可获取iframe内部DOM、源码、Cookie，无法直接获取页面的网络请求日志信息。10.C解析：iframe核心能力就是嵌入外部页面，其缺点是性能差、层级混乱、存在安全隐患等。二、填空题答案1.协议、域名、端口2.<iframesandbox></iframe>（空sandbox值，开启全部安全限制）3.postMessage4.scrolling5.SAMEORIGIN、DENY三、简答题答案1.iframe优缺点优点：①实现页面模块化拆分，可复用独立页面模块，减少重复代码；②嵌套页面独立运行，不会与主页面的JS、CSS样式冲突；③无需重构主页面，即可快速嵌入第三方页面、表单、视频等资源。缺点：①会增加浏览器HTTP请求次数，拖慢整体页面加载速度；②嵌套层级过多会导致页面结构混乱，不利于维护和SEO收录；③存在跨域、点击劫持等安全风险，兼容性适配成本较高。2.同源与跨域的区别及操作限制同源场景：主页面与iframe子页面协议、域名、端口完全一致。限制：无通信和DOM操作限制，主页面可直接获取、修改子页面DOM、调用子页面方法、读取部分存储信息。跨域场景：主页面与iframe子页面协议、域名、端口任意一项不同。限制：受浏览器同源策略保护，无法直接操作子页面DOM、调用内部方法、读取数据，仅可通过postMessage实现被动数据通信。3.常见安全风险及解决方式①点击劫持：恶意网站嵌套我方页面，诱导用户点击虚假页面，造成信息泄露。解决：配置X-Frame-Options响应头，禁止非法嵌套。②恶意脚本执行：嵌套的第三方页面存在恶意代码，窃取主站数据。解决：添加sandbox沙箱属性，限制脚本、跳转、表单提交权限。③跨域数据泄露：非法页面通过嵌套窃取页面信息。解决：配合CSP安全策略，限制可嵌套的合法域名。四、实操分析题答案完整代码：html

<iframe

src="第三方活动页面地址"

width="100%"

height="100%"

frameborder="0"

scrolling="no"

sandbox="allow-scriptsallow-same-origin"

></iframe>配置说明：1.src：指定需要嵌套的第三方活动页面地址，为核心资源配置；2.width、height100%：让iframe铺满父容器，实现全屏适配效果；3.frameborder="0"：清除iframe默认原生边框，保证页面美观无冗余线条；4.scrolling="no"：禁止页面出现滚动条，满足全屏无滚动的业务需求；5.sandbox权限