将 dangerouslySetInnerHTML 与硬编码 html 字符串一起使用是否安全？

Question

我们有一个警报组件，可以为用户呈现重要信息。但是，这个组件有些抽象，您只需要将内容作为字符串数组传递即可。

const Component = () => {
    const alertContent = ['This is the first things', 'Second thing', 'third thing'];
    return (
        <AlertComponent content={alertContent} />
    )
}

这成功地将内容显示为列表。但是，我们需要将部分文本加粗以强调。我考虑过更改数组中的字符串以包含 html 标记，然后使用 dangerouslySetInnerHTML 来呈现它们。类似于：

const alertContent = ['This is an <b>important</b> text', ...];
return (
    <>
        {alertContent.map(content => <span dangerouslySetInnerHTML={{__html: content}} />)}
    </>
)

我读过有关跨站点脚本攻击的文章，但我读过的大多数文章都在谈论用户输入和第三方 API。硬编码 html 是否可以防止这种情况发生？或者我还需要使用消毒剂吗？

Answer 1

如果你，编码器，创建所有要插入的HTML，并确保它没有任何XSS漏洞，那么是的, 就安全了。

dangerouslySetInnerHTML 之所以这样命名，主要是为了告诉您，如果使用不当，您的应用很容易出现安全问题。但是如果设置的 HTML 是 hard-coded 并且是安全的，那么 dangerouslySetInnerHTML 也是安全的。

当标记来自用户输入或来自外部服务时，消毒剂是必需的。如果标记完全来自您自己的代码，则不需要它们。

也就是说，在这种特殊情况下：

However, we need to bolden parts of the text for emphasis

为什么不直接使用 JSX？

const alertContent = [<>This is an <b>important</b> text</>, ...];

尽可能使用 JSX 编写比不得不求助于 dangerouslySetInnerHTML 更可取。

Answer 2

如果要在dangerouslySetInnerHTML中呈现的文本是由管理员或经过验证的用户设置的，应该是安全的，没有问题。

但如果普通用户可以设置文本或html内容，你应该考虑一下。

您可以提供 html UI 编辑器，例如 TinyMCE，供用户设置 html 内容，并实现一些逻辑来去除危险的 html 标签，例如 iframe，后端应用程序上的脚本等。

将 dangerouslySetInnerHTML 与硬编码 html 字符串一起使用是否安全？

Is it safe to use dangerouslySetInnerHTML with hard coded html strings?

javascript

xss

reactjs