相信每一個(gè)前端在對(duì)接 API 時(shí)，多多少少一定遇過(guò)以下錯(cuò)誤：

雖然要解決此問(wèn)題大部分還是需要后端幫忙，但前端也需要知道為什么會(huì)發(fā)生、要如何解決。

同源政策 (Same Origin Policy)

同源政策是網(wǎng)站安全的基礎(chǔ)。https://domain-a.com 只能存取自己網(wǎng)站裡的資源 (圖片、影片、源碼代等)，不允許網(wǎng)站 https://domain-b.com 來(lái)存取。想要存取跨來(lái)源資源必須在某些特定情況下才被允許。

畫(huà)清楚界線自己網(wǎng)站自己管，別人讀取不到也改不了。這很合理，不然若自己網(wǎng)站被別人任意修改、被惡意人士讀取機(jī)密資訊那就糟糕了！若沒(méi)有這層防護(hù)，壞人就可以任意新增刪除我們?cè)诟鞔笊鐓^(qū)里面留言了、也可以輕易登入我們的銀行帳戶(hù) 。

怎麼判斷同不同源?

只要 scheme、domain、port 一樣就會(huì)被視為同源 (same-origin)，其他則是不同源

若以 https://domain-a.com:80/hannah-lin 做范例，我們可以因此判斷跟以下是否同源:

http://domain-a.com → 不同源．scheme 不同
https://domain-a.com/mike → 同源
https://news.domain-a.com → 不同源．domain 不同
https://domain-a.com:81 → 不同源．port 不同
https://domain-b.com → 不同源．domain 不同

Note. IE 對(duì)于不同 port 會(huì)視為同源

但我網(wǎng)站明明就引入很多跨來(lái)源的資源啊？

網(wǎng)頁(yè)常見(jiàn)的跨來(lái)源資源真的不少，例如以下:

沒(méi)錯(cuò)，在某些情況下跨來(lái)源是被允許的，不受同源策略限制

跨來(lái)源嵌入通常被允許 (embed)

像范例的 <script src=”…”></script>、<link rel=”stylesheet” href=”…”>、<iframe>、圖片 <img>、<video>、或是 @font-face <object> 、 <embed>.等等都是跨來(lái)源嵌入。

跨來(lái)源寫(xiě)入通常被允許 (writes)

可以在藉由 <form>在 domain-a.com 發(fā) request 給 domain-b.com，當(dāng)然透過(guò)連結(jié) links 或直接 redirect 到別的網(wǎng)站也是被允許的。

跨來(lái)源讀取通常被禁止 (reads)

domain-a.com 不能讀取 domain-b.com 的 cookie、XMLHttpRequest ，F(xiàn)etch API 也都無(wú)法被讀取，會(huì)回報(bào)錯(cuò)誤:

同源政策 (Same Origin Policy) 允許 html tag 產(chǎn)生的跨來(lái)源寫(xiě)入 (write)/嵌入 (embed)/讀取 (read)，但對(duì)于 JS 的跨來(lái)源 write/embed/read 是有限制的。

那什麼是 Cookie 的同源 ?

Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: id=1234567; domain=hello.com

前端都知道 Cookie 是什麼，簡(jiǎn)單來(lái)說(shuō)就像一張通行證，通行證裡面會(huì)存有一組 Session ID 來(lái)驗(yàn)證你身份，就像你加入某某俱樂(lè)部一樣，認(rèn)卡不認(rèn)人，誰(shuí)擁有這張通行證就可以進(jìn)入俱樂(lè)部。

Cookie 的同源跟以上所說(shuō)的 DOM 同源有點(diǎn)不同 (圖片或是源代碼等資源被載入瀏覽器最后都會(huì)變成 DOM 的元素)

只要 domain 跟 Path 與 Cookie 上的一樣就會(huì)被視為同源。若經(jīng)過(guò)一些設(shè)定才會(huì)判斷 scheme 要是 http 或 https。

// 加了 Secure 會(huì)限定此 Cookie 只能以 https 傳送
Set-Cookie: id=1234567; domain=hello.com; Secure

另外要注意的是子網(wǎng)域的 cookie 是可以存取到母網(wǎng)域 cookie 的 (api.domain-a.com 跟 domain-a.com cookie 可以被共用)

