跨域及解决方案--小结

什么是域名？
简言之，就像网络上的门牌号。不同的域名指向不同的信息。比如：www.baidu.com;就是一个域名。

分析百度首页的地址，看看各个部分的专业名词。

域名是一颗倒长的树，最多允许有127个层级。
com
   |_____
            baidu.com
                   |______
                               www.baidu.com
                                          ...... //最多可划127个层级

什么是跨域？
跨域，不同域名之间的通信，就是跨域。如何区分是否是跨域呢，请看下面的例子。

以 http://www.a.com:8888 为例


综上所述，协议、主机域名、端口三者都一致 是同源，否则都是跨域。

二、接着，我们就了解下神马是同源策略？

我们知道，在同一域名下，文件是可以相互访问的。那么，跨域呢？
在跨域的情况下，由于JavaScript的保护机制，会规定一个同源策略。

同源策略，限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。也就是这个规则设定了，相同域之间的文件访问，或是不同域之间文件访问的方式。
同域：可以进行任何的读写操作。
跨域：1、通常允许写操作，例：表单提交、重定向
           2、外链接资源
                a、css: <link ...>
                b、js:    <script ...> //错误信息，只会在同源脚本中打印出来
                c、img: <image ..>
                d、html5视频、音频 : <vedio> <audio>
                e、<object> <embed> <applet>
                f、@font-face //不同浏览器支持不同，有的支持跨域字体，有的仅支持同源字体
                g、<frame> <iframe>  站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。
           3、通常不允许读操作

三、但是，如果需求就是，跨域通信呢？

1、任何跨域通信，信息获取：
      a、脚本： html5 postMessage()、jQuery jsonp
      b、数据： window.name、 cookie 、location.hash（数据有限，且不安全）

2、同主域，不同子域。
     很简单，只要设置子域的域名指向父域就好。
     例： http://s1.a.com  http://a.com
     修改http://s1.a.com 的域名指向 document.domain = "a.com";

    

       
五、安全性问题
       如果，父页嵌套的子页iframe是一个登录框，那么，父页会不会得到子页的登录账号和密码？简单的说，父页有没有权限，获得子页iframe的元素，如：input[type='text']....

       经过测试，在360、Firefox、chrome下，跨域条件下，父页是获取不到iframe中的元素的。同域条件下，是可以获取到的。

         或者，你写了一个页面，不想被别人嵌套，该怎么做？网上也有很多人的博客，被直接嵌套在自己的网站里了，其实，只要限定一下X-Frame-Options的值，就可以避免被嵌套。
         在HTTP响应头中，配置X-Frame-Options，他有三个值：
          DENY：不允许被任何页面嵌入；
         SAMEORIGIN：不允许被本域以外的页面嵌入；
          ALLOW-FROM uri：不允许被指定的域名以外的页面嵌入（Chrome现阶段不支持）；