前言

隨著網路上的 Web 應用程式越來越多，為了提升安全性，現在跟安全性有關的 HTTP header 也是多到記不得，像我上 Medium 看我自己的文章，就可以看到 CSP、HSTS、Expect-CT 等等 header

因為各種不同功能的 HTTP header 實在太多，所以在這個段落我會先花兩天介紹幾個比較常見的 HTTP Headers，最後再花一天講怎麼把這些 Header 加到 Node/Go 寫的 API server 裡面去

Content Security Policy (CSP)

首先是歷史悠久的 CSP，這個 header 是用來限制瀏覽器只能從哪些地方載入資源。譬如說我設定 Content-Security-Policy: default-src larry.com，就代表我限制瀏覽器只能從 larry.com 這個網域載入圖片、CSS、字體等等各種資源

當然想設定很多個網域也是可以的，只要一直往下接就可以了。下圖開發者工具的內容是我上 Github 首頁時 response header 裡的 CSP 設定，他就是把 uploads.github.com、api.github.com 等等很多個網域都加進去，雖然看起來很冗長，但至少有一個白名單，不會莫名其妙載入其他網域的東西

如果想針對不同類型的資源有不同的 policy（雖然比較麻煩但會更安全），那也可以寫成 Content-Security-Policy: img-src a.com; font-src b.com 的形式，那瀏覽器就會知道你希望只能從 a.com 載入圖片、從 b.com 載入字體

想看還有哪些屬性可以設定可以參考 MDN 上的 Directives

那限制網域有什麼用呢？假如哪天駭客在我的網站上發現了一個 XSS 漏洞，讓他可以在首頁的 HTML 中加入一段 <script src=“hacker.com/evil.js”>，那每一個使用者到我的網站時瀏覽器就會載入惡意的 evil.js，讓駭客可以做一些壞壞的事情，譬如說重新導向、偷走帳號密碼等等

但如果有把 CSP 設定成 Content-Security-Policy: default-src larry.com 的話，瀏覽器就會拒絕載入 evil.js（下圖），因為那個腳本是從 hacker.com 來的。因此雖然 CSP 不能完全防堵 XSS，但能減輕 XSS 造成的影響，因為如果攻擊者不能從外部載入惡意資源，那可以做的事情也相對比較少一點

HTTP Strict Transport Security (HSTS)

HSTS 的全名是 HTTP Strict Transport Security，聽過這個 header 的人可能比較少一點，他是用來強制瀏覽器只能使用安全的 HTTPS 協定跟網站進行連線，而不能使用 HTTP

譬如說很多網站其實用 HTTP 跟 HTTPS 都連得上，但考量到安全性，當然是希望使用者都走 HTTPS。這時只要在 header 裡加上 Strict-Transport-Security: max-age=31536000; includeSubDomains，那在往後的 31536000 秒內（其實就是一年啦XD），只要使用者的瀏覽器看到這個網域或他的子網域，就會全部改成用 HTTPS 進行連線，真的是很方便呢

也因為現在網站幾乎都有 HTTPS 了，所以像平常會用到的 Google、Medium、Facebook 都可以看到 HSTS 的蹤跡，只是大家設定的 max-age 稍有不同，比較常看到的大概會是 31536000（一年）、15552000（180 天）這類的數字

雖然在 HTTP header 裡面加上 HSTS 很簡單，但如果你還是覺得麻煩，而且你又剛好有在用 Cloudflare 代管 DNS，那也可以參考這篇文章直接在 Cloudflare 設定裡面的 Cryptography 啟用 HSTS，那就什麼都不用做哦～

小結

今天介紹了 CSP 跟 HSTS 兩個跟安全性有關的 HTTP headers，這兩個 headers 不只用起來輕鬆簡單，加上去根本不用十分鐘，而且又可以大幅提高安全性，所以已經是網站開發不可缺少的 HTTP headers 了～

如果對於今天的內容有什麼問題歡迎在下方留言，沒有的話就明天見囉