儒道哲學的浪漫人生

　　很長一段時間以來對Web同源策略總是看了又忘，忘了又看，雖然工作上總會用到，但就容易變成只保持一個很模糊的概念，今天小複習一下，來統整一下Web同源策略的概念。

• 什麼是Web同源策略?

　　簡單說就是　不同一個域名的網站不得互相請求存取彼此的資源，就是自己的車自己開，別人不可以開的概念！

　　那麼 Web “同源” 的定義是什麼呢？ 在這邊要說明：”同源=同域名”，總共必須符合3個條件：1).同樣的通訊協定 2).同樣的網站域名 3).同樣的應用端口(Port)。　

　　同樣的通訊協定是指兩個同源網站都是使用”http”或”https”協定，如果其中一個是http而另一個是https則網站不同源，例如：http://test.source.com 和 https://test.source.com 是不同源的，因為一個是http，另一個是https。

　　同樣的網站域名則是網站主機域名樣完全一樣，即使是同樣網域的不同子域名之間也屬於不同源，或者父域與子域名也是不同源。例如：https://test.source.com(父域) 與 https://mail.test.source.com(子域)並非同源。而https://mail.test.source.com(子域)和https://login.test.source.com(子域)之間亦非同源。

　　然後同樣的網站協定和主機域名之外，應用端口也必須完全相同才是同源，例如 http://test.source.com:8080 和 http://test.source.com:8088 因為端口不同所以也不屬同源。

　　因此以下狀況皆符合三個同源條件的兩個網站才算同源：A. http://test.source.com/files/test.css 同源 http://test.source.com/secret/test.pdf B. https://mail.test.source.com/users/ 同源 https://mail.test.source.com/inbox/  以上兩例都是同源，只是存取的目錄或檔案位置不同而已。

• AJAX 與同源策略的關係?

  AJAX是客戶端瀏覽器利用JavaScript XMLHttpRequest 物件即時向後端伺服器網站發起非同步資源請求的動態更新前端網頁部份組件內容的技術，它與同源策略的關係就是前端Javascript可能向不同源的後端網站發起跨域資源請求，此時前端AJAX就會因為違反同源策略而無法獲取所須資源或資料。這其實是保護後端資源不會被不同源前端惡意網站所存取的一個安全作法。

　　但是很多情況下前端的域名可能會和後端域名不同，例如前端是後端子域網站之一，欲向父域網站請求資源，又或者後端網站是public information的網站，前端網站想透過AJAX取得使用者感興趣的公開資訊(如:氣候狀況)，這時都有可能需要允許AJAX跨域請求，其作法可以就是前端網站發起請求時要自帶Header “Origin:請求資源的網域名稱”，當後端接收到Origin並允許該跨域存取要求時，亦在回應Header中添加 ”Access-Control-Allow-Origin: 允許請求資源的域名”，亦即當後端回應的 “Access-Control-Allow-Origin” http response header 內容包含 “Origin” http request header的域名時，則允許跨域Origin的請求，這就是所謂的 ”CORS( Cross-Origin Resource Sharing)” 跨域請求方案。

Note: 當 後端設定 HTTP Response Header “Access-Control-Allow-Origin : *” 代表允許任何網站發起跨域請求。

• iFrame 與 同源策略 關係

　　iFrame是在父網頁中直接內嵌另一個網站內容的 HTML Tag. 在被內嵌iFrame的父網頁中，iFrame就是它的子網頁，在這情況下父網頁與iFrame子網頁是允許不同域的。

　　而如果父網頁與iFrame子網頁是不同域的話，則父頁與子頁之間不允許跨域資源的讀寫操作，但iFrame子頁仍然可以對父頁的location屬性進行寫入的操作，但無法讀取父頁的location。

　　另一方面父頁與子頁iFrame如果是同域的話，則彼此可透過調用對方的contentWindow物件來操作對方的DOM文件內容，但這本來就是同域資源所允許的事。