前端那些事（一）跨域

抽絲剝繭

爲何會出現跨域問題？

瀏覽器基於 同源策略 作出的限制。

同源策略是什麼？

同源策略 限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

同一個源是如何定義的？

兩個頁面具備相同協議（http，https），相同端口，相同域名。
下表給出了相對http://store.company.com/dir/page.html同源檢測的示例:

URL	結果	緣由
http://store.company.com/dir2/other.html	成功	只有路徑不一樣
http://store.company.com/dir/inner/another.html	成功	只有路徑不一樣
https://store.company.com/secure.html	失敗	不一樣協議 ( https和http )
http://store.company.com:81/dir/etc.html	失敗	不一樣端口 ( http:// 80是默認的)
http://news.company.com/dir/other.html	失敗	不一樣域名 ( news和store )

同源策略中的安全機制的應用場景是什麼？

• CSRF（跨站請求僞造）
• 點擊劫持

CSRF 是什麼？

CSRF（跨站點請求僞造）是一種冒充受信任用戶併發送網站不須要的命令的攻擊。P.S：還有一個相似的攻擊叫XSS（跨網站腳本）攻擊。

點擊劫持 是什麼？

點擊劫持，clickjacking，也被稱爲UI-覆蓋攻擊。這個詞首次出如今2008年，是由互聯網安全專家羅伯特·漢森和耶利米·格勞斯曼獨創的。
它是經過覆蓋不可見的框架誤導受害者點擊。
雖然受害者點擊的是他所看到的網頁，但其實他所點擊的是被攻擊者精心構建的另外一個置於原網頁上面的透明頁面。
這種攻擊利用了HTML中標籤的透明屬性。

如何解決

關於跨域的背景介紹就到這裏告一段落了，有興趣的朋友能夠延伸閱讀關於 CSRF 攻擊，點擊劫持，XSS攻擊等相關知識點。文末會給出一些參考資料。下面咱們繼續來看看如何解決跨域問題。

JSONP

首先，在HTML中，有一些標籤是不受跨域影響的，例如：script，img，iframe 等標籤。 而JSONP 方式實現跨域請求就是利用了上述的script標籤。實現原理簡單的說就是：經過動態建立script標籤，利用script中的src 不受同源策略限制的特性來跨域獲取數據。具體示例代碼網上不少，這裏我就不貼了，比較關鍵的點是 callback 的名稱的先後端統一。另外，JSONP只能發送GET請求。

iframe+form

能夠實現post的跨域請求。其實現原理也是經過iframe 標籤的不受跨域影響+form表單的post提交方式而實現的。

document.domain

document.domain 只能在子域訪問其父域時使用。
例如：www.baidu.com 能夠經過設置document.domain="baidu.com" 訪問其父域 baidu.com.
使用 document.domain 來容許子域安全訪問其父域時，您須要在父域和子域中設置 document.domain 爲相同的值。這是必要的，即便這樣作只是將父域設置回其原始值。不這樣作可能會致使權限錯誤。
P.S: baidu.com 爲一級域名,帶前綴 www 的www.baidu.com 爲二級域名。

CORS

CORS 是在同源策略中建議的，標準的跨域方式，它經過額外的Http Header 來告訴瀏覽器在一個源（域）上運行的Web應用程序有權從不一樣來源的服務器訪問所選資源。
CORS 實現的方式主要是後端設置  Access-Control-Allow-Origin：*，經過CORS實現跨域訪問，基本上和前端沒有關係了，前端請求和日常幾乎同樣。P.S：IE10 如下不支持CORS。
關於CORS中的簡單請求，非簡單請求等更詳細的信息，能夠看看 阮一峯-跨域資源共享 CORS 詳解

Nginx代理

前端請求代理服務器，代理將請求轉發到真正的後端域名上。這種方式和CORS 的指定容許某個域名訪問的方式是同樣的，不過好處是保護了真正的後端域名。

總結

若是遇到了跨域問題不要慌，首先檢查前端服務和所請求的資源是不是同一個域，若是不是同一個域則按照上述方式和後端進行溝通，解決跨域問題。而後根據項目的實際須要來選擇跨域方式，如客戶端能保證支持IE10以上，建議使用後2種方式實現跨域訪問。
跨域的問題其實不難，難的是後面所涉及到的各類Web攻擊方式和防範策略。在瞭解跨域的同時，瞭解這些Web 安全防範策略纔是真正的理解了跨域這件事情。
關於Web 安全的問題，能夠參考我 的這篇文章：「譯」Web 安全高級主題。

最後，感謝閱讀！

參考資料

• 同源策略
• Same Origin Policy
• 不要再問我跨域的問題了
• 淺談 CSRF 攻擊
• XSS攻擊進階篇——那些年咱們看不懂的XSS
• 阮一峯-跨域資源共享 CORS 詳解