带你弄懂同源政策 (Same Origin Policy) 与跨网域 (CORS)

我相信每一个前端在对接 API 时,多多少少一定遇过以下错误:

带你弄懂同源政策 (Same Origin Policy) 与跨网域 (CORS)

虽然要解决此问题大部分还是需要后端帮忙,但前端也需要知道为什么会发生、要如何解决。

同源政策 (Same Origin Policy)

同源政策 (Same Origin Policy)

同源政策是网站安全的基础。https://domain-a.com 只能存取自己网站裡的资源 (图片、影片、源码代等),不允许网站 https://domain-b.com 来存取。想要存取跨来源资源必须在某些特定情况下才被允许。

同源政策是网站安全的基础

画清楚界线自己网站自己管,别人读取不到也改不了。这很合理,不然若自己网站被别人任意修改、被恶意人士读取机密资讯那就糟糕了!若没有这层防护,坏人就可以任意新增删除我们在各大社区里面留言了、也可以轻易登入我们的银行帐户 😨。

怎麽判断同不同源?

只要 schemedomainport 一样就会被视为同源 (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 对于不同 port 会视为同源

但我网站明明就引入很多跨来源的资源啊?

网页常见的跨来源资源真的不少,例如以下:

网页常见的跨来源资源

没错,在某些情况下跨来源是被允许的,不受同源策略限制

跨来源嵌入通常被允许 (embed)

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

跨来源写入通常被允许 (writes)

可以在藉由 <form>在 domain-a.com 发 request 给 domain-b.com,当然透过连结 links 或直接 redirect 到别的网站也是被允许的。

跨来源读取通常被禁止 (reads)

domain-a.com 不能读取 domain-b.com 的 cookie、XMLHttpRequest ,Fetch API 也都无法被读取,会回报错误:

跨来源读取通常被禁止 (reads)

同源政策 (Same Origin Policy) 允许 HTML tag 产生的跨来源写入 (write)/嵌入 (embed)/读取 (read),但对于 JS 的跨来源 write/embed/read 是有限制的。

那什么是 Cookie 的同源 ?

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

前端都知道 Cookie 是什麽,简单来说就像一张通行证,通行证裡面会存有一组 Session ID 来验证你身份,就像你加入某某俱乐部一样,认卡不认人,谁拥有这张通行证就可以进入俱乐部。

Cookie 的同源跟以上所说的 DOM 同源有点不同 (图片或是源代码等资源被载入浏览器最后都会变成 DOM 的元素)。

那什么是 Cookie 的同源 ?

只要 domain 跟 Path 与 Cookie 上的一样就会被视为同源。若经过一些设定才会判断 scheme 要是 http 或 https。

// 加了 Secure 会限定此 Cookie 只能以 https 传送
Set-Cookie: id=1234567; domain=mybj123.com; Secure

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

对了,同源政策是浏览器专属,所以才会发生用 postman 可以拿到 API 回应但放到网站上就是会失败的状况。

CORS (Cross-Origin Resource Sharing)

CORS 翻成中文就是跨网域资源共享,也就是你可以用我资源我也可以用你的

CORS (Cross-Origin Resource Sharing)

为什麽会有 CORS

Same Origin Policy 虽然不错,因为他防止了一些恶意的 script 攻击,但总不会每一个跨网域都是恶意的; 也不可能一间公司拥有所有的资源,有时还是必须串接第三方资源,例如 Facebook API、Google Map、政府提供的公开 API 等。

怎么设置?

设置 CORS 相当容易,它其实只是 HTTP-Header 而已,这些设定基本上都是在后端,所以前端只需知道概念跟怎麽看 Responce Header 即可。

当前端用 fetch 或 XMLHttpRequest 要存取资源时,在 request 之前都会先发送 preflight request 确定 server 端有设定正确的相关 Http-Header,若检查通过,才会实际发出 requeest

例如:

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

那 request header 会大概长这样:

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

preflight reques 会大概是这样:

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

可以在 developer tools 中的 Network 看到相关的 Responce Header。

Network 看到相关的 Responce Header

当然后端可以把权限开到最大让任何人都可以读取,不受同源政策的限制。

Access-Control-Allow-Origin: *

但跨来源还是有许多风险的,所以建议还是不要直接 *

// 还是会针对特定网站开权限
Access-Control-Allow-Origin: https://foo.example

// 可以设定允许哪些 method,defult 是全部方法
Access-Control-Request-Method: POST, GET

// 允许 client side 带 cookie 等验证,defult 是 false
Access-Control-Allow-Credentials: true

preflight request?

不是 simple request 都会先发一个 preflight request 确定 server 端有设定正确的相关 Http-Header,也就是会先问 server 是否允许这个 request,允许的话才会正式 request。像 HTTP PUT/DELETE method,或 Content-Type: application/json 都会先发 preflight request。

有同源政策的保护,我的网站就是安全的吗 ?

答案:不能。

Same Origin Policy 只是最基本的保护而已,实际上 attackers 还是可以聪明地找到漏洞攻击你的网站。例如 Cross-site scripting (XSS) 可以欺骗网站来绕过同源政策的保护,这是一个很大的问题,因为同源政策下浏览器信任底下所有资料存取都是安全的,但这样被恶意注入利用很有可能就让你网站挂掉,更严重是用户敏感资料被洩漏,应该被保密的资料被坏人利用。

HTML5 Security Cheatsheet 这个网站蛮酷的,提供各种 XSS 变形手法程式以及范例可以上去玩玩看

HTML5 Security Cheatsheet

要确保自己网站的安全,还是需要下功夫的,后期也会介绍一些简单的方法来保护你的网站!

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 带你弄懂同源政策 (Same Origin Policy) 与跨网域 (CORS)

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们