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 的应用程序是否存在安全漏洞。