HTMX - 安全性
HTMX 允許您直接在 HTML 中新增邏輯，使您的系統更易於理解和維護。但是，如果未實施適當的安全措施，這種額外的靈活性可能會被有害使用者濫用。本指南重點介紹 HTMX 特定的主要安全概念和實踐。
瞭解 HTMX 安全基礎
HTMX 透過向您的伺服器傳送 AJAX 請求並使用響應更新網頁的部分內容來工作，這導致了我們應該注意的一些安全注意事項。
- 信任：HTMX 隱式地信任伺服器的響應，這意味著伺服器返回的任何內容都將直接插入 DOM。
- 增強的 HTML 表達能力：HTMX 使 HTML 更加靈活，但如果惡意使用者設法將 HTML 插入到您的應用程式中，這種額外的靈活性可能會被濫用。
- 客戶端處理：雖然 HTMX 減少了對自定義 JavaScript 的需求，但它並沒有消除客戶端處理。某些任務仍然需要在使用者的裝置上執行。
防止使用者內容攻擊
使用 HTMX 時，基於 HTML 的 Web 開發的基本規則非常重要：永遠不要信任使用者輸入。在將來自外部來源的任何不受信任的內容新增到您的網站之前，始終對其進行轉義。此做法有助於防止XSS 攻擊和其他安全問題。
大多數伺服器端模板語言會自動轉義內容。但是，如果您確實需要使用原始 HTML（不建議這樣做），則應
- 對允許的標籤和屬性使用白名單方法。
- 刪除任何以hx 或data-hx 開頭的屬性。
- 從不受信任的內容中刪除內聯<script>。
HTMX 特定的安全工具
由於錯誤是開發的一部分，並且開發人員並非完美無缺，因此為您的 Web 應用程式採用分層安全方法非常重要。HTMX 提供了特定工具來提高應用程式的安全性。
HTMX hx-disable 屬性
hx-disabled 是一個有用的安全特性。當新增到元素時，它會停止對該元素及其子元素的所有 HTMX 屬性的處理。當您需要在頁面上包含不受信任的內容時，這尤其有用。
示例
<div hx-disable> <!-- Untrusted content goes here --> </div>
重要的是，此屬性不能被新增的內容覆蓋，從而提供強大的安全保護。
HTMX hx-history 屬性
hx-history 屬性使您能夠控制是否將頁面儲存在瀏覽器的歷史記錄中。這對於包含您不希望快取或通過後退按鈕輕鬆訪問的敏感資料的頁面非常重要。要防止將頁面新增到歷史記錄中，您可以使用hx-history。
示例
<body hx-history="false"> <!-- Page content --> </body>
配置選項
HTMX 提供了一些與安全相關的配置選項。
- htmx.config.selfRequestsOnly：當設定為 true 時，此選項僅允許請求與當前文件位於同一域。
- htmx.config.allowScriptTags：這控制 HTMX 是否處理新內容中的<script> 標籤。
- htmx.config.historyCacheSize：您可以將其設定為 0 以防止將 HTML 儲存在 localStorage 中。
- htmx.config.allowEval：如果設定為 false，則會停用所有使用 eval() 的 HTMX 功能。
示例
htmx.config.selfRequestsOnly = true; htmx.config.allowScriptTags = false; htmx.config.historyCacheSize = 0; htmx.config.allowEval = false;
HTMX 中的跨站點指令碼 (XSS)
使用 HTMX 時，跨站點指令碼 (XSS) 是一種重大風險，務必注意它。以下是一些需要考慮的重要事項
- 伺服器端渲染：HTMX 依賴於伺服器端渲染，因此請確保在將所有使用者輸入包含在 HTML 響應中之前對其進行清理。
- hx-trigger 屬性：在hx-trigger 屬性中使用使用者提供的輸入時要小心，因為它可以執行 JavaScript。
- 轉義內容：在將使用者生成的內容新增到 DOM 之前，始終對其進行轉義。這包括他們可能在表單中輸入或提交到您的網站的任何內容。
示例
<div hx-get="/user-data" hx-trigger="load"> User data will be loaded here safely </div>
內容安全策略 (CSP) 注意事項
實施內容安全策略 (CSP) 對於保護任何 Web 應用程式（包括使用 HTMX 的應用程式）非常重要。在使用 HTMX 時，請確保您的 CSP 配置為允許其正常執行，同時仍為您的網站維護強大的安全性。
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
此策略僅允許從與頁面相同的來源載入資源。根據您使用 HTMX 的方式，您可能需要調整此策略以允許特定內聯指令碼或與其他域的連線。
HTMX 安全最佳實踐
為了保護您的應用程式和使用者資料，請遵循以下最佳實踐。
- 保持 HTMX 及其所有依賴項更新。
- 在伺服器上實施適當的身份驗證和授權檢查。
- 使用HTTPS 對客戶端和伺服器之間所有流量進行加密。
- HTMX 請求可以在瀏覽器的網路選項卡中看到，因此請避免在 URL 引數中包含敏感資訊。
- 定期檢查您支援 HTMX 的應用程式是否存在安全漏洞。