循序漸進Python3(十一) --6--  Ajax 實現跨域請求 jsonp 和 cors

來源:互聯網
上載者:User

標籤:get   動態建立   存在   列表   發展   over   span   get請求   參數調用   

 Ajax操作如何?跨域請求?         Ajax (XMLHttpRequest)請求受到同源策略的限制。        Ajax通過XMLHttpRequest能夠與遠端伺服器進行資訊互動,另外XMLHttpRequest是一個純粹的Javascript對象,這樣的互動過程,是在後台進行的,使用者不易察覺。      因此,XMLHTTP實際上已經突破了原有的Javascript的安全限制。   舉個例子:         假設某網站引用了其它網站的javascript,這個網站被入侵併在javascript中加入擷取使用者輸入並通過ajax提交給其他網站,這樣就可以源源不斷收集資訊。           或者某網站因為存在漏洞導致XSS注入了javascript指令碼,這個指令碼就可以通過ajax擷取使用者資訊並通過ajax提交給其他網站,這樣就可以源源不斷收集資訊。          如果我們又想利用XMLHTTP的無重新整理非同步互動能力,又不願意公然突破Javascript的安全性原則,可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。          這樣的安全性原則,很類似於Applet的安全性原則。IFrame的限制還僅僅是不能訪問跨域HTMLDOM中的資料,而XMLHTTP則根本上限制了跨域請求的提交。(實際上下面提到了CORS已經放寬了限制)          隨著Ajax技術和網路服務的發展,對跨域的要求也越來越強烈。下面介紹Ajax的跨域技術。  (1)JSONP  (JSON with Padding)       JSONP(JSONP是JSON的一種“使用模式”),利用script標籤的src屬性(瀏覽器允許script標籤跨域)。我們知道<script>標籤可以載入跨域的javascript指令碼,並且被載入的指令碼和當前文檔屬於同一個域。因此在文檔中可以調用/訪問指令碼中的資料和函數。如果javascript指令碼中的資料是動態產生的,那麼只要在文檔中動態建立<script>標籤就可以實現和服務端的資料互動。       JSONP就是利用<script>標籤的跨域能力實現跨域資料的訪問,請求動態產生的JavaScript指令碼同時帶一個callback函數名作為參數。其中callback函數本地文檔的JavaScript函數,伺服器端動態產生的指令碼會產生資料,並在代碼中以產生的資料為參數調用callback函數。當這段指令碼載入到本地文檔時,callback函數就被調用。
       這裡需要明確的一點是:所謂的域跟js的存放伺服器沒有關係,比如baidu.com的頁面載入了google.com的js,那麼此js的所在域是baidu.com而不是google.com。也就是說,此時該js能操作baidu.com的頁面對象,而不能操作google.com的頁面對象。
       如果還不太明白,這裡再詳細解釋一下:因為通過script標籤引入的js是不受同源策略的限制的(正如前文提到的baidu.com的頁面載入了google.com的js)。所以我們可以通過script標籤引入一個js或者是一個其他尾碼形式(如PHP,jsp等)的檔案,此檔案返回一個js函數的調用,如返回JSONP_getUsers(["paco","john","lili"]),也就是說此檔案返回的結果調用了JSONP_getUsers函數,並且把["paco","john","lili"]傳進去,這個["paco","john","lili"]是一個使用者列表。那麼如果此時我們的頁面中有一個JSONP_getUsers函數,那麼JSONP_getUsers就被調用到,並且傳入了使用者列表。此時就實現了在本域擷取其他域資料的功能,也就是跨域。 eg://本域為baidu.com  <script>      function JSONP_getUsers(users){          console.dir(users);      }  </script>  //載入google.com的getUsers.php  <script src="http://www.google.com/getUsers.php">  需要google.com提供支援,getUsers.php代碼如下:<?php>      echo ‘JSONP_getUsers(["paco","john","lili"])‘;//返回一個js函數的調用  ?>             為什麼script標籤引入的檔案不受同源策略的限制?因為script標籤引入的檔案內容是不能夠被用戶端的js擷取到的,不會影響到被引用檔案的安全,所以沒必要使script標籤引入的檔案遵循瀏覽器的同源策略。而通過ajax載入的檔案內容是能夠被用戶端js擷取到的,所以ajax必須遵循同源策略,否則被引入檔案的內容會泄漏或者存在其他風險。  JSONP的缺點是:它只支援GET請求而不支援POST等其它類型的HTTP請求。不過, 一般get請求能完成所有功能。
             JSONP易於實現,但是也會存在一些安全隱患,如果第三方的指令碼隨意地執行,那麼它就可以篡改頁面內容,截獲敏感性資料。但是在受信任的雙方傳遞資料,JSONP是非常合適的選擇。可以看出來JSONP跨域一般用於擷取其他域的資料。

一般能夠用JSONP實現跨域就用JSONP實現,這也是前端用的最多的跨域方法。

   (2)CORS   (Cross origin resource sharing ,即:跨域資源共用)

    通過在HTTP Header中加入擴充欄位,伺服器在相應網頁頭部加入欄位表示允許訪問的domain和HTTP method,用戶端檢查自己的域是否在允許清單中,決定是否處理響應。CORS協議提升了Ajax的跨域能力,但也增加了風險。一旦網站被注入指令碼或XSS攻擊,將非常方便的擷取使用者資訊並悄悄傳遞出去。
    假設我們頁面或者應用已在 http://www.test1.com 上了,而我們打算從 http://www.test2.com 請求提取資料。一般情況下,如果我們直接使用 AJAX 來請求將會失敗,瀏覽器也會返回“源不匹配”的錯誤。
      利用 CORS,在 http://www.test2.com 上只需添加一個標題,就可以允許來自 http://www.test1.com 的請求,是我在PHP中的 hander() 設定,“*”號表示允許任何域向我們的服務端提交請求:
        header(‘Access-Control-Allow-Origin:*‘);
也可以設定指定的網域名稱,如網域名稱 http://www.test2.com ,那麼就允許來自這個網域名稱的請求:
      header(‘Access-Control-Allow-Origin:http://www.test2.com‘);

 



來自為知筆記(Wiz)



循序漸進Python3(十一) --6--  Ajax 實現跨域請求 jsonp 和 cors

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.