---

? 框架與 XSS 防護概況

框架	是否默認轉義	高危場景	建議防御措施
React	? 是	使用 dangerouslySetInnerHTML	避免使用，必要時做內容清洗
Vue.js	? 是	使用 v-html	避免使用，或使用 DOMPurify 清洗
Angular	? 是	使用 innerHTML、bypassSecurityTrustHtml	謹慎繞過安全策略
Django (模板)	? 是	使用 `	safe`
Flask / Jinja2	? 是	使用 `	safe`
Spring Boot (Thymeleaf)	? 是	使用 th:utext	默認 th:text 安全，慎用 utext
Express + EJS / Handlebars	? 否	直接拼接 HTML 輸出	使用模板語法自動轉義
PHP 原生 / Smarty	? 否	直接 echo 用戶輸入	使用 htmlspecialchars() + 模板轉義

---

📍 React 中的 XSS 風險

?? 危險代碼示例：

function Comment({ content }) {return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

用戶輸入含 <script> 會被執行！

? 防御做法：

import DOMPurify from 'dompurify';<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />

---

📍 Vue.js 中的 XSS 風險

?? 危險代碼示例：

<div v-html="userContent"></div>

? 防御做法：

import DOMPurify from 'dompurify';
this.safeContent = DOMPurify.sanitize(userContent);

---

📍 Angular 中的 XSS 風險

?? 危險代碼示例：

this.trusted = this.sanitizer.bypassSecurityTrustHtml(userInput);

? 防御做法：

• 避免濫用 bypassSecurityTrustHtml
• 使用默認綁定方式或手動清洗內容

---

📍 Django 模板中的 XSS 風險

?? 危險代碼示例：

{{ comment|safe }}

? 防御做法：

• 避免使用 |safe，除非你非常確信內容安全
• 默認 {{ comment }} 會自動 HTML 轉義

---

📍 Express + EJS 模板中的 XSS 風險

?? 危險代碼示例：

<div><%- userInput %></div> <!-- 非轉義輸出 -->

? 防御做法：

<div><%= userInput %></div> <!-- 自動 HTML 轉義 -->

---

📍 Spring Boot + Thymeleaf 的 XSS 風險

?? 危險代碼示例：

<span th:utext="${userInput}"></span>

? 防御做法：

<span th:text="${userInput}"></span> <!-- 自動 HTML 轉義 -->

---

🧠 總結建議

• ? 默認轉義機制是第一道防線，慎重繞開！
• 🚫 避免使用不安全輸出語法如 |safe、v-html、dangerouslySetInnerHTML 等
• 🧼 推薦使用 DOMPurify 對富文本內容做清洗
• 🔐 后端應區分內容用途，做針對性輸出處理

---

📌 推薦工具

• 富文本清洗：DOMPurify、xss（Node.js 庫）

---