最近或多或少經常看到跨域操作,自己也沒有有個時間去專門研究透徹這一塊,所以打算借此機會,好好研究一番,并為此寫幾篇博文,這也算鞏固一下這方面的基礎知識。
不過講跨域之前就有必要先了解是什么導致了跨域才能清求,答案就是 瀏覽器的同源策略
那么何為 "源" 呢?
首先看看RFC6454里有定義URI源的算法定義。
源包括協議、域名、端口號。
標準瀏覽器下查看源的方式:location.origin
ie瀏覽器下不支持此種方式,但我們可以使用“ location.protocol查看協議、location.hostname查看域名、location.port查看端口號 ” 來查看源。
原文給出的例子:
解決了什么是 源 下來就是什么是同源策略。
一樣來看看這篇文章的定義.
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權的情況下,不能讀寫對方資源。所以lmc.com下的js腳本采用ajax讀取szu.com里面的文件數據是會報錯的。
? 不受同源策略限制的:
1、頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>,<img>,<link>,<iframe>等。
那么現實生活中,我們往往不能僅僅滿足于同源之間資源共享,那么如何突破同源策略呢?
一、降域
對于主域相同而子域不同的例子,可以通過設置document.domain的辦法來解決。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個文件中分別加上document.domain = ‘a.com’;然后通過a.html文件中創建一個iframe,去控制iframe的contentDocument,這樣兩個js文件之間就可以“交互”了。當然這種辦法只能解決主域相同而二級域名不同的情況,如果你異想天開的把script.a.com的domian設為alibaba.com那顯然是會報錯地!代碼如下:
www.a.com上的a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在這里操縱b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html document.domain = 'a.com';
問題:
1、安全性,當一個站點(b.a.com)被攻擊后,另一個站點(c.a.com)會引起安全漏洞。
2、如果一個頁面中引入多個iframe,要想能夠操作所有iframe,必須都得設置相同domain。