安全相關回應標頭與 DevTools 檢查

瀏覽器有一整套「只要伺服器下對標頭、就自動幫你擋掉某類攻擊」的機制。對前端來說，重點是知道有哪些標頭、各擋什麼、以及怎麼用 DevTools 確認它們有沒有正確生效。本章把常見的安全標頭整理成一張可檢查的清單。

怎麼在 DevTools 看標頭#

打開 Network panel ➡️ 點主文件（或任一請求）➡️ Headers 分頁 ➡️ 看 Response Headers。所有下面要談的標頭都在這裡確認「伺服器到底有沒有下、值對不對」。

Cookie 的屬性則在 Application panel ➡️ Storage ➡️ Cookies 逐項檢視，每個 cookie 的 HttpOnly、Secure、SameSite 都有獨立欄位，比讀 Set-Cookie 字串直觀。

安全標頭清單#

標頭	作用	觀察重點
`Strict-Transport-Security`	強制之後一律用 HTTPS 連線（HSTS）	有 `max-age`，理想含 `includeSubDomains`
`Content-Security-Policy`	限制資源來源，緩解 XSS（見上一章）	指令是否夠嚴、有無 `'unsafe-inline'`
`X-Frame-Options` / `frame-ancestors`	限制本頁能否被嵌入 iframe，防點擊劫持	`DENY` 或 `frame-ancestors 'none'`
`X-Content-Type-Options`	`nosniff`，禁止瀏覽器猜測 MIME 型別	值應為 `nosniff`
`Referrer-Policy`	控制跳轉時帶出多少來源網址資訊	如 `strict-origin-when-cross-origin`
`Set-Cookie` 的屬性	`HttpOnly`／`Secure`／`SameSite`	敏感 cookie 三者齊全

點擊劫持（Clickjacking）防護#

點擊劫持是把你的頁面用透明 iframe 疊在惡意頁面上，誘騙使用者「以為點 A、其實點到 B」。防法是宣告「不准被當成 iframe 載入」：

# 舊標頭，相容性好
X-Frame-Options: DENY
# 現代做法，整合進 CSP，更彈性
Content-Security-Policy: frame-ancestors 'none'

想驗證有沒有生效，自己寫一個小 HTML 用 <iframe src="你的頁面"> 嵌嵌看：若防護正確，iframe 會空白，且 Console 會出現「Refused to display … in a frame because it set ‘X-Frame-Options’ / ‘frame-ancestors’」。

混合內容（Mixed Content）#

在 HTTPS 頁面裡載入 http:// 的資源就是混合內容。瀏覽器會擋下或警告，因為這些明文資源可被中間人竄改，破壞了 HTTPS 的保證。

Console：會出現 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure ... 的警告或錯誤。
Network：被擋的混合資源會以失敗狀態出現。
伺服器可下 Content-Security-Policy: upgrade-insecure-requests，讓瀏覽器自動把頁面內的 http:// 請求升級成 https://。

主動型混合內容（script、iframe、CSS）會被直接封鎖；被動型（img、video）多半只給警告但仍載入。看到圖片莫名載不出來，記得檢查是不是寫成了 http://。

子資源完整性（SRI）#

從第三方 CDN 載入 JS／CSS 時，若該 CDN 被入侵、檔案被掉包，你的網站也跟著中招。SRI 讓瀏覽器在執行前先比對檔案雜湊，對不上就拒絕載入：

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

雜湊不符時，Console 會明確報出「failed integrity metadata check」，且該資源不會執行。

一頁式檢查清單#

上線前用 DevTools 過一遍安全標頭

Network ➡️ 主文件 Response Headers 是否有 Strict-Transport-Security？
是否有 Content-Security-Policy，且未濫用 'unsafe-inline'？
是否有 X-Frame-Options: DENY 或 frame-ancestors？（防點擊劫持）
是否有 X-Content-Type-Options: nosniff？
Referrer-Policy 是否設定得當？
Application ➡️ Cookies：敏感 cookie 是否齊備 HttpOnly、Secure、SameSite？
Console 有無 Mixed Content 警告？
第三方 <script> 是否加了 integrity（SRI）？

攻擊原理（XSS、CSRF、SQL Injection 等）的完整說明，見 前端／瀏覽器原理／網站常見的資安問題。本章專注於「如何用工具觀察與設定防護」。

小結#

安全標頭多在 Network ➡️ Response Headers 檢查；Cookie 屬性在 Application panel 看。
X-Frame-Options／frame-ancestors 防點擊劫持，可用 iframe 嵌入測試驗證。
HTTPS 頁面避免混合內容；upgrade-insecure-requests 可自動升級。
第三方資源加上 SRI，防 CDN 被掉包。