跨域及解决方案--小结

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

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

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

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

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


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

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

咱们知道，在同一域名下，文件是能够相互访问的。那么，跨域呢？
在跨域的状况下，因为JavaScript的保护机制，会规定一个同源策略。

同源策略，限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。也就是这个规则设定了，相同域之间的文件访问，或是不一样域之间文件访问的方式。
同域：能够进行任何的读写操做。
跨域：一、一般容许写操做，例：表单提交、重定向
           二、外连接资源
                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、可是，若是需求就是，跨域通讯呢？

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

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

    

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

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

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