JavaScript 节点操作中怎么安全插入用户输入内容防止XSS-js教程-PHP中文网

使用 textcontent 属性赋值是防止 xss 的最安全做法，因为它会将用户输入作为纯文本处理，浏览器会自动转义其中的 html 特殊字符，从而阻止脚本执行。如果必须插入 html 结构，应使用 dompurify 等库对内容进行清洗，或者通过创建元素节点并逐个设置属性的方式构建 dom，避免直接使用 innerhtml。

JavaScript 节点操作中怎么安全插入用户输入内容防止XSS

为什么 innerHTML 会导致 XSS 漏洞

当使用 innerHTML 插入包含恶意脚本的用户输入时，浏览器会解析并执行这些脚本。例如，如果用户输入 <script>alert(1)</script>，直接赋值给 innerHTML 会导致弹窗。这是因为 innerHTML 将字符串解析为 HTML 标记，而不仅仅是文本内容。

JavaScript 节点操作中怎么安全插入用户输入内容防止XSS

const userInput = '@@##@@';
const container = document.getElementById('app');
// 危险操作：直接插入 HTML
container.innerHTML = userInput;

上述代码中，userInput 包含一个带有 onerror 事件处理程序的 img 标签。当这段 HTML 被插入到 DOM 中时，浏览器尝试加载不存在的图片源 x，触发错误后执行 alert(1)。这就是典型的 XSS 攻击向量。

如何安全地插入 HTML 内容

如果需要保留用户的格式（如粗体、链接），可以使用 DOMParser 或第三方库来清洗 HTML。这里演示使用 DOMParser 结合白名单策略的安全插入方法。首先解析 HTML，然后遍历节点，移除所有非白名单允许的标签和属性。

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

function sanitizeHTML(html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT);
  const allowedTags = ['b', 'i', 'u', 'a'];
  
  while (walker.nextNode()) {
    const node = walker.currentNode;
    if (!allowedTags.includes(node.tagName.toLowerCase())) {
      node.parentNode.removeChild(node);
    } else if (node.tagName.toLowerCase() === 'a') {
      // 只允许 href 属性，且必须是 http/https 开头
      const href = node.getAttribute('href');
      if (!href || !href.startsWith('http')) {
        node.parentNode.removeChild(node);
      }
    }
  }
  return doc.body.innerHTML;
}

该函数接收原始 HTML 字符串，返回经过清洗的 HTML。它移除了所有不在白名单中的标签，并对 a 标签的 href 进行了严格校验。这样可以在一定程度上保留用户想要的格式，同时防止恶意脚本注入。

基于程序输出结果的具体问题

在上面的 sanitizeHTML 函数中，如果用户输入的是 Hello<script>alert(1)</script>，最终输出的 HTML 是什么？

最终输出的 HTML 是 Hello。因为 <script></script> 标签不在白名单中，所以被移除。而标签在白名单中，且没有需要移除的属性，所以被保留。这证明了白名单策略的有效性，但同时也意味着任何不在白名单中的标签都会被丢弃，包括 div、span 等常用标签，因此这种方法适用于对格式要求不高的场景。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南