同源策略——瀏覽器安全衛士

時間 2019-11-10

原文原文鏈接

對於軟件開發人員來講，理解同源策略。可以很是好地攻克了一個痛點。 不一樣域名下的資源讀寫 !javascript

古代的楚河漢界明白地規定了兩方的活動界限。假設沒有這些界限，天下必將大亂。相同，在咱們的瀏覽器，也有着一些界限和策略，才讓 Web 世界之因此能如此美好地呈現在咱們面前。這些安全策略有效地保障了用戶計算機的本地安全與Web安全。html

同源策略

瀏覽器有一個很是重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協議。port一樣。不一樣源的client腳(javascript、ActionScript)本在沒明白受權的狀況下，不能讀寫對方的資源。java

同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。
實際上。這樣的策略僅僅是一個規範，並不是強制要求，各大廠商的瀏覽器僅僅是針對同源策略的一種實現。jquery

它是瀏覽器最核心也最主要的安全功能。假設缺乏了同源策略。則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之的。web

假設Web世界沒有同源策略，當你登陸Gmail郵箱並打開還有一個網站時。這個網站上的JavaScript就可以跨域讀取你的Gmail郵箱數據，這樣整個Web世界就無隱私可言了。ajax

cookie 劫持 瀏覽器中的 cookie就變得很不安全，a 域名下的網頁，就可以讀取你瀏覽器中的所有 cookie，假設攻擊者能獲取到用戶登錄憑證的Cookie，甚至可以繞開登錄流程。直接設置這個cookie的值，來訪問用戶的帳號。json

舉例說明

不一樣源舉例跨域
- 域名：
  http://www.bigertech.com、http://bigertech.com、http://bigertech.cn
- 協議：http、https
- port: http://127.0.0.1:800一、http://127.0.0.1:8002
同源舉例
http://www.bigertech.com/a、http://www.bigertech.com/b,這兩個url 僅僅是在同一個域名如下的不一樣文件夾，天然是符合同源策略的瀏覽器

安全防護

client的攻擊主要來自javascript的腳本，通常體現在對未受權的資源進行讀寫操做。安全

Web上的資源有很是多。有的僅僅有讀權限，有的同一時候擁有讀和寫的權限。比方：HTTP請求頭裏的Referer（表示請求來源）僅僅可讀。同源和不一樣源就是依據這個Referer值進行推斷的。而document.cookie則具有讀寫權限。

這種區分也是爲了安全上的考慮。

跨域請求

比方：在 a 頁面使用 AJAX 發送一個請求，請求的地址是另一個網站，
注：
AJAX是Asynchronous JavaScript And XML的縮寫。讓數據在後臺進行異步傳輸。常見的使用場景有：對網頁的局部數據進行更新時，不需要刷新整個網頁。以節省帶寬資源。

AJAX也是黑客進行Webclient攻擊常用的技術，因爲這樣攻擊就可以悄無聲息地在瀏覽器後臺進行。作到「殺人無形」。

點擊查看響應數據：手機歸屬地 API
假設使用 ajax 發送請求。像如下這樣


$.ajax('http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?
tel=15850781443');

響應數據，oop 報錯了

XMLHttpRequest cannot load http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.baidu.com' is therefore not allowed access.

因爲不一樣源，瀏覽器把這個操做給攔截了，而後返回一個錯誤給用戶。

解決的方法

目標網站，假如是http://tcc.taobao.com明白返回HTTP響應頭：

Access-Control-Allow-Origin: http://www.evil.com

或者設置爲 *，贊成所有站點進行同源訪問，但是這樣也太不安全了。

用 jsonp 來解決跨域問題

JSONP(JSON with Padding)是一個非官方的協議。它贊成在server端集成Script tags返回至client，經過javascript callback的形式實現跨域訪問（這不過JSONP簡單的實現形式）。

舉個樣例

client
在client調用提供JSONP支持的URL Service。獲取JSONP格式數據。
比方客戶想訪問http://www.yiwuku.com/myService?

jsonp=onCustomerLoaded
若是客戶指望返回JSON數據：["customername1","customername2"]
那麼真正返回到client的數數據：

callbackFunction([「customername1","customername2"])

<script type="text/javascript">
      function onCustomerLoaded(result, methodName){
          conssole.log(result);//  輸出結果 ["customername1","customername2"]
      }
</script>
<script type="text/javascript" src="http://www.yiwuku.com/myService?jsonp=onCustomerLoaded"></script>

server端：

String callback = request.getParameter("callback");
out.println(callback + "('" + data+ "')");

或者使用 jquery 的ajax 解決方式

$.ajax({   
  url: 'http://localhost:8080/test2/searchJSONResult.action',  
  type: "GET",   
  dataType: 'jsonp',   
  data: {name:」ZhangHuihua」}, timeout: 5000,   
  success: function (json) {  
    //clientjquery預先定義好的callback函數,成功獲取跨域server上的json數據後,會動態運行這個callback函數   
    alert(json);   
  },   
  error: function (){  
    alert("請求失敗！");   
   }  
});

HTML中的script標籤可以載入並運行其它域的JavaScript，因而咱們可以經過script標記來動態載入其它域的資源。

JSONP易於實現，但是也會存在一些安全隱患，假設第三方的腳本任意地運行。那麼它就可以篡改頁面內容，截獲敏感數據。但是在受信任的兩方傳遞數據，JSONP是很合適的選擇。

jsonp 帶來的問題

JSONP爲解決跨站問題帶來便利的同一時候。也存在必定的潛在風險。如下以實例說明其風險。

比方jsonpTest.htm提供jsonp格式的調用。返回如如下格式的callBack({"json":"jsonTest"})的數據。

腳本注入
未對回調的函數名以及輸入內容進行過兩次。
比方用戶輸入如如下請求:
xxx.com/jsonpTest.htm?
jsonp=alert('OK');
則若server只是濾，響應內容爲alert("OK");{"json":"jsonTest"}
假設 jsonp 請求爲：
```
xxx.com/jsonpTest.htm?jsonp=<img onclick=」xxx」/>
```
則若server只是濾，響應內容爲:
<img onclick=」xxx」/>;{xx}
用戶點擊圖片，也會有xss攻擊。
惡意攻擊
對輸入的內容進行安全轉義過濾，卻未限定jsonp回調的合法的字符。如下參數通過安全轉義後仍然不變。
while(true){alert(document.cookie)} 攻擊者就可以使用此參數對用戶進行惡搞。
解決的方法
- 對輸出的內容進行必要的安全轉義
- 限定jsonp的回調方法名的安全字符範圍爲(a-zA-Z0-9$ )
- 設置響應類型是非json或javascript類型，比方text/html。防止攻擊者直接輸入jsonp請求的url。瀏覽器端收到數據時以js的方式執行響應的內容。

跨域的不少其它解決的方法

假設是log之類的簡單單項通訊，新建<img>,<script>,<link>,<iframe>元素，經過src，href屬性設置爲目標url。實現跨域請求
現代瀏覽器中多窗體通訊使用HTML5規範的targetWindow.postMessage(data, origin);，當中data是需要發送的對象，origin是目標窗體的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage發送來的數據，event.origin是發送窗體的origin，event.source是發送消息的窗體引用
內部server代理請求跨域url。而後返回數據
跨域請求數據，現代瀏覽器可以使用HTML5規範的CORS功能，僅僅要目標server返回HTTP頭部Access-Control-Allow-Origin: 就能夠像普通ajax同樣訪問跨域資源