JavaScript同源策略和跨域訪問(wèn)實(shí)例詳解

2019-11-19 14:04:10

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

本文實(shí)例講述了JavaScript同源策略和跨域訪問(wèn)。分享給大家供大家參考，具體如下：

1. 什么是同源策略

理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考慮實(shí)施的非常重要的安全策略。

何謂同源:

URL由協(xié)議、域名、端口和路徑組成，如果兩個(gè)URL的協(xié)議、域名和端口相同，則表示他們同源。

同源策略:

瀏覽器的同源策略，限制了來(lái)自不同源的"document"或腳本，對(duì)當(dāng)前"document"讀取或設(shè)置某些屬性。（白帽子講web安全[1]）

從一個(gè)域上加載的腳本不允許訪問(wèn)另外一個(gè)域的文檔屬性。

舉個(gè)例子：

比如一個(gè)惡意網(wǎng)站的頁(yè)面通過(guò)iframe嵌入了銀行的登錄頁(yè)面（二者不同源），如果沒(méi)有同源限制，惡意網(wǎng)頁(yè)上的javascript腳本就可以在用戶登錄銀行的時(shí)候獲取用戶名和密碼。

在瀏覽器中，<script>、<img>、<iframe>、<link>等標(biāo)簽都可以加載跨域資源，而不受同源限制，但瀏覽器限制了JavaScript的權(quán)限使其不能讀、寫(xiě)加載的內(nèi)容。

另外同源策略只對(duì)網(wǎng)頁(yè)的HTML文檔做了限制，對(duì)加載的其他靜態(tài)資源如javascript、css、圖片等仍然認(rèn)為屬于同源。

代碼示例（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中會(huì)得到如下錯(cuò)誤：

Error: Permission denied to access property 'body'

Document對(duì)象的domain屬性存放著裝載文檔的服務(wù)器的主機(jī)名，可以設(shè)置它。

例如來(lái)自"blog.VeVB.COm"和來(lái)自"bbs.VeVB.COm"的頁(yè)面，都將document.domain設(shè)置為"VeVB.COm"，則來(lái)自兩個(gè)子域名的腳本即可相互訪問(wèn)。

出于安全的考慮，不能設(shè)置為其他主domain，比如//www.survivalescaperooms.com/不能設(shè)置為sina.com

2. Ajax跨域

Ajax (XMLHttpRequest)請(qǐng)求受到同源策略的限制。

Ajax通過(guò)XMLHttpRequest能夠與遠(yuǎn)程的服務(wù)器進(jìn)行信息交互，另外XMLHttpRequest是一個(gè)純粹的Javascript對(duì)象，這樣的交互過(guò)程，是在后臺(tái)進(jìn)行的，用戶不易察覺(jué)。

因此，XMLHTTP實(shí)際上已經(jīng)突破了原有的Javascript的安全限制。

舉個(gè)例子：

假設(shè)某網(wǎng)站引用了其它站點(diǎn)的javascript，這個(gè)站點(diǎn)被compromise并在javascript中加入獲取用戶輸入并通過(guò)ajax提交給其他站點(diǎn)，這樣就可以源源不斷收集信息。

或者某網(wǎng)站因?yàn)榇嬖诼┒磳?dǎo)致XSS注入了javascript腳本，這個(gè)腳本就可以通過(guò)ajax獲取用戶信息并通過(guò)ajax提交給其他站點(diǎn)，這樣就可以源源不斷收集信息。

如果我們又想利用XMLHTTP的無(wú)刷新異步交互能力，又不愿意公然突破Javascript的安全策略，可以選擇的方案就是給XMLHTTP加上嚴(yán)格的同源限制。

這樣的安全策略，很類似于Applet的安全策略。IFrame的限制還僅僅是不能訪問(wèn)跨域HTMLDOM中的數(shù)據(jù)，而XMLHTTP則根本上限制了跨域請(qǐng)求的提交。（實(shí)際上下面提到了CORS已經(jīng)放寬了限制）

隨著Ajax技術(shù)和網(wǎng)絡(luò)服務(wù)的發(fā)展，對(duì)跨域的要求也越來(lái)越強(qiáng)烈。下面介紹Ajax的跨域技術(shù)。

2.1 JSONP

JSONP技術(shù)實(shí)際和Ajax沒(méi)有關(guān)系。我們知道<script>標(biāo)簽可以加載跨域的javascript腳本，并且被加載的腳本和當(dāng)前文檔屬于同一個(gè)域。因此在文檔中可以調(diào)用/訪問(wèn)腳本中的數(shù)據(jù)和函數(shù)。如果javascript腳本中的數(shù)據(jù)是動(dòng)態(tài)生成的，那么只要在文檔中動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽就可以實(shí)現(xiàn)和服務(wù)端的數(shù)據(jù)交互。

