JavaScript同源策略和跨域存取的介紹
- 不言原創
- 2018-07-03 17:19:111999瀏覽
這篇文章主要介紹了JavaScript同源策略和跨域訪問,結合實例形式較為詳細的分析了javascript同源策略與跨域訪問的原理、實現、使用方法及相關注意事項,需要的朋友可以參考下
本文實例講述了JavaScript同源策略和跨域存取。分享給大家供大家參考，具體如下：
1. 什麼是同源策略
理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考量實施的非常重要的安全策略。
何謂同源:
URL由協定、網域名稱、連接埠和路徑組成，如果兩個URL的協定、網域和連接埠相同，則表示他們同源。
同源策略:
瀏覽器的同源策略，限制了來自不同來源的"document"或腳本，對目前"document"讀取或設置某些屬性。 （白帽子講web安全性[1]）
從一個網域載入的腳本不允許存取另一個網域的文件屬性。
舉個例子：
例如一個惡意網站的頁面透過iframe嵌入了銀行的登入頁面（二者不同來源），如果沒有同源限制，惡意網頁上的javascript腳本就可以在使用者登入銀行的時候取得使用者名稱和密碼。
在瀏覽器中，3f1c4e4b6b16bbbd69b2ee476dc4f83a、a1f02c36ba31691bcfe87b2722de723b、d5ba1642137c3f32f4f4493ae923989c、2cdf5bf648cf2f33323966d7f58a7f3f等標籤都可以載入跨網域資源，而不受同源限制，但瀏覽器限制了JavaScript的權限使其不能讀取、寫入載入的內容。
另外同源策略只對網頁的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.php.cn"和來自"bbs.php.cn"的頁面，都將document.domain設定為"php.cn"，則來自兩個子網域的腳本即可相互訪問。
出於安全的考慮，不能設定為其他主domain，例如//www.php.cn/不能設定為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沒有關係。我們知道3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤可以載入跨網域的javascript腳本，並且被載入的腳本和目前文件屬於同一個網域。因此在文件中可以呼叫/存取腳本中的資料和函數。如果javascript腳本中的資料是動態產生的，那麼只要在文件中動態建立3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤就可以實現和服務端的資料互動。
JSONP就是利用3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的跨域能力實現跨域資料的訪問，請求動態產生的JavaScript腳本同時帶一個callback函數名稱作為參數。其中callback函數本地文件的JavaScript函數，伺服器端動態產生的腳本會產生數據，並在程式碼中以產生的數據為參數呼叫callback函數。當這段腳本載入到本機文件時，callback函數就被呼叫。
第一個網站的測試頁面（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"}');
为了动态实现JSONP请求，可以使用Javascript动态插入3f1c4e4b6b16bbbd69b2ee476dc4f83a标签：
<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协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
http://localhost:8080/test?callback=test_handler
为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。
2.2 Proxy
使用代理方式跨域更加直接，因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。
使用本方法跨域步骤如下：
1. 把访问其它域的请求替换为本域的请求
2. 本域的请求是服务器端的动态脚本负责转发实际的请求
各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发，如Apache httpd + mod_proxy。
Eg.
为了通过Ajax从http://localhost:8080访问http://localhost:8081/api，可以将请求发往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中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。
实现的基础是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. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。
本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。
Support: [Javascript Web Applications]
* IE >= 8 (需要安装caveat)
* Firefox >= 3
* Safari 完全支持
* Chrome 完全支持
* Opera 不支持
2.3.2 测试
测试页面http://localhost:8080/test3.html使用jquery发送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请求已经发出，请求header中带有
Origin http://localhost:8080
2. 服务器端正确给出response
3. Javascript拒绝读取数据，在firebug中发现reponse为空，并且触发error回调
测试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请求已经发出，请求header中带有
Origin http://localhost:8080
2. 服务器端正确给出response
3. 客户端正常获取数据
测试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函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端发现没有CORS header后不会发送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函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果
测试发现，Access-Control-Allow-Headers是必须的。
CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。
4. Cookie 同源策略
Cookie中的同源只关注域名，忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。
5. Flash/SilverLight跨域
浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4]，设置本服务允许哪些域名的跨域访问。
客户端会首先请求此文件，如果发现自己的域名在访问列表里，就发起真正的请求，否则不发送请求。
<?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放置在网站根目录。
6. 总结
互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。
了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Javascript实现商品秒杀倒计时（时间与服务器时间同步）的解析
以上是JavaScript同源策略和跨域存取的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！