在React中防范XSS威胁

很好!用户输入的内容在屏幕上只呈现为文字,威胁已被解除。

这是个好消息!React默认情况下会对渲染的内容进行转义处理,将所有的数据都视为文本字符串处理,这相当于使用原生 textContent 浏览器API。

在React中清理HTML内容

所以,这里的建议似乎很简单。只要不要在你的React代码中使用dangerouslySetInnerHTML 你就可以了。但如果你发现自己需要使用这个功能呢?

例如,也许您正在从诸如Drupal之类的内容管理系统(CMS)中提取内容,而其中某些内容包含标记。(顺便说一句,我可能一开始就不建议在文本内容和来自CMS的翻译中包含标记,但对于本例,我们假设您的意见被否决了,并且带有标记的内容将保留下来。)

在这种情况下,您确实想解析HTML并将其呈现在页面上。那么,您如何安全地做到这一点?

答案是在渲染HTML之前对其进行清理。与完全转义HTML不同,在渲染之前,您将通过一个函数运行内容以去除任何潜在的恶意代码。

您可以使用许多不错的HTML清理库。和任何与网络安全有关的东西一样,最好不要自己写这些东西。有些人比你聪明得多,不管他们是好人还是坏人,他们比你考虑得更多,一定要使用久经考验的解决方案。

我最喜欢的清理程序库之一称为sanitize-html,它的功能恰如其名。您从一些不干净的HTML开始,通过一个函数运行它,然后得到一些漂亮、干净、安全的HTML作为输出。如果您想要比它们的默认设置提供更多的控制,您甚至可以自定义允许的HTML标记和属性。

【声明】:芜湖站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

相关文章