iframe用法有什么,iframe SEO 影响

题图来自Unsplash，基于CC0协议

导读

iframe这玩意儿在网页设计中用得挺多的，嵌套其他文档或者网页就靠它了。用法基本就是<iframe>标签一般在HTML里这么写：

不过有时候可能需要注意同源策略，或者处理iframe的高度自适应问题，像这种情况下可能依赖于JavaScript来动态计算和设置iframe的高度。

只是用来嵌网页，可是要是想和iframe里面的内容好好交流，就得靠sandbox属性了。这属性就是用来控制iframe安全沙箱里的权限设置的，比如你可以让里面的内容完全不能执行脚本，或是不能提交表单，或是不被父页面控制。写作时应当说明设置不同的sandbox属性值可以开启或关闭多种安全限制，比如allow-same-origin允许iframe携带同源标识，allow-scripts开启脚本执行，而像allow-top-navigation可以让内容重新定位父页的导航。

这种特性通常用在加载用户生成的内容或者第三方feed，想要在不失安全性的前提下获得一些隔离的便利。尤其是公共平台嵌第三方内容，对安全管控必须抓得紧。

跨域通信是开发中常见需求，特别是在用iframe嵌套第三方应用或页面时，这时就可能需要用到postMessage这个API了。这东西用来在HTML5 iframe里实现在不同源框架间的双向通信，做法是：iframe内的页面通过window.parent.postMessage方法发送消息；而嵌套这些iframe的父页面需要监听message事件来接收消息。

用postMessage还得注意来源验证，因为接收消息时要按照消息格式或消息来源进行判断，防止恶意站点掉坑，避免造成XSS之类的安全问题。这是一个比较特殊的iframe用途，需要签名校验和权限判断来防止非法通信。

不过，从SEO角度来看，iframe里面的页面内容可能会被搜索引擎看轻，所以嵌入需要SEO的内容时，最好是以主页面的形式直接编码，而非依靠iframe嵌押。同时，要注意iframe底部的滚动条是否会影响排名，还有iframe的内容对于页面关键词的分布有没有稀释等负面影响，这些都需要避坑，否则网站排名可能被无形中损耗了。

最后但绝对重要的一点是iframe里的安全问题，点击劫持攻击就是其中一种常有的威胁，就是恶意网友利用iframe透明但用户位置"可见"的特点，诱导用户在你不知情的情况下点击了iframe里的按钮或者是链接。来防一顿攻击，一个好办法是采用HTTP响应头里的X-Frame-Options，设置为DENY不允许被嵌套，或者是设置ALLOW-FROM urls允许被域名同源的站点嵌套，效果比用JavaScript来判断浏览器是否支持document.isSecureContext再经由window的navigator特性来检测要好得多。

同时，父页面还需要把X-Content-Type-Options设置为nosniff，这样浏览器就不会以为那段JavaScript是其他类型的，保护用户免受自动注入脚本攻击伤害。另外，针对clickjacking的防范，上面提到的X-Frame-Options是首选，除此之外，还可以用Content Security Policy配合frame-ancestors指令来更细致地控制iframe嵌套的安全边界。

总体来说，iframe虽然用起来方便，但用得不好也容易留下安全隐患，或是影响页面SEO，所以大家在嵌套iframe时还是得谨慎一点，别搞出bug来。