Node.js+Express+Socket.IO聊天应用：<span>标签被直接打印未渲染

你遇到的问题核心在于客户端渲染消息时使用了textContent属性——这个属性会把传入的所有内容当作纯文本处理，包括HTML标签，自然不会解析<span>这类格式标记，直接原样显示。

具体原因 #

看你客户端代码里的这段关键逻辑：

socket.on('message', (message) => {
    const messageElement = document.createElement('div');
    messageElement.setAttribute('class', 'message');
    messageElement.textContent = message; // 这里是问题根源！
    messagesDiv.appendChild(messageElement);
    // ...其他代码
});

textContent的作用是设置或获取元素的纯文本内容，会自动转义所有HTML特殊字符（比如<变成<），所以服务器传来的带<span>的字符串会被当成普通文本显示，而不是被浏览器解析成DOM元素。

解决方法 #

有两种可选方案，推荐第二种（更安全，避免XSS风险）：

方案1：改用innerHTML（简单但有风险）

直接把textContent换成innerHTML，让浏览器解析HTML内容：

socket.on('message', (message) => {
    const messageElement = document.createElement('div');
    messageElement.className = 'message';
    messageElement.innerHTML = message; // 替换为innerHTML
    messagesDiv.appendChild(messageElement);
    chatBoxDiv.scrollTop = chatBoxDiv.scrollHeight;
    checkForSpam();
});

⚠️ 注意：如果允许用户输入任意内容，这种方式存在XSS漏洞——恶意用户可以发送包含<script>或其他恶意HTML的消息，会在其他用户的浏览器中执行。若你的应用面向公开用户，不建议直接使用此方案。

方案2：拆分消息结构，安全创建DOM元素（推荐）

不在服务器端拼接HTML字符串，而是传递结构化的数据（包含时间、用户名、消息内容的对象），客户端再逐个创建DOM元素，彻底避免XSS风险：

修改服务器端代码：

发送结构化数据而非HTML字符串：

socket.on('message', (message) => {
    const timestamp = new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' });
    // 构造结构化消息数据
    const messageData = {
        time: timestamp,
        username: users[socket.id],
        content: message
    };

    if (message.startsWith('/')) {
      const [command, ...args] = message.split(' ');
      switch (command) {
        // 命令处理逻辑
      }
    } else {
      messages.push(JSON.stringify(messageData));
      if (messages.length > MAX_MESSAGES) {
        messages.shift();
      }
      io.emit('message', messageData);
      console.log(`${users[socket.id]}: ${message}`);
      // 写入文件时使用纯文本格式
      fs.appendFile('recent-messages.txt', `[${timestamp}] ${users[socket.id]}: ${message}\n`, (err) => {
        if (err) {
          console.error(err);
        }
      });
    }
});

修改客户端代码：

接收对象后，逐个创建DOM元素并组装：

socket.on('message', (messageData) => {
    const messageElement = document.createElement('div');
    messageElement.className = 'message';

    // 创建时间span
    const timeSpan = document.createElement('span');
    timeSpan.className = 'chat-time';
    timeSpan.textContent = `[${messageData.time}]`;

    // 创建用户名span
    const usernameSpan = document.createElement('span');
    usernameSpan.className = 'chat-user';
    usernameSpan.textContent = messageData.username;

    // 创建消息内容span
    const messageSpan = document.createElement('span');
    messageSpan.className = 'chat-message';
    messageSpan.textContent = messageData.content; // 用textContent确保用户输入被转义

    // 组装所有元素
    messageElement.appendChild(timeSpan);
    messageElement.appendChild(document.createTextNode(' '));
    messageElement.appendChild(usernameSpan);
    messageElement.appendChild(document.createTextNode(': '));
    messageElement.appendChild(messageSpan);

    messagesDiv.appendChild(messageElement);
    chatBoxDiv.scrollTop = chatBoxDiv.scrollHeight;
    checkForSpam();
});

这种方式既实现了样式渲染，又能确保用户输入的内容被当作纯文本处理，完全避免XSS攻击。

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