深入淺析同源策略和跨域訪問
1. 什么是同源策略
理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。
何謂同源:
URL由協(xié)議、域名、端口和路徑組成，如果兩個URL的協(xié)議、域名和端口相同，則表示他們同源。
同源策略:
瀏覽器的同源策略，限制了來自不同源的"document"或腳本，對當前"document"讀取或設置某些屬性。 （白帽子講web安全[1]）
從一個域上加載的腳本不允許訪問另外一個域的文檔屬性。
舉個例子：
比如一個惡意網(wǎng)站的頁面通過iframe嵌入了銀行的登錄頁面（二者不同源），如果沒有同源限制，惡意網(wǎng)頁上的javascript腳本就可以在用戶登錄銀行的時候獲取用戶名和密碼。
在瀏覽器中，<script>、<img>、<iframe>、<link>等標簽都可以加載跨域資源，而不受同源限制，但瀏覽器限制了JavaScript的權限使其不能讀、寫加載的內(nèi)容。
另外同源策略只對網(wǎng)頁的HTML文檔做了限制，對加載的其他靜態(tài)資源如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實際上已經(jīng)突破了原有的Javascript的安全限制。
舉個例子：
假設某網(wǎng)站引用了其它站點的javascript，這個站點被compromise并在javascript中加入獲取用戶輸入并通過ajax提交給其他站點，這樣就可以源源不斷收集信息。
或者某網(wǎng)站因為存在漏洞導致XSS注入了javascript腳本，這個腳本就可以通過ajax獲取用戶信息并通過ajax提交給其他站點，這樣就可以源源不斷收集信息。
如果我們又想利用XMLHTTP的無刷新異步交互能力，又不愿意公然突破Javascript的安全策略，可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。
這樣的安全策略，很類似于Applet的安全策略。IFrame的限制還僅僅是不能訪問跨域HTMLDOM中的數(shù)據(jù)，而XMLHTTP則根本上限制了跨域請求的提交。（實際上下面提到了CORS已經(jīng)放寬了限制）
隨著Ajax技術和網(wǎng)絡服務的發(fā)展，對跨域的要求也越來越強烈。下面介紹Ajax的跨域技術。
2.1 JSONP
JSONP技術實際和Ajax沒有關系。我們知道<script>標簽可以加載跨域的javascript腳本，并且被加載的腳本和當前文檔屬于同一個域。因此在文檔中可以調(diào)用/訪問腳本中的數(shù)據(jù)和函數(shù)。如果javascript腳本中的數(shù)據(jù)是動態(tài)生成的，那么只要在文檔中動態(tài)創(chuàng)建<script>標簽就可以實現(xiàn)和服務端的數(shù)據(jù)交互。
JSONP就是利用<script>標簽的跨域能力實現(xiàn)跨域數(shù)據(jù)的訪問，請求動態(tài)生成的JavaScript腳本同時帶一個callback函數(shù)名作為參數(shù)。其中callback函數(shù)本地文檔的JavaScript函數(shù)，服務器端動態(tài)生成的腳本會產(chǎn)生數(shù)據(jù)，并在代碼中以產(chǎn)生的數(shù)據(jù)為參數(shù)調(diào)用callback函數(shù)。當這段腳本加載到本地文檔時，callback函數(shù)就被調(diào)用。
第一個站點的測試頁面（http://localhost:8080/test.html）：
<script src="http://localhost:8081/test_data.js">
<script>
function test_handler(data) {
console.log(data);
}
</script>
服務器端的Javascript腳本（http://localhost:8081/test_data.js）：
test_handler('{"data": "something"}');
為了動態(tài)實現(xiàn)JSONP請求，可以使用Javascript動態(tài)插入<script>標簽：
<script type="text/javascript">
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);
// load the script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
JSONP協(xié)議封裝了上述步驟，jQuery中統(tǒng)一是現(xiàn)在AJAX中(其中data type為JSONP)：
http://localhost:8080/test?callback=test_handler
為了支持JSONP協(xié)議，服務器端必須提供特別的支持[2]，另外JSONP只支持GET請求。
2.2 Proxy
使用代理方式跨域更加直接，因為SOP的限制是瀏覽器實現(xiàn)的。如果請求不是從瀏覽器發(fā)起的，就不存在跨域問題了。
使用本方法跨域步驟如下：
1. 把訪問其它域的請求替換為本域的請求
2. 本域的請求是服務器端的動態(tài)腳本負責轉發(fā)實際的請求
各種服務器的Reverse Proxy功能都可以非常方便的實現(xiàn)請求的轉發(fā)，如Apache httpd + mod_proxy。
Eg.
為了通過Ajax從http://localhost:8080訪問http://localhost:8081/api，可以將請求發(fā)往http://localhost:8080/api。
然后利用Apache Web服務器的Reverse Proxy功能做如下配置：
ProxyPass /api http://localhost:8081/api
2.3 CORS
2.3.1 Cross origin resource sharing
“Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]
通過在HTTP Header中加入擴展字段，服務器在相應網(wǎng)頁頭部加入字段表示允許訪問的domain和HTTP method，客戶端檢查自己的域是否在允許列表中，決定是否處理響應。
實現(xiàn)的基礎是JavaScript不能夠操作HTTP Header。某些瀏覽器插件實際上是具有這個能力的。
服務器端在HTTP的響應頭中加入（頁面層次的控制模式）：
Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600
多個域名之間用逗號分隔，表示對所示域名提供跨域訪問權限。"*"表示允許所有域名的跨域訪問。
客戶端可以有兩種行為：
1. 發(fā)送OPTIONS請求，請求Access-Control信息。如果自己的域名在允許的訪問列表中，則發(fā)送真正的請求，否則放棄請求發(fā)送。
2. 直接發(fā)送請求，然后檢查response的Access-Control信息，如果自己的域名在允許的訪問列表中，則讀取response body，否則放棄。
本質上服務端的response內(nèi)容已經(jīng)到達本地，JavaScript決定是否要去讀取。
Support: [Javascript Web Applications] * IE >= 8 (需要安裝caveat) * Firefox >= 3 * Safari 完全支持 * Chrome 完全支持 * Opera 不支持
2.3.2 測試
測試頁面http://localhost:8080/test3.html使用jquery發(fā)送Ajax請求。
<html>
<head><title>testing cross sop</title></head>
<body>
Testing.
<script src="jquery-2.0.0.min.js"></script>
<script type='text/javascript'>
$.ajax({
url: 'http://localhost:8000/hello',
success: function(data) {
alert(data);
},
error: function() {
alert('error');
}
});
</script>
</body>
</html>
測試Restful API(http://localhost:8000/hello/{name})使用bottle.py來host。
from bottle import route, run, response
@route('/hello')
def index():
return 'Hello World.'
run(host='localhost', port=8000)
測試1：
測試正常的跨域請求的行為。
測試結果：
1. 跨域GET請求已經(jīng)發(fā)出，請求header中帶有
Origin http://localhost:8080
2. 服務器端正確給出response
3. Javascript拒絕讀取數(shù)據(jù)，在firebug中發(fā)現(xiàn)reponse為空，并且觸發(fā)error回調(diào)
測試2：
測試支持CORS的服務器的跨域請求行為。
對Restful API做如下改動，在response中加入header：
def index():
#Add CORS header#
response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
return 'Hello World.'
測試結果：
1. 跨域GET請求已經(jīng)發(fā)出，請求header中帶有
Origin http://localhost:8080
2. 服務器端正確給出response
3. 客戶端正常獲取數(shù)據(jù)
測試3：
測試OPTIONS請求獲取CORS信息。
對客戶端的Ajax請求增加header：
$.ajax({
url: 'http://localhost:8000/hello',
headers: {'Content-Type': 'text/html'},
success: function(data) {
alert(data);
},
error: function() {
alert('error');
}
});
對Restful API做如下改動：
@route('/hello', method = ['OPTIONS', 'GET'])
def index():
if request.method == 'OPTIONS':
return ''
return 'Hello World.'
測試結果：
1. Ajax函數(shù)會首先發(fā)送OPTIONS請求
2. 針對OPTIONS請求服務器
3. 客戶端發(fā)現(xiàn)沒有CORS header后不會發(fā)送GET請求
測試4：
增加服務器端對OPTIONS方法的處理。
對Restful API做如下改動：
@route('/hello', method = ['OPTIONS', 'GET'])
def index():
response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS'
response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type'
if request.method == 'OPTIONS':
return ''
return 'Hello World.'
測試結果：
1. Ajax函數(shù)會首先發(fā)送OPTIONS請求
2. 針對OPTIONS請求服務器
3. 客戶端匹配CORS header中的allow headers and orgin后會正確發(fā)送GET請求并獲取結果
測試發(fā)現(xiàn)，Access-Control-Allow-Headers是必須的。
CORS協(xié)議提升了Ajax的跨域能力，但也增加了風險。一旦網(wǎng)站被注入腳本或XSS攻擊，將非常方便的獲取用戶信息并悄悄傳遞出去。
4. Cookie 同源策略
Cookie中的同源只關注域名，忽略協(xié)議和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。
5. Flash/SilverLight跨域
瀏覽器的各種插件也存在跨域需求。通常是通過在服務器配置crossdomain.xml[4]，設置本服務允許哪些域名的跨域訪問。
客戶端會首先請求此文件，如果發(fā)現(xiàn)自己的域名在訪問列表里，就發(fā)起真正的請求，否則不發(fā)送請求。
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
通常crossdomain.xml放置在網(wǎng)站根目錄。
6. 總結
互聯(lián)網(wǎng)的發(fā)展催生了跨域訪問的需求，各種跨域方法和協(xié)議滿足了需求但也增加了各種風險。尤其是XSS和CSRF等攻擊的盛行也得益于此。
了解這些技術背景有助于在實際項目中熟練應用并規(guī)避各種安全風險。
- 利用nginx解決cookie跨域訪問的方法
- 用jQuery與JSONP輕松解決跨域訪問的問題
- jQuery 跨域訪問問題解決方法
- Ajax實現(xiàn)跨域訪問的三種方法
- Javascript 跨域訪問解決方案
- js iframe跨域訪問(同主域/非同主域)分別深入介紹
- Ajax 設置Access-Control-Allow-Origin實現(xiàn)跨域訪問
- jquery下利用jsonp跨域訪問實現(xiàn)方法
- JQuery Ajax 跨域訪問的解決方案
- AJAX javascript的跨域訪問執(zhí)行
- 解決AJAX中跨域訪問出現(xiàn)''沒有權限''的錯誤
- Python的Django應用程序解決AJAX跨域訪問問題的方法
- AJAX的跨域訪問-兩種有效的解決方法介紹
- 關于Iframe如何跨域訪問Cookie和Session的解決方法
- js實現(xiàn)跨域訪問的三種方法
- AJax與Jsonp跨域訪問問題小結
- jquery 跨域訪問問題解決方法(筆記)
- 淺談Ajax跨域Session和跨域訪問
- 解決nginx/apache靜態(tài)資源跨域訪問問題詳解
相關文章
javascript跨域總結之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實現(xiàn)的跨域數(shù)據(jù)傳輸，自己親自實踐了一下，真的非常好用，特此分享到腳本之家網(wǎng)站供大家參考2015-11-11
這篇文章主要介紹了JS日期對象簡單操作,獲取當前年份、星期、時間等代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了js+cookies實現(xiàn)懸浮購物車的方法,涉及javascript數(shù)值計算與cookie的相關操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
json數(shù)據(jù)處理及數(shù)據(jù)綁定
本文主要介紹了json數(shù)據(jù)處理及數(shù)據(jù)綁定的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了js滾輪事件需要注意的兼容性問題,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了微信小程序倒計時功能實例代碼,當單擊按鈕彈出一個半透明的彈出層，在規(guī)定時間內(nèi)激活關閉按鈕，關閉彈出層。需要的朋友可以參考下2018-07-07
本文介紹了JavaScript中的this關鍵詞指向，this是JavaScript的一個關鍵字，他是函數(shù)執(zhí)行過程中，自動生成的一個內(nèi)部對象，指當前的對象，只在當前函數(shù)內(nèi)部使用，更多相關資料需要的小伙伴可以參考下面文章內(nèi)容2022-05-05
為JavaScript類型增加方法的實現(xiàn)代碼(增加功能)
大家在js開發(fā)過程中有些功能已經(jīng)滿足不了我們的需求，或沒有我們需要的功能，那么我們就可以自己擴展下，個性化js2011-12-12
幾乎每個app都會用到底部導航的,相對于小程序而言自然也是如此了,這篇文章主要給大家介紹了關于微信小程序底部tabBar遮擋內(nèi)容的簡單處理方法,需要的朋友可以參考下2021-08-08