srcdoc必须配合sandbox属性才生效，单独使用会被浏览器忽略；sandbox=""启用严格限制，需显式添加allow-scripts等权限，且srcdoc中内联script默认不执行，相对路径资源易404，srcdoc优先级高于src。
srcdoc 属性必须配合 sandbox 使用才生效
单独写 srcdoc 不会渲染任何内容，浏览器会直接忽略它。只有当 <iframe> 同时设置了 sandbox 属性（哪怕值为空），srcdoc 才会被当作内联 HTML 解析并渲染。
常见错误是只写：<iframe srcdoc="<p>Hello</p>"></iframe>
结果页面上什么也不显示——因为没加 sandbox。
-
sandbox=""是最严格模式：禁用脚本、表单提交、插件、弹窗、跨域请求等 - 如需启用某能力，可显式添加权限，例如
sandbox="allow-scripts allow-same-origin" - 注意：
allow-same-origin会让srcdoc内容获得与父页面同源的权限，可能破坏沙箱隔离，慎用
srcdoc 中的 script 标签默认不执行
即使开了 allow-scripts，srcdoc 里内联的 <script> 也不会自动运行——这是浏览器的安全设计。必须手动触发，比如用 document.write() 或动态创建 script 元素。
示例（在 srcdoc 中）：<script>document.write("<p>Rendered</p>")</script>
这个能生效，因为 document.write() 是同步执行的；但下面这行不会运行：<script>setTimeout(() => console.log('nope'), 0)</script>
立即学习“前端免费学习笔记（深入）”；
- 所有事件监听器（如
onclick属性）在sandbox下默认被禁用，除非明确加allow-scripts -
srcdoc中的相对路径资源（如<img src="logo.png">）会以about:blank为基准解析，404 是常态，建议用 data URL 或绝对路径
与 iframe src 冲突时 srcdoc 优先级更高
如果同时写了 src 和 srcdoc，浏览器会忽略 src，只渲染 srcdoc 的内容。这点常被误认为“加载失败回退”，实际是强制覆盖。
- 调试时若发现
srcdoc没生效，先检查是否拼错了属性名（比如写成srcDoc或src-doc） - 服务端返回的 HTML 字符串中若含未转义的双引号，会导致整个
srcdoc值被截断，务必对内容做 HTML 实体编码或使用单引号包裹属性值 - Chrome 和 Firefox 支持良好，Safari 对
srcdoc中的 base 标签解析有偏差，避免依赖<base href>
安全边界其实很薄：sandbox 不等于完全隔离
srcdoc + sandbox 看似牢靠，但一旦开了 allow-scripts，就等于给了内联代码执行权；再配上 allow-same-origin，就能读写父页面 DOM、窃取 Cookie、发起 CSRF 请求。
- 真实业务中，尽量避免组合
allow-scripts+allow-same-origin - 若必须执行脚本，优先用
postMessage与父页通信，而非直接操作全局对象 - HTML 字符串若来自用户输入，必须做 XSS 过滤（不能只靠沙箱），否则恶意标签仍可能触发 CSS 注入或点击劫持
真正难的不是让代码跑起来，而是判断哪些权限真的必要——多开一个 flag，就少一层防护。
