# Explain the same-origin policy with regards to JavaScript.

> 同源策略可以防止JavaScript跨域發出request，也就是可以防止一個惡意的Script存取別人網站裏的DOM元素，即是別人網站裏的網絡資源。

這是基於網絡安全的考量，避免有駭客惡意呼叫其他人的網絡服務。若沒有這個政策保護，別人就可以任意修改和存取你網頁裏的資源了。

## 什麼樣的情況算是同源

兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置。


:::info
所以，不同**協定(http 和 https)** 、不同**port**、不同**domain**就是不同源。
:::

---

## 補充

### 不允許跨來源存取：<span class="red">read</span>

也就是說，當我們接別人的API時（從目前瀏覽器的網頁向跟自己「不同源」的網址發出請求和存取資料），多數就是不同源的情況，這樣的行為叫做「跨來源存取」，**一般情況下是不允許的**，只有「同源」才會被允許。

### 被允許的跨來源存取：<span class="green">write</span>, <span class="green">embedding</span>

**有哪些跨來源互動功能**

1. <span class="green">**跨來源寫入(Cross-origin writes)：允許**</span>

例如：表單送出(form)、連結(link)、重新導向(redirect)

2. <span class="green">**跨來源嵌入(Cross-origin embedding)：允許**</span>

例如：嵌入圖片`<img>`、影片`<video>`、`<iframe>`、放在`<script>`裏的程式碼、CSS stylesheet `<link rel="stylesheet" href="...">`等等（只要有 `src`這個屬性的標籤都可以）。然而，雖然我的網頁可以顯示到這些資源，但我的JavaScript並不能讀取這些資源的內容。

3. <span class="red">**跨來源讀取(Cross-origin read)：不允許**</span>

例如： XMLHttpRequest 或是 Fetch API。

其中，跨來源嵌入是JSONP 可以執行的原因。

---

### 我真的需要其他網域的資源！
**==跨來源資源共用（CORS）==**

跨來源資源共用（Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理（例如，瀏覽器）存取其他來源（網域）伺服器特定資源權限的機制。


> Server：「雖然請求資料的網站與我不同源，但請准許他讀取這則HTTP response。」

---

### **對 Cookie 存取的怪設計**

由 「同源政策」(Same Origin Policy) 對於「同源」的判定我們可以知道，即使是母網域與子網域也是會被視為跨來源的通訊，而被禁止。在其他類型資源的存取上，確實會被禁止。但對於 Cookie 的存取，出現了例外！
:::warning
Cookie的同源政策是允許子網域的JavaScript程式碼修改/覆蓋母網域的 Cookie！
:::
子網域修改過的 Cookie，會被母網域不知情地拿去使用，萬一子網域被駭客攻陷，那麼母網域的 Cookie 也會被惡意破壞。

- **判定 Cookie 是否「同源」**


只要連上的網站其 **Domain 跟 Path** 與 Cookie 一致，就會被視為同源．拜訪該網站時，Cookie 就會被送出。

- **cookie的傳輸行為**
1. 不同源的 Cookie ，在傳輸時會送到各自來源的主機。
2. 經過設定，子網域`(login.game.com)` 與母網域`(game.com)`的 Cookie 可以共用。

例如，當 Cookie 的 domain 被設定為：

        Set-Cookie: name=value; domain=game.com //母網域

此時的 Cookie 不會與子網域(例如：login.game.com)共用。

但若是設定為：

        Set-Cookie: name=value; domain=.game.com //子網域

則該 Cookie 可以在瀏覽器連上子網域時，也會一並回傳到網站主機。

## 參考資料

[同源政策 (Same-origin policy) - Web 安全 | MDN](https://developer.mozilla.org/zh-TW/docs/Web/Security/Same-origin_policy)

[跨來源資源共用（CORS） - HTTP | MDN](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS)

<style>
.red {
color: red;
}
.green{
color:green;
}
</style>