现代浏览器强制HTTPS嵌入iframe，HTTP资源会被拦截为Mixed Content；必须通过反向代理或本地测试绕过；sandbox默认禁用所有能力，需显式授权；CSP头优先级高于HTML属性；onload/onerror不可靠，应轮询readyState并设超时。
iframe src 属性必须用 HTTPS 协议才能在现代浏览器加载
HTTP 页面里嵌入 http://example.com 的 iframe，Chrome、Firefox 会直接拦截并报 Mixed Content 错误，控制台显示 Blocked loading mixed active content。这不是 bug，是强制安全策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 源站不支持 HTTPS？只能自己搭反向代理（如 Nginx）把 HTTP 内容转成 HTTPS 响应，再让
iframe指向你的代理地址 - 测试阶段用
localhost或127.0.0.1可绕过部分限制，但上线前必须真实 HTTPS - 别信“加个
allow="clipboard-read"就能解混载”——这个属性不解决协议降级问题
sandbox 属性不是可选配件，而是默认关闭所有能力的保险栓
没加 sandbox 的 iframe，一旦嵌入不可信页面，它就能执行 JS、提交表单、弹窗、访问父页面 DOM——相当于在你页面里开了个任意代码执行入口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 默认写
<iframe sandbox="allow-scripts" src="...">，只开最必要权限；需要跨域通信再加allow-same-origin，但加了这条就等于放弃同源策略保护 -
allow-scripts和allow-same-origin不能共存于沙箱中（除非源完全一致），否则浏览器直接忽略整个sandbox属性 - 想让 iframe 里的按钮调用父页面函数？得配合
window.postMessage，而不是直接parent.xxx()
Content-Security-Policy 头会影响 iframe 加载行为，且优先级高于 HTML 属性
即使你写了 <iframe src="https://a.com">，如果父页面响应头里有 Content-Security-Policy: frame-src 'self'，那 a.com 会被拒绝加载，控制台报 Refused to frame 'https://a.com/' because it violates the following Content Security Policy directive。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查服务器返回的
Content-Security-Policy响应头，确认frame-src或兼容的default-src是否放行目标域名 - 开发时用
meta标签模拟 CSP 测试（<meta http-equiv="Content-Security-Policy" content="frame-src https://trusted.com;">），但注意它无法覆盖服务端下发的头 - 后端框架（如 Express、Django）常默认注入 CSP，容易漏掉
frame-src配置，要单独补全
iframe 加载失败时，onload/onerror 不一定触发，得靠定时轮询 + document.readyState 判断
iframe 的 onload 只在资源成功加载并解析完成时触发；如果目标页 502、超时、或被 CSP 拦截，onload 不触发，onerror 在某些浏览器（如 Safari）里也不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置
iframe的name属性（如name="embed-frame"），然后用document.querySelector('iframe[name="embed-frame"]').contentDocument?.readyState轮询判断 - 加个 10s 超时兜底：
setTimeout(() => { if (iframe.contentDocument?.readyState !== 'complete') console.warn('iframe load timeout'); }, 10000) - 不要依赖
iframe.contentWindow.location.href判断是否加载成功——跨域时该属性直接抛SecurityError
