[問題] 不懂 CORS 之目的

[nevikw39 (▎＃如詩的韻律™♪)]

各位板友好，

我是正在學習前端的新手

最近在寫一個網頁，需要利用爬蟲的方式取得一些資料

然而，卻又遭遇到 CORS 的惡夢

查一堆資料都看得頭暈眼花，JSONP 已經會被 Chrome 檢查 MIME Type，找到一個 proxy
在 local 都正常，推到 GitHub Pages 又噴 CORS error

雖然最終我透過 Netlify 提供的 Redirect Proxy 暫時解決我的問題

但我仍然很疑惑 CORS 的目的究竟為何？？

如果是要保護伺服器端的資料，應該用 API key 之類的方法，否則還是會被其他爬蟲擷
取啊

如果是要保護客戶端也很不合理啊，怎麼是由伺服器端加上 header 來保證安全，要注入
惡意程式碼難道就不會加上 header 嗎？？

看起來整個 CORS 似乎只是為惹阻止前端爬蟲而已，它到底是要幹嘛啊？？

還請各位大大不吝賜教，感激不盡

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.240.165.72 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1624612621.A.E53.html
→ ssccg: 防止XSS攻擊，瀏覽器端存的資料的安全保護是以origin為信任
→ ssccg: 單位，不同origin的script不能互相存取在瀏覽器的資料
→ ssccg: 然後「伺服器端加上 header 來保證安全」是你搞反了吧，預
→ ssccg: 設是不能存取=安全，加上header是指示瀏覽器放寬限制=危險
→ ssccg: 這機制跟爬蟲沒關，爬蟲只是一種script，從後端自己發沒有
→ ssccg: 不會動到瀏覽器的資料所以沒關係，前端是所有XSS都不行
→ ssccg: 可以理解你程式新手寫個js用瀏覽器跑是很直觀的想法，但是
→ ssccg: 你要知道瀏覽器不是用來給你跑程式的，是給一般人上網的
還是不懂怎麼是伺服器端放寬限制，瀏覽器就可以存取？？我感覺應該由瀏覽器來決定外部
資源是否可以被信任

而且我只是要 fetch JSON 而已，我沒有要執行它阿

※ 編輯: nevikw39 (123.240.165.72 臺灣), 06/25/2021 18:23:54
→ ssccg: 你可能還有一個問題是發request哪裡動到資料，發request時
→ ssccg: 會自動帶入該origin的Cookie，接收時會收到Set-Cookie，這
→ ssccg: 些Cookie就是不能讓不同origin存取的資料
推 vi000246: 等你當駭客的時候就會覺得cors很難搞了 好不容易找到漏
→ vi000246: 洞 結果注入的惡意程式碼被cors限制
→ vi000246: cors是瀏覽器做的限制 你用後端寫爬蟲就能正常爬取了
CORS 就讓我超頭痛，資安領域看起來真不簡單

→ ssccg: 某個origin的資料，要放寬給哪些其他origin存取，當然是伺
→ ssccg: 服器決定啊，瀏覽器難道還要內建全世界網站要開放的名單?
→ ssccg: 想到你可能搞錯一點，nevikw39.com 存取 example.com 被擋
→ ssccg: 不是保護 nevikw39.com 用到外部資源，是要保護example.com
→ ssccg: 存在瀏覽器端的資料不會被 nevikw39.com 的網頁存取
所以是 CORS 的目的其實是要防止某個網頁資源的 cookie, storage 被其他網頁載入？？

結果連帶使得其他網頁不能取得某網頁資源？？

我現在這樣理解正確嗎

※ 編輯: nevikw39 (123.240.165.72 臺灣), 06/25/2021 18:57:33
→ ssccg: 所以當然由example.com的response header設定CORS規則
我大概想通惹

比如今天我的瀏覽器有登入 Google, Facebook 等服務，如果沒有 CORS 那麼所有網頁都可
以幫我發文之類的，那就可怕惹

※ 編輯: nevikw39 (123.240.165.72 臺灣), 06/25/2021 19:02:51
推 fantania: 爬蟲應該要用Selenium之類的webdriver去爬，不然會被擋
→ ku399999: 連帶兩個字是多餘的