Web世界的邦交國政策 — 跨來源資源共用(Cross-Origin Resource Sharing, CORS)

更新 發佈閱讀 4 分鐘

互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO

raw-image

CORS(Cross-Origin Resource Sharing),中文為跨網域資源共用,上一篇我們談到「Web - 同源政策(Same Origin Policy)」,概念很好沒錯,防止了一些惡意的攻擊,以一個國家來說,總不可能永遠封閉大門,拒絕對外交流,將所有其他來源都視為攻擊,因此才造就了CORS,透過有限度的開放,讓特定來源可以進入。

CORSSame Origin Policy的一種特別條款,簡單來說就是「我需要事前準備哪些東西?」才能跨越同源的限制,順利存取資源,就如同國家之間的入境一樣,需要事先準備護照,而根據政策的制定來檢核哪些國家的人能夠進入本國。


🔔還沒成為Potato會員的朋友點這裡加入哦,撰寫文章還能挖礦打造被動收入 🔔

如何運作?

raw-image

首先在瀏覽器與Server之間的溝通時,CORS規範允許Server端回傳一些Header,而瀏覽器則根據這些Header來檢查是否可以跨越同源(Same Origin Policy)的限制,而最主要的一個Http Header就是Access-Control-Allow-Origin,這個標頭非常關鍵,藉由這個Header告訴瀏覽器我們允許哪些來源進入伺服器存取資源。

但是除了Access-Control-Allow-Origin之外還有以下兩個標頭也是檢查的重點:

  1. Access-Control-Allow-Methods: 伺服器允許存取的方法(GET、POST、...)。
  2. Access-Control-Allow-Headers: 伺服器允許存取的標頭。

那麼在瀏覽器發送前會分為以下兩種請求,簡單請求(Simple)和預檢請求(Preflight),為什麼需要特別區分呢? 主要是檢查CORS的時機點在於伺服器回傳的時候,但試想,如果一個重要的命令(刪除),在尚未檢查之前就執行,那麼這是一件非常危險的事情, 因此才會進行區分。

簡單請求(Simple Request)

這類型的請求並不會造成太大的損傷,因此會直接將請求條件送到伺服端進行,伺服端回應後,才進行檢核動作,而簡單的請求條件如下:

  • Http方法: GET、POST、Head。
  • Content-Type:application/x-www-form-urlencoded
    multipart/form-data
    text/plain

預檢請求(Preflight Request)

這類型的請求就可能具有危險性,因此會先探詢伺服器之後允許的範圍之後,若該次的請求符合條件,才將真正的請求往後送,如此一來便能多一層保障。

如何透過CORS機制允許不同源存取?

由上述的介紹中我們可以知道這個機制最關鍵的決定者在於後端伺服器,因此伺服端在設計時,需要問自己以下幾個問題來決定跨域的存取權:

  • 請求的來源(Access-Control-Allow-Origin): 有些開發者會使用「*」,代表所有網域都可以存取,雖然簡單,但也添增風險,因此如果屬於開放式服務,就不建議這麼做了。
  • 請求的方法(Access-Control-Allow-Methods): 讀、寫、修改、刪除...。
  • 請求的資料格式(Access-Control-Allow-Headers): json、xml...。

🔔還沒成為Potato會員的朋友點這裡加入哦,撰寫文章還能挖礦打造被動收入 🔔

留言
avatar-img
留言分享你的想法!
avatar-img
阿Han的沙龍
143會員
310內容數
哈囉,我是阿Han,是一位 👩‍💻 軟體研發工程師,喜歡閱讀、學習、撰寫文章及教學,擅長以圖代文,化繁為簡,除了幫助自己釐清思路之外,也希望藉由圖解的方式幫助大家共同學習,甚至手把手帶您設計出高品質的軟體產品。
阿Han的沙龍的其他內容
2023/04/23
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
2023/04/23
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
2023/04/23
Service worker與Web workers相同,也都是一段運行在瀏覽器後台的腳本,提供一些不需要與頁面直接交互的功能(操作dom),主要處理網路相關的問題,可以攔截網路請求進行相對應的優化動作,我們把它想像成與伺服器之間的代理服務器可能會比較容易理解,當網路環境不佳時便回應快取資源,待網路
Thumbnail
2023/04/23
Service worker與Web workers相同,也都是一段運行在瀏覽器後台的腳本,提供一些不需要與頁面直接交互的功能(操作dom),主要處理網路相關的問題,可以攔截網路請求進行相對應的優化動作,我們把它想像成與伺服器之間的代理服務器可能會比較容易理解,當網路環境不佳時便回應快取資源,待網路
Thumbnail
2023/04/23
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
2023/04/23
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
看更多
你可能也想看
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
Thumbnail
我們前一篇介紹了「【Web系列】訂閱技術的基石,RSS Feed是什麼?」,相信也對於訂閱的機制具備一定的認識了,雖然RSS已經能夠滿足我們訂閱的一些基本需求,但由於主要的訂閱端還是定期去檢查更新資訊,因此假設我們想要在最短時間內掌握最新資訊時,仍會有一些延遲,再者也非常浪費頻寬。 我們為什麼不能改
Thumbnail
我們前一篇介紹了「【Web系列】訂閱技術的基石,RSS Feed是什麼?」,相信也對於訂閱的機制具備一定的認識了,雖然RSS已經能夠滿足我們訂閱的一些基本需求,但由於主要的訂閱端還是定期去檢查更新資訊,因此假設我們想要在最短時間內掌握最新資訊時,仍會有一些延遲,再者也非常浪費頻寬。 我們為什麼不能改
Thumbnail
我們前一篇介紹了「【Web系列】訂閱技術的基石,RSS Feed是什麼?」,相信也對於訂閱的機制具備一定的認識了,雖然RSS已經能夠滿足我們訂閱的一些基本需求,但由於主要的訂閱端還是定期去檢查更新資訊,因此假設我們想要在最短時間內掌握最新資訊時,仍會有一些延遲,再者也非常浪費頻寬。 結語
Thumbnail
我們前一篇介紹了「【Web系列】訂閱技術的基石,RSS Feed是什麼?」,相信也對於訂閱的機制具備一定的認識了,雖然RSS已經能夠滿足我們訂閱的一些基本需求,但由於主要的訂閱端還是定期去檢查更新資訊,因此假設我們想要在最短時間內掌握最新資訊時,仍會有一些延遲,再者也非常浪費頻寬。 結語
Thumbnail
文章最後將會提供一套CSP安全檢查工具,保護自身,避免踏入不安全地帶! 🔔還沒成為Potato會員的朋友點這裡加入哦,撰寫文章還能挖礦打造被動收入 🔔 為什麼制定安全政策這麼重要呢? 可以制定哪些規則呢? 這邊僅著重於概念的描述,因此列出幾個常見的來源白名單配置選項,至於完整選項請參考這裡。
Thumbnail
文章最後將會提供一套CSP安全檢查工具,保護自身,避免踏入不安全地帶! 🔔還沒成為Potato會員的朋友點這裡加入哦,撰寫文章還能挖礦打造被動收入 🔔 為什麼制定安全政策這麼重要呢? 可以制定哪些規則呢? 這邊僅著重於概念的描述,因此列出幾個常見的來源白名單配置選項,至於完整選項請參考這裡。
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 攻擊的類型有哪些? 可能造成的危害 資源參考
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 攻擊的類型有哪些? 可能造成的危害 資源參考
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO 如何運作? 📷
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO 如何運作? 📷
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 同源(Origin)主要由以下三個部分組成:
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 同源(Origin)主要由以下三個部分組成:
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News