iframe 使用

  避免自己的网站被其他网站的iframe引用：

原因：避免“点击劫持”

        方法：1、网站可设置X-Frame-Options，X-Frame-Options有三个可能值:

                  DENY ：拒绝任何域加载

                      SAMEORIGIN,：允许同源域加载

                      ALLOW-FROM ：可以定义允许iframe加载的url 

     

                  2、js防御方案，在js中添加方法实现如果网站被iframe框架引用，浏览器回跳到自己的网站下      

1. <script>
2. if (self == top) {
3.     var theBody = document.getElementsByTagName('body')[0];
4.     theBody.style.display = "block";
5. } else {
6.     top.location = self.location;
7. }
8. </script>

如何解决iframe的自动跳转问题：

iframe增加两个属性：security="restricted" sandbox=""，前者是IE的禁止js的功能，后者是HTML5的功能。刚好就可以让IE，Chrome，Firefox这三大浏览器都实现了禁止iframe的自动跳转

sandbox属性可以设置的值包括:
allow-forms   //允许表单提交
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-same-origin  //允许iframe内容被视为与文档内容有相同的来源，允许父子页面共享cookie，互相操作
allow-scripts  //允许脚本执行（慎重）

allow-top-navigation 

默认为全部禁用，即 sandbox=""

注：当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和allow-same-origin ，否则的话将允许嵌入的文档通过代码删除 sandbox 属性。虽然你可以这么做，但是这样的话其安全性还不如不用sandbox

使用src=”data:……”, srcdoc=”….” 直接设置iframe 内容时的区别：

    1. src 的data:text/html是 Data URI， 长度不能超过32,768
    2. 同时使用时srcdoc优先级更高
    3. 当前 IE 不支持 srcdoc 

    4. srcdoc更安全

postMessage可用于父子窗口安全地传递消息