iframe 呈现受限内容的考虑
iframe 的(不太)新的属性 sandbox 可以用于呈现受限内容。默认情况下会视iframe内容在独立的origin中并禁用脚本、禁止插件、禁止各种有潜在风险的api。
根据 caniuse,除了 IE9- ,其他浏览器都支持。
IE6+ 可使用私有属性 security=restricted作为替代。
另外为了避免多一次请求,可使用 srcdoc 属性。但 IE/Edge 不支持该属性,并且无法用 data url(IE8+ 不支持用 data url 构造 html),但或可用 javascript url。
另外一个问题是自动适应高度。seamless属性最近不幸的被从spec里删除,因为没有人实现了它——除了UC!(Chrome曾实现了它但一直需要开启flag,并且早在Chrome27+之后就删除之。)
seamless的问题可能是略复杂,浏览器厂商出于简(偷)化(懒),就把这需求踢给了 shadow dom。但是实际上 shadow dom 并不能同时满足 sandbox 的需求。
目前的 workaround:
A. 同源内容并onload="this.style.height = this.contentDocument.documentElement.offsetHeight + 'px'"
注意,对于sandbox需要sandbox=allow-same-origin
B. 在内容中插入脚本通过 postMessage 上报 embed-size 消息报告 height,amp-iframe 即采用此模式。
注意,对于sandbox需要sandbox=allow-script
这两种方式都略增加了风险。
我相对更prefer后者,因为可以通过csp的script-src限制脚本来源。但是低版本IE使用security=restricted可能有问题,需要单独考虑。