危险的 SetInnerHTML 的安全替代方案 [英] Safe alternative to dangerouslySetInnerHTML

问题描述

我想在我的网站上有一个动态博客(使用 React).最初，我打算将原始 HTML 中的帖子存储在我的数据库中，并使用危险的 SetInnerHTML 生成内容.然而，我担心安全隐患.虽然我的应用没有任何敏感数据，但我对 XSS 不够精通，无法了解打开我的应用可能面临的所有危险.

I would like to have a dynamic blog on my site (which uses React). Initially, I was going to store the posts in raw HTML in my database and generate the content using dangerouslySetInnerHTML. I am however concerned about the security implications. While my app doesn't have any sensitive data, I'm not well enough versed in XSS to know all the dangers I'd be opening my app up to.

我很好奇是否有一种高性能、安全的方式在我的应用中动态加载博客页面.会使用 https://github.com/odysseyscience/react-router-proxy-loader 在这种情况下有用吗?将博客文章 JSX 的文件夹与我的应用程序的其余部分分开并使用它加载它(不可否认，我不确定 react-router-proxy-loader 是如何工作的).

I'm curious if there's a performant, safe way to dynamically load blog pages within my app. Would using https://github.com/odysseyscience/react-router-proxy-loader be useful in this case? Have a folder of blog post JSX separate from the rest of my app and load it using this (admittedly, I'm not sure how react-router-proxy-loader works).

我愿意接受建议.

推荐答案

如果 XSS 是您的首要问题，您可以使用 DOMPurify 在通过 dangerouslySetInnerHTML 将 HTML 插入到 DOM 之前对其进行清理.它只是缩小了 10K.它也适用于 Node.

If XSS is your primary concern, you can use DOMPurify to sanitize your HTML before inserting it in the DOM via dangerouslySetInnerHTML. It's just 10K minified. And it works in Node too.

这篇关于危险的 SetInnerHTML 的安全替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！