JSONP就是利用<script>標(biāo)簽的跨域能力實(shí)現(xiàn)跨域數(shù)據(jù)的訪問(wèn)，請(qǐng)求動(dòng)態(tài)生成的JavaScript腳本同時(shí)帶一個(gè)callback函數(shù)名作為參數(shù)。其中callback函數(shù)本地文檔的JavaScript函數(shù)，服務(wù)器端動(dòng)態(tài)生成的腳本會(huì)產(chǎn)生數(shù)據(jù)，并在代碼中以產(chǎn)生的數(shù)據(jù)為參數(shù)調(diào)用callback函數(shù)。當(dāng)這段腳本加載到本地文檔時(shí)，callback函數(shù)就被調(diào)用。

第一個(gè)站點(diǎn)的測(cè)試頁(yè)面（http://localhost:8080/test.html）：

<script src="http://localhost:8081/test_data.js">  <script>    function test_handler(data) {      console.log(data);    }</script>

服務(wù)器端的Javascript腳本（http://localhost:8081/test_data.js）：

test_handler('{"data": "something"}');

為了動(dòng)態(tài)實(shí)現(xiàn)JSONP請(qǐng)求，可以使用Javascript動(dòng)態(tài)插入<script>標(biāo)簽：

<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é)議，服務(wù)器端必須提供特別的支持[2]，另外JSONP只支持GET請(qǐng)求。

2.2 Proxy

使用代理方式跨域更加直接，因?yàn)镾OP的限制是瀏覽器實(shí)現(xiàn)的。如果請(qǐng)求不是從瀏覽器發(fā)起的，就不存在跨域問(wèn)題了。

使用本方法跨域步驟如下：

1. 把訪問(wèn)其它域的請(qǐng)求替換為本域的請(qǐng)求

2. 本域的請(qǐng)求是服務(wù)器端的動(dòng)態(tài)腳本負(fù)責(zé)轉(zhuǎn)發(fā)實(shí)際的請(qǐng)求

各種服務(wù)器的Reverse Proxy功能都可以非常方便的實(shí)現(xiàn)請(qǐng)求的轉(zhuǎn)發(fā)，如Apache httpd + mod_proxy。

Eg.

為了通過(guò)Ajax從http://localhost:8080訪問(wèn)http://localhost:8081/api，可以將請(qǐng)求發(fā)往http://localhost:8080/api。

然后利用Apache Web服務(wù)器的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]

通過(guò)在HTTP Header中加入擴(kuò)展字段，服務(wù)器在相應(yīng)網(wǎng)頁(yè)頭部加入字段表示允許訪問(wèn)的domain和HTTP method，客戶端檢查自己的域是否在允許列表中，決定是否處理響應(yīng)。

實(shí)現(xiàn)的基礎(chǔ)是JavaScript不能夠操作HTTP Header。某些瀏覽器插件實(shí)際上是具有這個(gè)能力的。

服務(wù)器端在HTTP的響應(yīng)頭中加入（頁(yè)面層次的控制模式）：

Access-Control-Allow-Origin: example.comAccess-Control-Request-Method: GET, POSTAccess-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, OriginAccess-Control-Expose-Headers: Content-RangeAccess-Control-Max-Age: 3600

多個(gè)域名之間用逗號(hào)分隔，表示對(duì)所示域名提供跨域訪問(wèn)權(quán)限。"*"表示允許所有域名的跨域訪問(wèn)。

客戶端可以有兩種行為：

1. 發(fā)送OPTIONS請(qǐng)求，請(qǐng)求Access-Control信息。如果自己的域名在允許的訪問(wèn)列表中，則發(fā)送真正的請(qǐng)求，否則放棄請(qǐng)求發(fā)送。

2. 直接發(fā)送請(qǐng)求，然后檢查response的Access-Control信息，如果自己的域名在允許的訪問(wèn)列表中，則讀取response body，否則放棄。

本質(zhì)上服務(wù)端的response內(nèi)容已經(jīng)到達(dá)本地，JavaScript決定是否要去讀取。

Support: [Javascript Web Applications]
* IE >= 8 (需要安裝caveat)
* Firefox >= 3
* Safari 完全支持
* Chrome 完全支持
* Opera 不支持

