Microsoft Bot Framework(Node.js) Webchat渲染HTML标签问题求助

我之前也踩过这个坑——Webchat默认会把HTML标签转义成纯文本（比如显示成<br> bla bla <br>），要让它正常渲染HTML，得从Bot端和Webchat客户端两边配合调整，下面是亲测有效的实现步骤：

一、Bot端（Node.js）：发送HTML格式的消息 #

首先，Bot在发送消息时，要明确指定消息的文本格式为html，而不是默认的plain。这样Webchat才会识别到这是需要渲染的HTML内容，代码示例如下：

async onTurn(context) {
    if (context.activity.type === ActivityTypes.Message) {
        // 构造包含HTML的消息
        const htmlActivity = {
            type: ActivityTypes.Message,
            text: "<br> bla bla <br><strong>这是一段加粗的示例文本</strong>",
            textFormat: "html" // 关键配置：告诉Webchat这是HTML格式
        };
        await context.sendActivity(htmlActivity);
    }
}

二、Webchat客户端：自定义渲染逻辑 #

Webchat出于安全考虑，默认会过滤HTML内容，所以需要我们自定义活动渲染器，来处理HTML格式的消息。这里分两种场景给出代码：

场景1：使用React版Webchat（npm包） #

如果你的Webchat是通过npm引入的React组件，可以自定义renderActivity函数来渲染HTML：

import React from 'react';
import ReactDOM from 'react-dom';
import { createDirectLine, WebChat } from 'botframework-webchat';

// 替换成你的Direct Line Token
const directLine = createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });

// 自定义活动渲染器
const renderCustomActivity = (props) => {
    const { activity } = props;
    // 判断消息是否为HTML格式
    if (activity.textFormat === 'html') {
        // 使用dangerouslySetInnerHTML插入HTML内容
        return <div dangerouslySetInnerHTML={{ __html: activity.text }} />;
    }
    // 非HTML消息用默认渲染逻辑
    return WebChat.renderActivity(props);
};

ReactDOM.render(
    <WebChat
        directLine={directLine}
        renderActivity={renderCustomActivity}
    />,
    document.getElementById('webchat')
);

场景2：使用CDN版Webchat #

如果是直接通过CDN引入Webchat的静态页面，代码可以这样写：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
    <div id="webchat" role="main"></div>
    <script>
        // 替换成你的Direct Line Token
        const directLine = window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });

        const renderActivity = (props) => {
            const { activity } = props;
            if (activity.textFormat === 'html') {
                const divElement = document.createElement('div');
                divElement.innerHTML = activity.text;
                return divElement;
            }
            // 其他消息用默认渲染
            return window.WebChat.renderActivity(props);
        };

        window.WebChat.renderWebChat(
            {
                directLine: directLine,
                renderActivity: renderActivity
            },
            document.getElementById('webchat')
        );
    </script>
</body>
</html>

重要安全提醒 #

直接渲染HTML存在XSS攻击风险，所以一定要：

• 只渲染可信的HTML内容：确保Bot发送的HTML是你自己控制的，不要包含来自用户输入的未过滤内容。
• 如果需要处理用户输入的HTML：一定要用专门的库（比如DOMPurify）对HTML进行清理，只保留安全的标签和属性。

内容的提问来源于stack exchange，提问作者Sahar Ben-Shushan