配置allow-same-origin sandbox的srcdoc iframe仍出现跨域错误如何解决

1. srcdoc类型的iframe默认origin规则：如果没有设置sandbox属性，其origin和父页面完全一致；如果设置了sandbox但未添加allow-same-origin标记，iframe会被分配全局唯一的不透明origin，和任何页面（包括父页面、同域其他页面）都判定为跨域。
2. sandbox属性的生效规则：仅在iframe节点首次挂载到DOM树之前设置有效，挂载完成后动态修改sandbox属性不会生效，浏览器会直接忽略修改。
3. 嵌套iframe的继承规则：父级iframe的sandbox标记会向下继承，子iframe的有效权限是父级sandbox标记和自身sandbox标记的交集。

你遇到的一级iframe无报错、嵌套iframe偶发报错的原因是：你给一级iframe加allow-same-origin是在挂载前完成的，属性生效；而嵌套iframe是传入的HTML内容自带的，要么没有预设allow-same-origin标记，要么你是在嵌套iframe已经挂载到一级iframe的DOM树之后才动态补加sandbox属性，修改未生效，导致部分嵌套iframe使用了不透明origin，触发跨域。

• 预处理所有传入的HTML内容：在把HTML赋值给任意层级iframe的srcdoc之前，直接通过字符串匹配或者DOM解析的方式，给HTML代码中所有<iframe>标签提前注入sandbox="allow-same-origin allow-scripts"属性，从根源上保证所有iframe挂载时就有正确的权限配置。
• 针对已挂载的嵌套iframe：如果确实需要修改已加载的嵌套iframe权限，不能直接修改原有节点的sandbox属性，需要先克隆原有iframe节点，给新克隆的节点设置正确的sandbox属性后，替换掉原有节点，重新加载内容。
• 操作iframe内部DOM前做校验：每次访问iframe的contentDocument/contentWindow前，先做异常捕获，同时确保操作在iframe的load事件触发后执行，避免加载未完成导致的异常误判。

内容的提问来源于stack exchange，提问作者Karl Nelson