在 Azure 通信服务英雄聊天应用程序中呈现 HTML 字符串

Question

我正在尝试将 html 字符串呈现到基于 Azure 通信服务的聊天应用程序中。样板代码取自 Azure Samples GitHub repo https://github.com/Azure-Samples/communication-services-web-chat-hero。

我有以下格式的字符串： "str1</br>str2</br>str3</br>".

我想要在应用程序的 ChatArea 组件中将此字符串呈现为 html，使其看起来像

str1
str2
str3

我还在 sideEffects.ts 文件中的 sendMessageHelper 方法中将 SendMessageOptions.type 设置为“html”，但仍将输出仅作为字符串获取。唯一的区别是现在我在br 标签中得到了没有/ 的净化字符串。

任何帮助将不胜感激。 提前非常感谢。

Answer 1

默认情况下，此示例假定消息是单行字符串，并且 react 不会自动处理 \n 字符或 <br />。

要执行多行，在呈现消息的ChatThread 内，您需要确保生成适当的 JSX：

要支持多行，其中行由\n 分隔，您需要更新

{renderHyperlink(message.content.message)}

类似于：

{message.content.message.split(/\n/g).map((line: string) => <p>{renderHyperlink(line)}</p>)}

更多信息和其他解决方案可以在这里找到：How to add a <br> tag in reactjs between two strings?

要支持从消息中呈现任意 HTML，您需要修改此行以将消息字符串加载为 html。 但是在应用程序中使用任意发送的 html 可能很危险，恶意用户可能会嵌入恶意脚本 html 或脚本，因此请避免这样做。欲了解更多信息，请搜索跨站脚本攻击：https://owasp.org/www-community/attacks/xss/。