在 Preact 中渲染原始 HTML 而不使用 Preact 标记？

Posted 2023-02-16

【中文标题】在 Preact 中渲染原始 HTML 而不使用 Preact 标记？

【英文标题】：Render raw HTML in Preact without using Preact Markup?

【发布时间】：2019-12-07 10:37:46

【问题描述】：

Preact 标记为 8.5kb，是 Preact 大小的一半。有没有一种无需解析即可呈现原始 html 的方法？

我能想到的一种方法是渲染一个占位符，然后使用innerHTML 替换componentDidMount 或componentDidUpdate 中的占位符，但有没有不那么老套的方法？

【问题讨论】：

preact-X 有dangerouslySetInnerHtml。

【参考方案1】：

正如@pmkro 在评论中提到的，您可以使用dangerouslySetInnerHTML 来呈现原始html 字符串。

import  h, render  from "preact";

const vnode = <div dangerouslySetInnerHTML=
  __html: "<span>foobar</span>"
 />

render(vnode, document.getElementById("app"));
// renders <div><span>foobar</span></div>

一点警告：您需要绝对确保以dangerouslySetInnerHTML 结尾的字符串已正确转义。否则，您将自己（和您的用户）向 XSS 注入攻击敞开大门。因此名称为dangerouslySetInnerHTML。

免责声明：我在 Preact 工作。

【讨论】：

此类攻击是否也与来自可信来源的数据有关？究竟要逃避什么？