本篇文章更新時間：2026/02/25
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知或向一介資男的 LINE 社群反應。
如果本站內容對你有幫助，歡迎贊助支持 。
內容目錄
告別 innerHTML，迎接 setHTML：Firefox 148 的更安全預設
更安全的 HTML 插入方式，終於成為瀏覽器標準。
編輯前言：這篇文章來自 Mozilla Hacks，談的是 Firefox 148 搶先推出的 Sanitizer API。對任何寫前端的人來說，這代表著網頁輸入與渲染邏輯即將迎來重大改變——也是一次更容易、更務實的 XSS 防護里程碑。
核心觀點 (Key Takeaways)
- Sanitizer API 讓開發者能「預設安全」地過濾不可信 HTML，避免 XSS。
- 新方法
setHTML()能直接取代innerHTML，並自動做內容清洗。 - Firefox 148 率先支援 Sanitizer API 與 Trusted Types，其他瀏覽器預期會跟上。
深入解析
這篇原文一開始就點出老問題：XSS（跨網站指令碼攻擊）多年來都是網路上最普遍、也最棘手的安全漏洞之一。只要網站把使用者輸入直接塞回 HTML，就可能允許攻擊者注入任意 JavaScript，造成資料竊取、行為操控等風險。
Mozilla 過去已經嘗試透過 Content-Security-Policy（CSP）改善，但 CSP 的導入成本太高，需要架構重整與長期維護，因此始終無法普及到整個網路生態。
這次他們選擇另闢途徑：讓瀏覽器直接內建安全的 HTML 清洗標準。
原文強調：「Sanitizer API is designed to help fill that gap by providing a standardized way to turn malicious HTML into harmless HTML — in other words, to sanitize it.」
也就是說，瀏覽器本身就可以清理危險內容，而不是靠每個開發者自己寫一套 bug 連發的 HTML sanitizer。
1. setHTML(): 更安全的 innerHTML 替代品
文章示範了一段危險的 HTML：
document.body.setHTML(`<h1>Hello my name is <img src="x" onclick="alert('XSS')">`);
Sanitizer API 會自動移除 <img> 元素與 onclick 屬性，最後得到：
<h1>Hello my name is</h1>
換句話說，只要把所有 innerHTML = ... 改成 setHTML(...)，你就能獲得強化版的安全預設。
2. 自訂 Sanitizer 規則：可嚴可鬆
如果預設的清洗規則太嚴格，也可以傳入自訂設定，決定哪些標籤、哪些屬性應該保留或刪除。文章還推薦使用 Sanitizer API playground 做實驗。
3. 與 Trusted Types 聯手，打造更完整的防護
文章也提到 Trusted Types。當專案開始採用 setHTML() 後，就能更容易開啟 Trusted Types，限制所有 HTML 注入的來源與方式，避免開發者或第三方程式碼偷偷用回危險的 API。
筆者心得與啟發
讀完這篇，我最大的感觸是：網頁安全終於開始朝「合理的預設值」前進，而不是依賴個別開發者的細心與警覺。innerHTML 雖然方便，卻讓許多網站默默暴露在攻擊風險下；Sanitizer API 提供了一個既低成本又一致的替代方案。
對現代前端開發者來說，我會建議：
- 開始掃描專案中所有 innerHTML 使用情況，逐步改用 setHTML。
- 若網站有任何使用者輸入的渲染情境，更應優先導入 Sanitizer API。
- 搭配 Trusted Types，可以更有效避免團隊意外引入新漏洞。
最重要的是，這一次的變革不只屬於 Firefox。當標準出現後，其他瀏覽器終究會跟上，這象徵著整個 Web 的安全基礎正在提升。
對習慣追蹤 Web API 進展的我來說，這是一個值得記錄的重要版本更新，也會是未來許多安全最佳實踐指南中的新基石。