對(duì)了，同源政策是瀏覽器專(zhuān)屬，所以才會(huì)發(fā)生用 postman 可以拿到 API 回應(yīng)但放到網(wǎng)站上就是會(huì)失敗的狀況。

CORS (Cross-Origin Resource Sharing)

CORS 翻成中文就是跨網(wǎng)域資源共享，也就是你可以用我資源我也可以用你的

為什麼會(huì)有 CORS

**Same Origin Policy ** 雖然不錯(cuò)，因?yàn)樗乐沽艘恍阂獾?nbsp;script 攻擊，但總不會(huì)每一個(gè)跨網(wǎng)域都是惡意的; 也不可能一間公司擁有所有的資源，有時(shí)還是必須串接第三方資源，例如 Facebook API、google Map、政府提供的公開(kāi) API 等。

怎么設(shè)置

設(shè)置 CORS 相當(dāng)容易，它其實(shí)只是 HTTP-Header 而已，這些設(shè)定基本上都是在后端，所以前端只需知道概念跟怎麼看 Responce Header 即可。

當(dāng)前端用 fetch 或 XMLHttpRequest 要存取資源時(shí)，在 request 之前都會(huì)先發(fā)送 preflight request 確定 server 端有設(shè)定正確的相關(guān)Http-Header，若檢查通過(guò)，才會(huì)實(shí)際發(fā)出 requeest。例如

fetch('https://xxx.com/data/', {
  method: 'POST',
  headers: {
    'Content-Type': 'Application/json',
  }
})

那 request header 會(huì)大概長(zhǎng)這樣

POST /data/
Host: xxx.com
Origin: https://myweb.com
Content-Type: application/json

preflight reques 會(huì)大概是這樣:

OPTIONS /data/
Host: xxx.com
Origin: https://myweb.com/
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

可以在 developer tools 中的 Network 看到相關(guān)的 Responce Header

當(dāng)然后端可以把權(quán)限開(kāi)到最大讓任何人都可以讀取，不受同源政策的限制

Access-Control-Allow-Origin: *

但跨來(lái)源還是有許多風(fēng)險(xiǎn)的，所以建議還是不要直接 *。

// 還是會(huì)針對(duì)特定網(wǎng)站開(kāi)權(quán)限
Access-Control-Allow-Origin: https://foo.example

// 可以設(shè)定允許哪些 method，defult 是全部方法
Access-Control-Request-Method: POST, GET

// 允許 client side 帶 cookie 等驗(yàn)證，defult 是 false
Access-Control-Allow-Credentials: true

preflight request?

不是 simple request 都會(huì)先發(fā)一個(gè) preflight request 確定 server 端有設(shè)定正確的相關(guān) Http-Header，也就是會(huì)先問(wèn) server 是否允許這個(gè) request，允許的話才會(huì)正式 request。像 HTTP PUT/DELETE method，或 Content-Type: application/json 都會(huì)先發(fā) preflight request。

有同源政策的保護(hù)，我的網(wǎng)站就是安全的嗎 ?

答案：不能。

Same Origin Policy 只是最基本的保護(hù)而已，實(shí)際上 attackers 還是可以聰明地找到漏洞攻擊你的網(wǎng)站。例如 Cross-site scripting (XSS)可以欺騙網(wǎng)站來(lái)繞過(guò)同源政策的保護(hù)，這是一個(gè)很大的問(wèn)題，因?yàn)橥凑呦聻g覽器信任底下所有資料存取都是安全的，但這樣被惡意注入利用很有可能就讓你網(wǎng)站掛掉，更嚴(yán)重是用戶(hù)敏感資料被洩漏，應(yīng)該被保密的資料被壞人利用。

HTML5 Security Cheatsheet 這個(gè)網(wǎng)站蠻酷的，提供各種 XSS 變形手法程式以及范例可以上去玩玩看

要確保自己網(wǎng)站的安全，還是需要下功夫的，接下來(lái)也會(huì)介紹一些簡(jiǎn)單的方法來(lái)保護(hù)你的網(wǎng)站！

作者：HannahLin 來(lái)源：medium 原文：https://medium.com/starbugs/%E5%BC%84%E6%87%82%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-same-origin-policy-%E8%88%87%E8%B7%A8%E7%B6%B2%E5%9F%9F-cors-e2e5c1a53a19