問答
1. 什么是同源策略？
同源定義：所謂同源是指，域名，協議，端口相同。
<pre>例：http://www.x.com/index.html（與以下URL對比） http://www.x.com/reg.html (同源) http://1s.x.com/reg.htm(域名不同，不同源) https://www.x.com/index.htm(協議不同，不同源) http://www.x.com:8080/reg.html (端口不一致，不同源)</pre>
同源策略:同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。同源策略規定不同源的客戶端腳本未經明確授權的情況下，不能讀寫對方的資源，但是可以引用。
<pre>a.com/index.html 可以引用b.com/main.js 可以引用b.com/style.css 可以引用b.com/logo.bng 但是a.com里面的b.com/main.js不能對b.com的資源進行讀寫（ajax報錯）</pre>
2. 什么是跨域？跨域有幾種實現形式？
跨域：指不同腳本之間的相互訪問，由于瀏覽器同源策略的限制，不同域名下的腳本之間不可以相互讀寫數據，這種情況下我們就需要用到跨域請求。
跨域的情況：
跨域的形式：
-
降域：
- 定義及作用：在同一主域名下進行降域。通過降域可以使兩個一級域名相同，二級域名不同的網頁實現跨域資源共享。如child1.a.com和child2.a.com,他們有共同的父域名a.com，同時在當前頁面和iframe加上document.domain = a.com進行降域處理。
-
缺點：
- 適用場景有限：它要求兩個域名是父子域名的關系，需要在ifame嵌套時有用。
- 安全性低：當子域名被攻擊或者惡意注入時，父域名下的信息會被暴露。
-
JSONP
- 原理：通過script方式請求資源，并把回調函數以參數的形式傳遞給服務端，并在服務端執行回調函數。
-
缺點：
- 安全性問題，任意網站只要通過jsonp方式就可以跨域訪問目標域名下的信息，那么如何解決？在跨域請求數據時在參數中加上與目標域名約定好的一個token變量，這樣其他網站訪問該域名時，目標網站通過辨認這個約定好的信息而決定是否可以被跨域訪問。
- 不能用POST方法獲取數據，只能用GET方法獲取數據。
- callback方法由于是根據用戶需求自己實現的，可能會被惡意注入腳本，獲取隱私信息。
-
CORS
- 原理：使用"Origin:"請求頭和"Access-Control-Allow-Origin"響應頭來擴展HTTP。其實就是利用新的HTTP頭部來進行瀏覽器與服務器之間的溝通。
- 缺點：IE瀏覽器不支持或者部分支持CORS方式
-
postMessage
- postMessge()是HTML5新定義的通信機制。所有主流瀏覽器都已實現。該API定義在Window對象。該方法可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。
-
window.name實現的跨域數據傳輸
- window 對象的name屬性是一個很特別的屬性，當該window的location變化，然后重新加載，它的name屬性可以依然保持不變。那么我們可以在頁面 A中用iframe加載其他域的頁面B，而頁面B中用JavaScript把需要傳遞的數據賦值給window.name，iframe加載完成之后（iframe.onload），頁面A修改iframe的地址，將其變成同域的一個地址，然后就可以讀出iframe的window.name的值了（因為A中的window.name和iframe中的window.name互相獨立的，所以不能直接在A中獲取window.name，而要通過iframe獲取其window.name）。這個方式非常適合單向的數據請求，而且協議簡單、安全。不會像JSONP那樣不做限制地執行外部腳本。
-
location.hash
- 因為父窗口可以對iframe進行URL讀寫，iframe也可以讀寫父窗口的URL，URL有一部分被稱為hash，就是#號及其后面的字符，它一般用于瀏覽器錨點定位，Server端并不關心這部分，應該說HTTP請求過程中不會攜帶hash，所以這部分的修改不會產生HTTP請求，但是會產生瀏覽器歷史記錄。此方法的原理就是改變URL的hash部分來進行雙向通信。每個window通過改變其他 window的location來發送消息（由于兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值，所以要借助于父窗口域名下的一個代理iframe），并通過監聽自己的URL的變化來接收消息。這個方式的通信會造成一些不必要的瀏覽器歷史記錄，而且有些瀏覽器不支持onhashchange事件，需要輪詢來獲知URL的改變，最后，這樣做也存在缺點，諸如數據直接暴露在了url中，數據容量和類型都有限等。
3. jsonp 的原理是什么?
原理：因為通過script標簽引入的js是不受同源策略的限制的，所以我們可以通過script標簽引入一個js或者是一個其他后綴形式（如php，jsp等）的文件，此文件返回一個js函數的調用，如返回JSONP_getUsers(["mike","john","ruby"])，也就是說此文件返回的結果調用了JSONP_getUsers函數，并且把["mike","john","ruby"]傳進去，這個["mike","john","ruby"]是一個用戶列表。那么如果此時我們的頁面中有一個JSONP_getUsers函數，那么JSONP_getUsers就被調用到，并且傳入了用戶列表。此時就實現了在本域獲取其他域數據的功能，也就是跨域。
4. CORS是什么?
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制，實現原理是服務器在響應頭加入Access-Control-Allow-Origin字段，如果發出請求的網站包含在被請求網站的允許名單中，就能實現跨域AJAX請求，它支持現代瀏覽器，IE支持10以上。
練習
本地搭建服務器，演示同源策略。
- 本地搭建服務器（如果使用 SAE 可創建不同的代碼版本，這樣可通過1.xxx.sinapp.com和2.xxx.sinapp.com 訪問了）
修改 本地host，通過不同域名訪問本地服務器。比如訪問http://a.com/index.html, http://b.com/ajax.php，本質是
在 index.html 里使用 ajax 接口訪問 http://b.com/ajax.php 里的數據。
查看輸出報錯
-
同個IP不同域名：通過設置hosts文件，對本機127.0.0.1設置多個域名
-
在http://snow.com/task31.html里使用ajax接口訪問http://xmz.com/ajax.php。
snow.com/task31.html
ajax請求發送失敗，查看輸出報錯：
至少使用一種方式解決跨域問題
- CORS方式：在xmz.com/ajax.php增加：header('Access-Control-Allow-Origin:http://www.snow.com');如下：
成功獲取到了xmz.com/ajax.php的數據，輸出結果如下：
- jsonp方式：利用動態的script便簽的創建獲取到數據
輸出結果：
本文版權歸本人和饑人谷所有，轉載請注明來源。
