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: 尤爲是公司內部信任網頁）帶來問題。

後續。。。

若是之後使用到其餘屬性，再作補充。