Skip to content

Instantly share code, notes, and snippets.

@veritymissed
Last active December 1, 2022 03:01
Show Gist options
  • Save veritymissed/a7fced37c262f3ac9212f85a2ad3b456 to your computer and use it in GitHub Desktop.
Save veritymissed/a7fced37c262f3ac9212f85a2ad3b456 to your computer and use it in GitHub Desktop.
CORS/XSS/CSRF 筆記

CORS/XSS/CSRF 筆記

最近常常被這幾個英文簡寫搞混,稍微做個筆記。 後兩者XSS與CSRF是Web攻擊型態的其中兩種。前者CORS只是指稱一種我們在Web架構設計中可能出現的現象,以及這樣的現象在目前的規範中有什麼特點,有什麼設定上要注意的?

CORS

C ross O rigin R equest S haring (跨來源資源請求)

我們讓瀏覽器對不同網域 (Domain)、通訊協定 (Protocol) 或是 Port 送出請求 這就叫 Cross Origin HTTP Reuest (跨來源HTTP請求)

Ex. 我們的Blog平台叫作 http://my-blog.com 當我們在 http://my-blog.com 上面時,若我們的網頁向某個網站 http://example.com 請求裡面某個css或是jpg圖檔,這樣的request就是跨來源HTTP請求。

基於安全性考量,這樣的請求會受到限制。

Same Origin Policy (同源政策) FetchAPIXMLHttpRequest 都遵守同源政策

關於CORS的規範,會要求瀏覽器在送出CORS前,先送出一個 options 請求,讓對方server 預檢 (Preflight)

只有以下幾種方法是不需要預檢的,被稱為簡單請求(Simple requests)

  • GET
  • HEAD
  • POST

僅允許 Content-Type

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

當然,對方server也可以設定收到 預檢(Preflight) 時允許哪些IP/host跨來源請求。

Ex. Express.js 的CORS設定可透過cors這個npm套件。

XSS

(X) Cross S ite S cripting (跨站腳本) 縮寫為了不與CSS搞混,所以把Cross縮寫為X

攻擊者透過

  1. 特定連結,被稱為Refected Link

  2. 當網頁已經被置入永久的scripts

目標通常是將有儲存用戶資訊的部分(Cookie或Session)回傳給攻擊者,或是將受害者導到特定的網站。

CSRF

C ross S ite R equest F orgery (跨站請求偽造)

又稱為

  • One-click attack
  • Session riding

Ex. 如果我的網站(http://exampleMe.com) 上有個按鈕,是刪除文章用,點擊時送出這樣的請求 GET /delete/article/:article_id

那麼如果在別的網站上 (http://exampleB.com) 有個按鈕,hrefhttp://exampleMe.com/delete/article/:article_id,這樣的話,只要能取得瀏覽器內的cookie或session資訊,就能在別的網站偽造同樣的請求,刪除我自己網站上的文章。

Reference

跨來源資源共用(CORS)from MDN

讓我們來談談 CSRF from Techbridge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment