iframe跨域通信必须用postMessage，因同源策略禁止直接DOM访问，document.domain已废弃；需双方约定结构化消息格式，严格校验event.origin和event.source，禁用"*"targetOrigin，并配合sandbox最小权限隔离。
iframe跨域通信必须用 postMessage，别试 document.domain
同源策略下 iframe 与父页无法直接访问对方 DOM，强行读取 window.frames[0].contentWindow.document 会触发 SecurityError: Blocked a frame with origin "xxx" from accessing a cross-origin frame。document.domain 在现代浏览器中已被废弃（Chrome 88+、Firefox 79+ 完全移除），且仅适用于子域名相同场景，实际兼容性极差。
正确做法是双方约定消息格式，用 window.postMessage() 发送，主页面用 window.addEventListener('message', handler) 接收，并严格校验 event.origin：
// iframe 内部
window.parent.postMessage({ type: 'HEIGHT_UPDATE', height: 420 }, 'https://yourdomain.com');
// 主页面
window.addEventListener('message', (e) => {
if (e.origin !== 'https://trusted-iframe.com') return;
if (e.data.type === 'HEIGHT_UPDATE') {
document.getElementById('myIframe').style.height = e.data.height + 'px';
}
});
- 永远不要用
'*'作为 targetOrigin，否则任何站点都能向你的页面发消息 - 接收方必须检查
e.source是否为预期 iframe，避免被伪造消息劫持 - 消息体建议用结构化对象，而非原始字符串，便于扩展和类型判断
sandbox 属性不加等于裸奔，尤其加载第三方内容时
嵌入广告、统计脚本、用户生成内容等不可信资源时，sandbox 是唯一有效的隔离手段。不加 sandbox，iframe 内脚本可执行任意 JS、提交表单、弹窗、甚至发起 CSRF 请求——这比 XSS 更隐蔽。
常见错误是只写 sandbox="allow-scripts" 却漏掉 allow-same-origin 的后果：一旦加上该值，iframe 就获得同源权限，能绕过所有沙箱限制，相当于没开 sandbox。
立即学习“前端免费学习笔记（深入）”；
- 最小权限原则：默认空值
sandbox=""，再按需添加allow-scripts、allow-forms等白名单 - 若需脚本但禁止弹窗，就别加
allow-popups；若不需要表单提交，就别开allow-forms -
allow-top-navigation极度危险，允许 iframe 修改顶层页面 URL，常被用于钓鱼攻击
iframe 高度自适应不能靠 onload，得监听内部 resize 或 DOM 变化
iframe.onload 只在初始加载完成时触发一次，但 iframe 内容可能动态展开（如折叠菜单展开、图片懒加载后撑高、AJAX 渲染新内容），此时高度就错位了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
可靠方案是让 iframe 内部主动通知父页：“我变高了”。常用两种触发时机：
- 监听
window.resize（适合响应式布局变化） - 用
MutationObserver监听 body 高度变化或关键节点插入（适合 SPA 动态渲染）
示例（iframe 内部）：
const observer = new MutationObserver(() => {
const h = document.body.scrollHeight;
window.parent.postMessage({ type: 'RESIZE', height: h }, '*');
});
observer.observe(document.body, { childList: true, subtree: true });
注意：'*' 在这里可接受，因为消息仅含高度数值，无敏感信息；但生产环境仍建议指定目标 origin。
loading="lazy" 不是万能的，某些 iframe 必须 eager 加载
loading="lazy" 对多数嵌入内容有效（如地图、视频），但以下场景必须设为 eager：
- 登录/支付类 iframe（如微信扫码登录、支付宝支付弹窗），延迟加载会导致用户点击后白屏卡顿
- 需要首次渲染即交互的组件（如客服聊天窗口、实时数据看板）
- SEO 关键内容（Googlebot 目前对 lazy iframe 内容索引能力有限）
另外，loading="lazy" 在 Safari 15.4+ 才支持，旧版 Safari 和部分安卓 WebView 会忽略该属性，降级为默认 eager 行为——所以不能依赖它做功能兜底。
真正容易被忽略的是：iframe 的 src 值为空字符串或 about:blank 时，loading 属性完全失效，浏览器会立即加载。务必确保 src 是真实 URL。
