基于Node.js+React项目如何允许用户输入自定义CSS同时防范恶意代码？

以下方案适配你的Node.js+React技术栈，可在保障灵活性的同时规避绝大多数CSS相关攻击：

1. 后端输入过滤（Node.js层处理） #

• 不要自行实现CSS校验逻辑，直接使用业界成熟的净化库，推荐DOMPurify（开启CSS净化模式）或clean-css搭配危险规则过滤逻辑，入库前必须完成净化
• 明确建立规则白名单，默认仅开放普通样式属性，所有危险特性默认禁用：

  需禁用的高风险特性包括：expression、behavior、-moz-binding、javascript:/vbscript:伪协议、@import、@font-face，url()属性仅白名单允许你的自有图片CDN域名，禁止任意外部资源、data URI引入
  限制高风险布局属性：禁用position: fixed、position: sticky防止用户伪造平台导航/弹窗钓鱼，限制z-index最大值避免透明层覆盖实现点击劫持

• 增加CSS语法校验，解析失败的异常内容直接拒绝入库，避免畸形CSS触发浏览器解析漏洞

2. 前端输出隔离（React层处理） #

• 给所有用户自定义CSS强制增加作用域前缀：每个用户的个人主页根容器绑定唯一专属类名（格式如user-page-{{用户ID}}），所有用户提交的CSS选择器前自动拼接该类名，彻底避免用户样式污染全局页面
• 优先采用Shadow DOM渲染用户个人主页内容，Shadow DOM的样式完全与外层DOM隔离，既不会被全局样式影响，也不会泄露到外层页面，是目前最高效的样式隔离方案
• 不要将用户CSS插入全局<head>，仅在对应用户个人页的专属容器内插入<style>标签渲染净化后的内容

3. 全站安全规则加固 #

• 配置严格的Content Security Policy（CSP）响应头，script-src禁用unsafe-inline、unsafe-eval，style-src仅允许本站域名和合法内联样式，从浏览器层面拦截CSS注入触发的脚本执行
• 个人主页与平台主站做二级域名隔离，比如主站使用example.com，用户个人页统一使用users.example.com，同时配置Cookie的Domain属性限制作用域，避免用户页出现漏洞时影响主站敏感数据
• 用户个人主页内避免放置密码输入、支付提交等敏感表单，从根源上消除CSS属性选择器窃取表单内容的攻击可能

内容的提问来源于stack exchange，提问作者Greg