同源策略、跨域解決方案

一、同源##

1、什么是源
源(origin)就是協(xié)議、域名和端口號。
以上url中的源就是:http://www.company.com:80
若地址里面的協(xié)議、域名和端口號均相同則屬于同源。
以下是相對于 http://www.a.com/test/index.html的同源檢測
http://www.a.com/dir/page.html ----成功
http://www.child.a.com/test/index.html----失敗,域名不同
https://www.a.com/test/index.html ----失敗,協(xié)議不同
http://www.a.com:8080/test/index.html----失敗,端口號不同

2.什么是同源策略?
同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權(quán)的情況下,不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報錯的。

不受同源策略限制的:
(1)、頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的。
(2)、跨域資源的引入是可以的。但是js不能讀寫加載的內(nèi)容。如嵌入到頁面中的<script src="..."></script>,<img>,<link>,<iframe>等。

二、跨域##

1、什么是跨域
受前面所講的瀏覽器同源策略的影響,不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。

2、跨域的實現(xiàn)形式
降域 document.domain
同源策略認為域和子域?qū)儆诓煌挠?,如?br> child1.a.com 與 a.com,
child1.a.com 與 child2.a.com,
xxx.child1.a.com 與 child1.a.com
兩兩不同源,可以通過設(shè)置 document.damain='a.com',瀏覽器就會認為它們都是同一個源。想要實現(xiàn)以上任意兩個頁面之間的通信,兩個頁面必須都設(shè)置documen.damain='a.com'。
此方式的特點:
(1). 只能在父域名與子域名之間使用,且將 xxx.child1.a.com域名設(shè)置為a.com后,不能再設(shè)置成child1.a.com。
(2). 存在安全性問題,當一個站點被攻擊后,另一個站點會引起安全漏洞。
(3). 這種方法只適用于 Cookie 和 iframe 窗口。

JSONP跨域
JSONP和JSON并沒有什么關(guān)系!
JSONP的原理:(舉例:a.com/jsonp.html想得到b.com/main.js中的數(shù)據(jù))在a.com的jsonp.html里創(chuàng)建一個回調(diào)函數(shù)xxx,動態(tài)添加<script>元素,向服務器發(fā)送請求,請求地址后面加上查詢字符串,通過callback參數(shù)指定回調(diào)函數(shù)的名字。請求地址為http://b.com/main.js?callback=xxx。在main.js中調(diào)用這個回調(diào)函數(shù)xxx,并且以JSON數(shù)據(jù)形式作為參數(shù)傳遞,完成回調(diào)。我們來看看代碼:
// a.com/jsonp.html中的代碼

function addScriptTag(src) { 
   var script = document.createElement('script'); 
   script.setAttribute("type","text/javascript"); 
   script.src = src; 
   document.body.appendChild(script);
   }
   window.onload = function () { 
   addScriptTag('http://b.com/main.js?callback=foo');
   } //window.onload是為了讓頁面加載完成后再執(zhí)行
   function foo(data) { 
   console.log(data.name+"歡迎您");
   };

/b.com/main.js中的代碼
foo({name:"hl"})
這樣便實現(xiàn)了跨域的參數(shù)傳遞。

采用jsonp跨域也存在問題:
(1). 使用這種方法,只要是個網(wǎng)站都可以拿到b.com里的數(shù)據(jù),存在安全性問題。需要網(wǎng)站雙方商議基礎(chǔ)token的身份驗證,這里不詳述。
(2). 只能是GET,不能POST。
(3). 可能被注入惡意代碼,篡改頁面內(nèi)容,可以采用字符串過濾來規(guī)避此問題。

CORS
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務器,發(fā)出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
剛才的例子中,在b.com里面添加響應頭聲明允許a.com的訪問,代碼:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數(shù)據(jù)了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。

**其它方法

  1. HTML5的postMessage方法
  2. window.name
  3. location.hash
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 題目1: 什么是同源策略 同源策略限制了從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離...
    饅頭Mum閱讀 1,683評論 0 1
  • 1.什么是同源策略 1.要了解同源策略,我們必須先知道源即orgin 以百度頁面為例,谷歌瀏覽器打開控制臺:輸入l...
    GarenWang閱讀 1,554評論 2 8
  • 問答 1. 什么是同源策略 同源是指域名、協(xié)議、端口相同。同源策略(Same-Origin Policy)是瀏覽器...
    Maggie_77閱讀 536評論 0 1
  • 1. 什么是同源策略 同源是指域名、協(xié)議、端口相同。同源策略(Same-Origin Policy)是瀏覽器的一個...
    65_劉璐閱讀 782評論 0 0
  • 正如推薦語所說:“看這本書就像吃火鍋,一盤愛情,一盤推理,一盤歷史,每個人都能夾到愛吃的。神奇的是這樣百搭的書居然...
    月桂飄香閱讀 738評論 0 2

友情鏈接更多精彩內(nèi)容