1. 什麼是同種策略
瞭解跨域必須先了解同源策略。同源策略是瀏覽器上為安全性考量實施的非常重要的安全策略。
何謂同源:
URL由協定、網域名稱、連接埠和路徑組成,如果兩個URL的協定、網域名稱和連接埠相同,則表示他們同源。
同源策略:
瀏覽器的同源策略,限制了來自不同來源的"document"或腳本,對目前"document"讀取或設定某些屬性。 (白帽子講web安全[1])
從一個網域載入的腳本不允許存取另一個網域的文件屬性。
舉例:
例如一個惡意網站的頁面透過iframe嵌入了銀行的登入頁面(二者不同來源),如果沒有同源限制,惡意網頁上的javascript腳本就可以在使用者登入銀行的時候取得使用者名稱和密碼。
在瀏覽器中,<script>、<img alt="深入淺析同源策略和跨域存取_javascript技巧" >、<iframe>、<link>等標籤都可以載入跨網域資源,而不受同源限制,但瀏覽器限制了JavaScript的權限使其不能讀、寫入載入的內容。 <br /> </script>
另外同源策略只對網頁的HTML文檔做了限制,並且對載入的其他靜態資源如javascript、css、圖片等仍認為屬於同源。
程式碼範例(http://localhost:8080/和http://localhost:8081由於連接埠不同而不同源):
http://localhost:8080/test.html <html> <head><title>test same origin policy</title></head> <body> <iframe id="test" src="http://localhost:8081/test2.html"></iframe> <script type="text/javascript"> document.getElementById("test").contentDocument.body.innerHTML = "write somthing"; </script> </body> </html> http://localhost:8081/test2.html <html> <head><title>test same origin policy</title></head> <body> Testing. </body> </html>
在Firefox中会得到如下错误:
Error: Permission denied to access property 'body'
Document对象的domain属性存放着装载文档的服务器的主机名,可以设置它。
例如来自"blog.csdn.net"和来自"bbs.csdn.net"的页面,都将document.domain设置为"csdn.net",则来自两个子域名的脚本即可相互访问。
出于安全的考虑,不能设置为其他主domain,比如http://www.csdn.net/不能设置为sina.com
2. Ajax跨域
Ajax (XMLHttpRequest)请求受到同源策略的限制。
Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。
因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。
举个例子:
假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。
或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。
如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。
这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)
随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。
2.1 JSONP
JSONP技术实际和Ajax没有关系。我们知道