iframe sandbox属性

背景

使用他人提供的公共服务时，发现ajax异步请求发不成功，请教他人后，原来是使用了iframe的sandbox属性的缘由。由于iframe常常嵌入第三方服务，若是不加以限制的话，会存在不少安全问题，sandbox就是用来限制第三方嵌入页面操做权限的。

sandbox属性

sandbox有不少属性，目前已经研究的属性有：""、 allow-same-origin、allow-top-navigation、 allow-forms、allow-scripts，接下来分别说下每一个属性的做用。

• sandbox=""
  表示应用allow-same-origin、allow-top-navigation、 allow-forms、allow-scripts等限制。
• sandbox="allow-scripts"
  容许执行script脚本，若是不设置这个值，会有以下提示：
  
• sandbox="allow-forms"
  容许提交表单，若是不设置这个值，会有以下提示：
  

• sandbox="allow-top-navigation"
  容许更改iframe父页面加载地址，好比iframe里面嵌入一段代码：

  <a href="https://segmentfault.com/" target="_parent">测试allow-top-navigation</a>

  点击就会让父页面重定向到https://segmentfault.com, 若是不设置这个值，会提示以下提示：

• sandbox="allow-same-origin"
  表示容许设置http一个header头部：origin，若是设置了allow-same-origin，能够看到origin的准确值，若是没有设置，origin将为null。为null会存在什么问题呢？一是不利于服务端根据origin来设置跨域头部Access-Control-Allow-Origin头部值，二是若是跨域要携带认证信息，好比cookie什么的，跨域头部Access-Control-Allow-Origin必须是某个肯定的域名，跟origin是null是冲突的。

总结

以上讲了几个属性值，父页面能够根据iframe嵌入的页面来判断是否须要使用这些操做权限设置；可是若是设置了sandbox属性，就须要保证准确，以避免给第三方页面（ps: 尤为是公司内部信任网页）带来问题。

后续。。。

若是之后使用到其余属性，再作补充。