必须使用HTTPS协议、设置sandbox="allow-scripts"、添加title属性、用CSS控制尺寸、禁用滚动条、移动端加loading="lazy"，并注意目标页CSP响应头限制。
直接用 <iframe> 标签就能嵌入外部网页，但不加控制会出一堆问题：加载失败、布局错乱、跨域拦截、安全风险——不是写了 src 就算完事。
必须写 src，且协议必须是 HTTPS
现代浏览器（Chrome/Firefox/Safari）会直接拦截 HTTP 资源的 <iframe> 加载，控制台报 Blocked loading mixed active content。这不是 bug，是强制策略。
- 本地开发时用
http://localhost或http://127.0.0.1可临时绕过，但上线前必须真实 HTTPS - 目标站没 HTTPS？只能自己搭 Nginx 反向代理，把
http://target.com映射成你域名下的https://your.com/proxy/target -
src="about.html"这类相对路径可以，但必须在 HTTP 服务器（如 nginx、Vite dev server）下运行；file://协议下多数浏览器会拒绝加载
尺寸别用 HTML 属性，改用 style + CSS 控制
width="100%" height="400" 这种写法容易被父容器挤压、响应失效，且无法配合 aspect-ratio 或 max-width。
- 推荐写法：
style="width: 100%; height: 500px; border: none;" - 全宽自适应 + 防拉伸：
style="width: 100%; max-width: 800px; aspect-ratio: 16/9;" - 禁滚动条别用已废弃的
scrolling="no"，改用style="overflow: hidden;" - 移动端要加
loading="lazy"，避免首屏渲染卡顿
不加 sandbox 就等于开后门
没设 sandbox 的 <iframe>，一旦嵌入不可信页面，它就能执行 JS、读取 Cookie、弹窗、提交表单、甚至尝试访问父页面 DOM。
立即学习“前端免费学习笔记（深入）”；
- 默认最安全写法：
sandbox="allow-scripts"—— 只允许脚本执行，其他全禁 - 需要跨域通信才加
allow-same-origin，但注意：它和allow-scripts共存时，仅当 src 与父页同源才生效，否则整个sandbox属性被浏览器忽略 - 别加空
sandbox=""，那等于完全隔离（连脚本都不让跑），多数第三方内容直接白屏 -
referrerpolicy="no-referrer"建议加上，防止泄露来源页 URL
title 不是可选装饰，而是可访问性刚需
屏幕阅读器靠 title 告诉用户“这个框里是什么”，比如 title="百度地图位置信息" 比 title="地图" 更有用；漏掉它，WCAG 合规性直接不达标。
-
title必须写，且需具体描述内容，不能是空字符串或占位符（如"iframe"） - 不要依赖
alt——<iframe>没有alt属性，那是<img>的 - 如果目标页返回了
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，再怎么配<iframe>都会白屏，控制台报错明确提示来源
真正麻烦的从来不是怎么写那一行 <iframe>，而是得同时盯住协议、CSP 响应头、沙箱权限、可访问性要求和 fallback 行为——少一个，线上就可能静默失败。
