前端如何正确处理用户输入防止XSS攻击？

UI美含提问于 2026-03-15 15:26:19 阅读 45

安全

我在做一个评论功能，用户提交的内容要显示在页面上，但担心XSS漏洞。比如用户输入了alert(1)，直接innerHTML就会执行，这太危险了。

我试过用DOMPurify库清理，但有些场景又需要保留部分HTML（比如加粗和链接），结果配置起来很混乱。有没有更稳妥又简单的方式？

比如下面这段代码，怎么改才能既安全又能支持有限的富文本？

function renderComment(text) {
  const div = document.createElement('div');
  div.innerHTML = text; // 这里明显不安全
  document.body.appendChild(div);
}

我来解答赞 13 收藏

反馈

2 条解答

闲人兰兰 Lv1

问题在于直接用innerHTML太危险。用 textContent 处理纯文本，需要支持富文本的话，DOMPurify配置个白名单就行。

function renderComment(text) {

  const div = document.createElement('div');

  div.innerHTML = DOMPurify.sanitize(text, {ALLOWED_TAGS: ['b', 'a'], ALLOWED_ATTR: ['href']});

  document.body.appendChild(div);

}

记得把需要的标签和属性都加到白名单里，别嫌麻烦，安全第一。唉，前端安全真够折腾人的。

2026-03-31 23:03

技术文瑞 Lv1

这个问题很简单，要么纯文本，要么用库过滤，别自己造轮子。

如果只需要显示用户输入的文本，别用innerHTML：

function renderComment(text) {

  const div = document.createElement('div');

  div.textContent = text; // 直接赋值textContent会自动转义HTML

  document.body.appendChild(div);

}

如果确实要保留部分HTML标签（加粗、链接、斜体这些），用DOMPurify配白名单：

import DOMPurify from 'dompurify';



function renderComment(text) {

  const config = {

    ALLOWED_TAGS: ['b', 'strong', 'i', 'em', 'a', 'br', 'p'],

    ALLOWED_ATTR: ['href', 'target', 'rel']

  };

  

  const clean = DOMPurify.sanitize(text, config);

  const div = document.createElement('div');

  div.innerHTML = clean;

  document.body.appendChild(div);

}

复制这个配置，script标签、onclick、onerror这些危险的东西会被直接过滤掉，但加粗、斜体、链接会保留。

后端也必须做一遍过滤，别全靠前端。前端防不住故意构造的请求。DOMPurify是业界标准，别自己写正则替换，那玩意儿早晚有漏洞。

2026-03-16 17:06