同源策略與跨域處理

同源策略
> 原理: 協議、域名、端口都相同
> 目的: 保證用戶信息安全，防止惡意網站竊取信息
> 限制: 非同源不能訪問
> - cookie、localStorage、webSql、indexDB，
> - DOM沒法獲取
> - Ajax請求不能發送
> 沒有限制: 內部的表單沒限制

同源例子

[http://www.example.com/dir/page.html] 默認80端口
http://www.example.com/dir2/index.html 同源
http://example.com/dir2/index.html 不一樣源（二級域名與一級域名不屬於同源，域名不一樣）
http://v2.example.com/dir2/index.html 不一樣源（域名不一樣）
http://www.example.com:8081/dir/other.html 不一樣源（端口不一樣）
https://www.example.com/dir/page.html 不一樣源（協議不一樣）

如何設置同源策略？

 

【前端方式】- 不多使用
----------- test.xxx.com/a.html ----------------
<script>
document.domain = "test2.xxx.com";//設置同源策略
document.cookie = "test1=hello";
</script>
----------- test2.xxx.com/b.html ----------------
<script>
console.log(document.cookie)
</script>
【後端方式】- 經常使用
Set-Cookie: key=value;domain=test2.xxx.com;path=/

 

跨域實現的幾種方式
> jsonp: 利用script標籤跨域請求，用callback實現

<script src="http://xxx.com/index.php?callback=test"></script>
<script>
   function test(data){console.log(data);}
</script>
//jquery
$.ajax({
   type: 'jsonp',
   success: function(data){
      //jquery自動隱式建立了一個test方法
   }
})

> CROS
> 反向代理
> websocket
> postMessage
> img: 是文件協議（不在同源策略中，所以能夠訪問）

//測試一下手機網速，根據網速，能夠給用戶出一些網速較慢的解決方案:直接跳轉到簡版 s.gif = 1kb
var s = new Image();
var start = Date.now();
s.src = "http://www.xxx.com/s.gif";
s.onload = function(){
   var end = Data.now();
   var t = end - start;
   v = 1kb / t;// 算出 kb/s
   var level = 10 - Math.floor(v / 100);//根據網速進行分級
   //根據分級來處理你想幹的事情
}

把代碼壓縮成圖片

> link: css能夠跨域
> iframe:（不在同源策略中，所以能夠訪問）
> script標籤（不在同源策略中，所以能夠訪問）