# 跨站請求偽造 (CSRF)
* Cross-site request forgery
(或稱 one-click attack 、 session riding)
* 欺騙用戶的瀏覽器，讓其以用戶的名義執行操作
* 例子 : [在codepen貼上以下程式碼](https://codepen.io/pen)
使用者在一個解謎網站按下解答按鈕想看解答，卻跑進youtube網頁而且還是用你自己的帳號(若不是開無痕模式且你google帳號有記錄登入狀態)

// HTML
<button id="who" >解答按鈕 : 我是誰?</button>
<p id="result" style="color:red" hidden>皮卡丘</p>
<a id="yt" href="https://www.youtube.com/watch?v=yVAju8LrQN0" target="_blank" hidden></a>

// javascript
document.getElementById('who').onclick = function(){
  document.getElementById('result').hidden = false;
  document.getElementById('yt').click();
}

如果把開啟youtube網頁改成API路徑，而且是導向私密的網頁(例如: 銀行、部落格...)，若沒做好防護措施是會用自己的帳號去做新增/刪除甚至是線上交易而自己卻不知道！

## 何謂跨站
* 站(site) : eTLD及eTLD前一碼
* TLD : Top Level Domain ; 為網址最後一部份、port號前一個部分
例如 : *.com* ; *.org*
* eTLD : effective Top Level Domain ; 僅用最後的domain無法定義site，像是 *.io*，故會有多個部分來定義一個site
例如 : *.github.io* ; *.co.jp*
* 跨站 : eTLD及eTLD前一碼不同的網站，以下為同站及跨站舉例


**<font color='red'>!! 想了解同站同源的意思 及 網址請看資料來源 !!</font>**

## 防護方法 :

* 檢查 HTTP Request Headers Referer欄位

* 添加校驗token
以Spring作範例，網頁中加入token，在送出POST表單之前，也需一併將token回傳，以辨識是否為同站

* Set-cookie加入SameSite屬性

## 資料來源
1. [了解同站(same site)、同源(same origin)差異](https://web.dev/same-site-same-origin/)
2. [eTLD 列表](https://publicsuffix.org/list/)
3. [認識網址與網域名稱](https://pjchender.github.io/2018/06/06/%E7%B6%B2%E9%9A%9B%E7%B6%B2%E8%B7%AF-%E8%AA%8D%E8%AD%98%E7%B6%B2%E5%9D%80%E8%88%87%E7%B6%B2%E5%9F%9F%E5%90%8D%E7%A8%B1%EF%BC%88domain-name-url-dns%EF%BC%89/)
4. [iT邦幫忙 : Samesite attribute](https://ithelp.ithome.com.tw/articles/10251288)