hax.github.com icon indicating copy to clipboard operation
hax.github.com copied to clipboard

iframe 呈现受限内容的考虑

Open hax opened this issue 8 years ago • 1 comments

iframe 的(不太)新的属性 sandbox 可以用于呈现受限内容。默认情况下会视iframe内容在独立的origin中并禁用脚本、禁止插件、禁止各种有潜在风险的api。

根据 caniuse,除了 IE9- ,其他浏览器都支持。

IE6+ 可使用私有属性 security=restricted作为替代。


另外为了避免多一次请求,可使用 srcdoc 属性。但 IE/Edge 不支持该属性,并且无法用 data url(IE8+ 不支持用 data url 构造 html),但或可用 javascript url。

hax avatar Jan 10 '17 08:01 hax

另外一个问题是自动适应高度。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可能有问题,需要单独考虑。

hax avatar Jan 10 '17 13:01 hax