摘要:扯了這么多,自然不是為了吹水,而是要為了引出前端開發的一個重要的知識點同源策略什么是同源策略出于保護用戶信息安全的目的,現在的瀏覽器都會實施同源策略這個政策,所謂同源策略指的是不同源的客戶端腳本在沒有明確授權情況下,不允許讀寫對方的資源。
導語
你家的小孩帶了他的朋友來你們的家里玩,你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會阻止,但是如果你家小孩的朋友人品不行,亂拿東西吃、亂翻你家的東西,你自然不允許,拿什么東西要通過你的允許才行。
扯了這么多,自然不是為了吹水,而是要為了引出前端開發的一個重要的知識點——同源策略
什么是同源策略出于保護用戶信息安全的目的,現在的瀏覽器都會實施“同源策略”這個政策,所謂“同源策略”指的是不同源的客戶端腳本在沒有明確授權情況下,不允許讀寫對方的資源。
試想,如果你在淘寶購物完后,帶著淘寶的登陸信息又去京東,保不準京東把你給黑掉,okay這只是開個玩笑~~~
但是,在很多情況下我們又經常需要跨域訪問資源,比如你要在個人博客上創建一個音樂播放器,但這個接口如果自己創建的話性價比太低了,這就需要其他源提供一個可訪問的接口給你使用,這里就涉及到突破同源策略的限制的跨域訪問
所謂同源:
同協議:如都是http
同域名:如都是terenyeung.applinzi.com/newapp/carousel.html和terenyeung.applinzi.com/index.html
同端口:如都是80端口
什么是跨域而所謂的跨域,指的是突破同源策略的限制,本源的客戶端腳本訪問其他源的數據
跨域的實現方式目前,實現跨域訪問的方法包括:
- JSONP - Cross-Origin Resource Sharing - HTML5 postMessage - 其他Hack - 利用hash - 利用window.name
這里主要講解常用的JSONP和CORS兩種跨域方法。
JSONP
JSONP的全稱是JSON with Padding,
- JSONP是通過script標簽加載數據的方式去獲取其他源的數據,然后當做js代碼來執行; - 你需要提前在文檔中聲明一個回調函數,該函數的函數名通過GET的方式向后臺傳參,后臺解析到函數名后在原始數據上padding這個函數名,然后在發給前端,最終這個返回前端的字符串將作為js的一部分執行
//你現在所在的頁面是 http://terenyeung.applinzi.com/newapp/task31/jsonp.html //你現在的需求是想要獲取另一個源http://teren.applinzi.com/jsonp.php的數據 //利用jsonp實現跨域訪問的具體做法是: //1.在該頁面添加一個script標簽,當加載script的時候就會向另一個源(http://teren.applinzi.com/task31/jsonp.php)發送GET的請求; //2.存放在另一個源的后臺腳本對前端發過來的查詢字符串(帶函數名)進行判斷,如果存在則為后臺返回的數據包裹上帶有該函數名的字符串,即 if($callback){ echo $callback."(".json_encode($data).")"; }else{ echo $data; }
跨域實現方式——JSONP
CORS
CORS的全稱是Cross-Origin Resources Sharing,它允許瀏覽器向跨源服務器,發出請求,從而克服了AJAX只能同源使用的限制
CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10;
瀏覽器一旦發現AJAX請求跨源,就會自動添加一些附加的頭信息——origin字段,告訴跨域的后臺這次跨域請求是由哪個源(這里是http://terenyeung.applinzi.com)
發出的
實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口,就可以跨源通信。服務器根據前端發過來的跨域的ajax請求的origin字段,決定是否同意這次的跨域訪問;
如果后臺同意的話,可以在后臺文檔(以php后臺為例)中設置如下:
添加一個頭: header("Access-Control-Allow-Origin: *"); //header("Access-Control-Allow-Origin: http://terenyeung.applinzi.com"); ?> [注]*為允許所有的源訪問
如果被允許另一個源跨域訪問,則返回的頭信息一定包含如下字段: Access-Control-Allow-Origin: http://terenyeung.applinzi.com 或者 Access-Control-Allow-Origin: *
跨域實現方式——CORS
阮一峰——瀏覽器同源政策及其規避方法
阮一峰——跨域資源共享 CORS 詳解
知乎——「每日一題」JSONP 是什么?
饑人谷——同源策略及跨域資源共享
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86533.html
摘要:扯了這么多,自然不是為了吹水,而是要為了引出前端開發的一個重要的知識點同源策略什么是同源策略出于保護用戶信息安全的目的,現在的瀏覽器都會實施同源策略這個政策,所謂同源策略指的是不同源的客戶端腳本在沒有明確授權情況下,不允許讀寫對方的資源。 導語你家的小孩帶了他的朋友來你們的家里玩,你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會阻止,但是如果你家小孩的朋友人品不行,亂拿東西吃、...
摘要:由于瀏覽器的同源策略導致無法直接通過拿到后臺數據。目前,如果非同源,共有三種行為受到限制。此處應有掌聲參考關于跨域資源共享和瀏覽器的同源策略限制的具體講解。 工作中,經常會遇到需要跨域請求數據的情況。由于瀏覽器的同源策略,導致無法直接通過ajax拿到后臺數據。解決這個問題的方式之一就是JSONP。還有一種方式更高效簡單——跨域資源共享(Cross-origin Resource Sha...
摘要:可以說同源策略在安全中扮演著及其重要的角色。我把這個領域的東西寫成了一個系列,以后還會繼續完善下去安全一同源策略與跨域安全二攻擊安全三攻擊 之所以要將同源策略與跨域寫在一起,是因為存在瀏覽器的同源策略,才會存在跨域問題 何為同源策略 同源策略是瀏覽器實現的一種安全策略,它限制了不同源之間的文檔和腳本交互的權限。只有同一個源的腳本才會具有操作dom、讀寫cookie、session 、a...
摘要:方案瀏覽器設置一級域名。場景完全不同源的網站,需要窗口通信方案父子窗口互相寫互相監聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場景請求非同源地址方案架設服務器代理參考資料瀏覽器同源政策及其規避方法阮一峰前端常見跨域解決方案全跨域幾種方式 同源 概念:協議,域名,端口 相同。目的:保證用戶信息的安全,防止惡意的網站竊取數據。限制的行為: Cookie、LocalStorage 和 In...
摘要:方案瀏覽器設置一級域名。場景完全不同源的網站,需要窗口通信方案父子窗口互相寫互相監聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場景請求非同源地址方案架設服務器代理參考資料瀏覽器同源政策及其規避方法阮一峰前端常見跨域解決方案全跨域幾種方式 同源 概念:協議,域名,端口 相同。目的:保證用戶信息的安全,防止惡意的網站竊取數據。限制的行為: Cookie、LocalStorage 和 In...
閱讀 3981·2021-11-22 15:31
閱讀 2518·2021-11-18 13:20
閱讀 3098·2021-11-15 11:37
閱讀 6957·2021-09-22 15:59
閱讀 736·2021-09-13 10:27
閱讀 3767·2021-09-09 09:33
閱讀 1435·2019-08-30 15:53
閱讀 2562·2019-08-29 15:37