◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
应对 Tailwind CSS 中任意值的安全风险
ID:15441 / 打印
作为经验丰富的开发人员，您可能会欣赏 tailwind css 为您的开发工作流程带来的灵活性和速度。 tailwind 的实用程序优先方法允许您构建响应式、现代的界面，而无需离开 html。然而，权力越大，责任越大，尤其是在安全方面。
使 tailwind 如此灵活的一个功能是能够在实用程序类中使用任意值。这允许您编写像以前一样的类：content-['hello'] 或 bg-[#123456]，从而无需在 css 中定义自定义类。虽然此功能可以节省大量时间，但它也带来了潜在的安全漏洞，特别是在跨站脚本 (xss) 攻击的情况下。
安全风险
tailwind css 中的任意值可能是一把双刃剑。当这些值是根据用户输入动态生成时，就会出现危险。如果用户输入在合并到 tailwind 类之前没有得到正确的净化，攻击者可能会将恶意代码注入到您的应用程序中。
例如，考虑以下场景：
<div class="before:content-[attr(data-message)]" data-message="alert('XSS')"> </div> 如果攻击者设法将恶意脚本注入数据消息属性中，则该脚本可能会在用户的浏览器中执行，从而导致 xss 漏洞。虽然 tailwind 不直接执行 javascript，但未正确清理的输入仍可能导致危险结果，例如注入不需要的内容或以意外方式操作 dom。
立即学习“前端免费学习笔记（深入）”；
如何降低风险
输入清理：防止 xss 攻击最关键的步骤是确保所有用户生成的内容在呈现在页面上之前都经过正确的清理。使用 dompurify 等库或框架提供的内置清理功能（例如 react 的危险setinnerhtml）来删除任何潜在有害的代码。
避免动态类生成：避免根据用户输入动态生成 tailwind 类。虽然创建适应用户偏好的灵活组件可能很诱人，但如果不仔细控制输入，这种做法可能会导致安全问题。
使用内容安全策略（csp）：实施强大的内容安全策略（csp）可以通过限制脚本、样式和其他资源的加载源来帮助减轻与 xss 相关的风险。配置良好的 csp 可以阻止恶意脚本的执行，即使它们被注入到您的应用程序中也是如此。
验证：在将用户输入发送到客户端之前，始终在服务器端对其进行验证和编码。这可确保任何恶意内容在有机会到达用户的浏览器之前就被消灭。
限制任意值：谨慎使用 tailwind 的任意值功能。如果可能，请依赖预定义的类或扩展 tailwind 配置以包含安全控制的自定义值。这减少了潜在攻击的表面积。
结论
tailwind css 是一个强大的工具，可以显着加快您的开发过程，但像任何工具一样，必须明智地使用它。通过了解与任意值相关的潜在安全风险并采取必要的预防措施，您可以享受 tailwind 的优势，而不会让您的应用程序面临不必要的漏洞。永远记住，安全不仅仅与您使用的工具有关，还与您使用它们的方式有关。