2.3.2 測(cè)試

測(cè)試頁(yè)面http://localhost:8080/test3.html使用jquery發(fā)送Ajax請(qǐng)求。

<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>

測(cè)試Restful API(http://localhost:8000/hello/{name})使用bottle.py來(lái)host。

from bottle import route, run, response@route('/hello')def index():  return 'Hello World.'run(host='localhost', port=8000)

測(cè)試1：

測(cè)試正常的跨域請(qǐng)求的行為。

測(cè)試結(jié)果：

1. 跨域GET請(qǐng)求已經(jīng)發(fā)出，請(qǐng)求header中帶有

Origin http://localhost:8080

2. 服務(wù)器端正確給出response

3. Javascript拒絕讀取數(shù)據(jù)，在firebug中發(fā)現(xiàn)reponse為空，并且觸發(fā)error回調(diào)

測(cè)試2：

測(cè)試支持CORS的服務(wù)器的跨域請(qǐng)求行為。

對(duì)Restful API做如下改動(dòng)，在response中加入header：

def index():  #Add CORS header#  response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")  return 'Hello World.'

測(cè)試結(jié)果：

1. 跨域GET請(qǐng)求已經(jīng)發(fā)出，請(qǐng)求header中帶有

Origin http://localhost:8080

2. 服務(wù)器端正確給出response

3. 客戶端正常獲取數(shù)據(jù)

測(cè)試3：

測(cè)試OPTIONS請(qǐng)求獲取CORS信息。
對(duì)客戶端的Ajax請(qǐng)求增加header：

$.ajax({ url: 'http://localhost:8000/hello', headers: {'Content-Type': 'text/html'}, success: function(data) {   alert(data); }, error: function() {   alert('error'); }});

對(duì)Restful API做如下改動(dòng)：

@route('/hello', method = ['OPTIONS', 'GET'])def index():  if request.method == 'OPTIONS':    return ''  return 'Hello World.'

測(cè)試結(jié)果：

1. Ajax函數(shù)會(huì)首先發(fā)送OPTIONS請(qǐng)求
2. 針對(duì)OPTIONS請(qǐng)求服務(wù)器
3. 客戶端發(fā)現(xiàn)沒(méi)有CORS header后不會(huì)發(fā)送GET請(qǐng)求

測(cè)試4：

增加服務(wù)器端對(duì)OPTIONS方法的處理。

對(duì)Restful API做如下改動(dòng)：

@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.'

測(cè)試結(jié)果：

1. Ajax函數(shù)會(huì)首先發(fā)送OPTIONS請(qǐng)求
2. 針對(duì)OPTIONS請(qǐng)求服務(wù)器
3. 客戶端匹配CORS header中的allow headers and orgin后會(huì)正確發(fā)送GET請(qǐng)求并獲取結(jié)果

測(cè)試發(fā)現(xiàn)，Access-Control-Allow-Headers是必須的。

CORS協(xié)議提升了Ajax的跨域能力，但也增加了風(fēng)險(xiǎn)。一旦網(wǎng)站被注入腳本或XSS攻擊，將非常方便的獲取用戶信息并悄悄傳遞出去。

4. Cookie 同源策略

Cookie中的同源只關(guān)注域名，忽略協(xié)議和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。

5. Flash/SilverLight跨域

瀏覽器的各種插件也存在跨域需求。通常是通過(guò)在服務(wù)器配置crossdomain.xml[4]，設(shè)置本服務(wù)允許哪些域名的跨域訪問(wèn)。

客戶端會(huì)首先請(qǐng)求此文件，如果發(fā)現(xiàn)自己的域名在訪問(wèn)列表里，就發(fā)起真正的請(qǐng)求，否則不發(fā)送請(qǐng)求。

<?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. 總結(jié)

互聯(lián)網(wǎng)的發(fā)展催生了跨域訪問(wèn)的需求，各種跨域方法和協(xié)議滿足了需求但也增加了各種風(fēng)險(xiǎn)。尤其是XSS和CSRF等攻擊的盛行也得益于此。

了解這些技術(shù)背景有助于在實(shí)際項(xiàng)目中熟練應(yīng)用并規(guī)避各種安全風(fēng)險(xiǎn)。

Reference

[1] 白帽子講Web安全: //www.survivalescaperooms.com/books/164067.html
[2] 使用 JSONP 實(shí)現(xiàn)跨域通信: http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
[3] Cross-origin resource sharing: http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
[4] Cross-domain policy for Flash movies: http://kb2.adobe.com/cps/142/tn_14213.html