同源策略和解決跨域問題

1、什麼是同源

一、什麼是源

　　源（origin）就是協議、域名、端口號。

　　以上url的源就是：https://www.cnblogs.com：80

　　若地址裏面的協議、域名、端口號相同則屬於同源

　　如下是相對於 http://www.a.com/test/index.html 的同源檢測
　　• http://www.a.com/dir/page.html ----成功
　　• http://www.child.a.com/test/index.html ----失敗，域名不一樣
　　• https://www.a.com/test/index.html ----失敗，協議不一樣
　　• http://www.a.com:8080/test/index.html ----失敗，端口號不一樣

 

二、什麼是同源策略 ？

　　同源策略是一個瀏覽器的安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方的資源。因此a.com下的js腳本採用ajax讀取b.com裏面的文件數據是會報錯的。

　• 不受同源策略限制的：

　　（1）、頁面中的連接。重定向以及表單提交是不受同源策略影響的

　　（2）、跨域的引入。可是js不能讀寫加載內容。如嵌入到頁面中的<script src="...">　　　　</script>，<img>，<link>，<iframe>等。

---

 

2、跨域

一、什麼是跨域：

受同源的影響。不一樣源的腳本不能操做其餘源下的對象。要想操做不一樣源的對象就要跨域

 

二、跨域的實現形式：

• 降域 document.domain
同源策略認爲域和子域屬於不一樣的域，如：
child1.a.com 與 a.com，
child1.a.com 與 child2.a.com，
xxx.child1.a.com 與 child1.a.com
兩兩不一樣源，能夠經過設置 document.damain='a.com'，瀏覽器就會認爲它們都是同一個源。想要實現以上任意兩個頁面之間的通訊，兩個頁面必須都設置documen.damain='a.com'。
此方式的特色：
1. 只能在父域名與子域名之間使用，且將 xxx.child1.a.com域名設置爲a.com後，不能再設置成child1.a.com。
2. 存在安全性問題，當一個站點被攻擊後，另外一個站點會引發安全漏洞。
3. 這種方法只適用於 Cookie 和 iframe 窗口。

• JSONP跨域
JSONP和JSON並無什麼關係！
JSONP的原理：（舉例：a.com/jsonp.html想獲得b.com/main.js中的數據）在a.com的jsonp.html裏建立一個回調函數xxx，動態添加<script>元素，向服務器發送請求，請求地址後面加上查詢字符串，經過callback參數指定回調函數的名字。請求地址爲http://b.com/main.js?callback=xxx。在main.js中調用這個回調函數xxx，而且以JSON數據形式做爲參數傳遞，完成回調。咱們來看看代碼：
• // a.com/jsonp.html中的代碼

•

 1 function addScriptTag(src) { 
 2 •    var script = document.createElement('script'); 
 3 •    script.setAttribute("type","text/javascript"); 
 4 •    script.src = src; 
 5 •    document.body.appendChild(script);
 6 •    }
 7 •    window.onload = function () { 
 8 •    addScriptTag('http://b.com/main.js?callback=foo');
 9 •    } //window.onload是爲了讓頁面加載完成後再執行
10 •    function foo(data) { 
11 •    console.log(data.name+"歡迎您");
12 •    };

•//b.com/main.js中的代碼
　　foo({name:"hl"})

•JSONP的缺點

1. 使用這種方法，只要是個網站均可以拿到b.com裏的數據，存在安全性問題。須要網站雙方商議基礎token的身份驗證，這裏不詳述。
2. 只能是GET，不能POST。
3. 可能被注入惡意代碼，篡改頁面內容，能夠採用字符串過濾來規避此問題。

---

 

3、其餘方法

1. HTML5的postMessage方法2. window.name3. location.hash