如何用JavaScript处理并净化Web表单用户输入，防范XSS及安全存储？

针对你提出的三个问题，直接给出可落地的方案和示例：

1. 在JavaScript中正确净化用户输入 #

净化输入的核心是根据业务需求，过滤或转义危险的HTML/JS代码，分两种常见场景处理：

场景A：完全禁止任何HTML标签（仅保留纯文本） #

无需第三方库，用原生API即可实现自动转义：

const sanitizePlainText = (input) => {
  const tempElement = document.createElement('div');
  tempElement.textContent = input;
  return tempElement.innerHTML; // 此时<、>等特殊字符已被转义为&lt;、&gt;
};

// 使用示例
let userInput = document.getElementById("inputField").value;
const sanitizedText = sanitizePlainText(userInput);

场景B：允许部分安全HTML标签（如<b>、<i>、<p>） #

推荐使用成熟的净化工具DOMPurify，它会自动过滤所有危险标签和属性：

// 先引入DOMPurify（可通过npm安装或本地引入）
const sanitizedHtml = DOMPurify.sanitize(userInput);
// 示例：输入"<strong>Mens Aviator Jacket</strong><script>alert('xss')</script>"
// 净化后仅保留"<strong>Mens Aviator Jacket</strong>"

2. 展示用户提交内容时防范XSS #

展示的核心原则是匹配输出场景选择对应编码方式：

• 插入HTML内容区域：优先使用textContent而非innerHTML，自动转义所有特殊字符：

  // 安全展示纯文本
  document.getElementById("output").textContent = userInput;
  

• 必须展示HTML内容时：先净化再用innerHTML：

  // 净化后再插入HTML
  document.getElementById("output").innerHTML = DOMPurify.sanitize(userInput);
  

• 插入HTML属性中：手动转义引号、尖括号等特殊字符：

  const escapeAttribute = (input) => {
    return input.replace(/&/g, '&')
                .replace(/"/g, '"')
                .replace(/'/g, ''')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
  };
  // 示例：设置图片alt属性
  document.getElementById("productImg").alt = escapeAttribute(userInput);
  

3. 保存到数据库前的安全处理 #

数据库层面的核心风险是SQL注入，必须在后端实现防护，和前端净化无关：

• 强制使用参数化查询（Prepared Statements）：绝对不要直接将用户输入拼接进SQL语句。以Node.js + MySQL为例：

  // 错误示例：直接拼接输入，存在注入风险
  // db.query(`INSERT INTO products (name) VALUES ('${userInput}')`);
  
  // 正确示例：参数化查询，数据库会自动处理输入转义
  db.query('INSERT INTO products (name) VALUES (?)', [userInput], (err, result) => {
    // 处理查询结果
  });
  

• 前端不要处理数据库存储的转义：前端只负责展示层的净化，存储时保留原始输入（除非业务需要过滤内容），避免重复转义导致内容错乱，同时保留后续展示的灵活性。

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