跨域及解決方案--小結

什麼是域名？
簡言之，就像網絡上的門牌號。不一樣的域名指向不一樣的信息。好比：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現階段不支持）；