<h2>CSRF 開發時會遇到的問題</h2>
<p>要拉 image 到 local 跑 local server 來測的原因：比較容易 reset db<br>
但因為我們的 web server 跑 https 並指定一個網址，所以開發會遇到 csrf error 的問題：</p>
<ol>
<li>不同 domain 沒辦法 set cookie，<code>CSRF-TOKEN</code> 送不過到後端</li>
<li>http 不能設 https cookie，<code>ACCESS-TOKEN</code> 送不到前端</li>
</ol>
<ul>
<li>可以用其他的指令例如 <code>npm run dev:localserver</code> 來把 API URL 改成 localhost:8001</li>
</ul>
<p>--</p>
<h2>Set-Cookie</h2>
<h3>HttpOnly</h3>
<p>Forbids JavaScript from accessing the cookie, for example, through the Document.cookie property.<br>
沒有設定的話，可以用 XSS 攻擊偷 cookie</p>
<h3>Secure</h3>
<ul>
<li>Note: Insecure sites (http:) can't set cookies with the Secure attribute (since Chrome 52 and Firefox 52).</li>
<li>For Firefox, the https: requirements are ignored when the Secure attribute is set by localhost (since Firefox 75).<br>
意思是說：http 不能 set https 的 cookies，但 Firefox 為了讓你好開發（測試），幫你開了個通道，如果是 localhost 就可以 http 設 https</li>
</ul>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#Secure" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#Secure</a></p>
<h3>SameSite</h3>
<p>前後端分離的作法常會需要處理非 same site 的狀況<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite</a></p>
<h3>手動設定 (console)</h3>
<pre><code class="language-js">document.cookie = "CSRF-TOKEN=test; path=/;"
</code></pre>


Norman's Note 諾曼筆記

Cookie 筆記

CSRF 開發時會遇到的問題

Set-Cookie

HttpOnly

Secure

SameSite

手動設定 (console)