危险地SetInnerHTML 是从 React 中的 API 呈现 HTML 的唯一方法吗? [英] Is dangerouslySetInnerHTML the only way to render HTML from an API in React?

问题描述

我正在用 React 制作电视指南.我正在从这个 API 中提取节目信息:http://api.tvmaze.com/episodes/333

I'm making a TV guide with React. I'm pulling show information from this API: http://api.tvmaze.com/episodes/333

如您所见，summary 包含 html.如果我渲染该字段.然后 HTML 被解释为一个字符串，这意味着您可以在页面上看到 <p> 标签等.

As you can see the summary contains html. If I render the field. then the HTML is interpreted as a string, meaning that you can see the <p> tags, etc., on the page.

我知道我可以使用 dangerouslySetInnerHTML 但出于安全原因不鼓励这样做.这方面的最佳做法是什么?从 API 获取格式化文本并需要呈现它必须是相当普遍的.我很惊讶没有允许

、

等的过滤器，但不允许脚本标签.

I know that I could use dangerouslySetInnerHTML but it's discouraged for security reasons. What is the best practice for this? It must be fairly common to get formatted text from an API and need to render it. I'm surprised there isn't a filter which would allow <p>, <h1>, etc., but not script tags.

推荐答案

DangerouslySetInnerHTML 是从 React 中的 API 呈现 HTML 的唯一方法吗?

Is dangerouslySetInnerHTML the only way to render HTML from an API in React?

从技术上讲，没有.如果你愿意，你可以用 Babel 转换器做一些魔法，但这种方法不再安全"或值得推荐.这只是一个更灵活的选择.有关详情，请参阅此处.

Technically, no. You could do some magic with the Babel transformer if you prefer, but that approach isn't any more "safe" or recommendable. It's only a more flexible alternative. See here for more info about that.

也就是说，dangerouslySetInnerHTML 仍然是将原始标记插入到组件中的推荐方法.毫无疑问，这个名字很吓人，只是为了提醒开发人员潜在 XSS 风险.您使用它的事实不会自动使您的代码变得臭"或坏".

That said, dangerouslySetInnerHTML is still the recommended approach to inserting raw markup into your component. Make no mistake, the name is frightening just to remind developers of the potential XSS risk. The fact that you use it doesn't automatically render your code "smelly" or otherwise "bad".

换句话说，如果您确定您获取的代码不是恶意的，那么这是一个非常安全的赌注.如果您信任 API，则无需担心.例如，这是完全安全的:

In other words, if you are certain that the code you fetch is not malicious it's a pretty safe bet. If you trust the API you have little to worry about. For example, this is perfectly safe:

return <div dangerouslySetInnerHTML={{__html: "<p>foo bar</p>"}} />;

所以是这样的:

let markup = SomeApiCallToTrustedProvider(); //"<p>foo bar</p>"
return <div dangerouslySetInnerHTML={{__html: markup}} />;

<小时>

我不是这个领域的专家，但我的理解是，如果用户无法影响其他用户对您网站的展示，那么您就可以免受传统 XSS 攻击.一个例子是，如果您要从数据库中获取未清理的输入数据并将其反映为代码中的原始标记.这将允许恶意用户向数据库提交代码，当这些代码呈现给其他用户时，这些代码将被有效地执行，从而使用户能够操纵您的页面.

---

I'm no expert in this field, but my understanding is that if users cannot influence the presentation of your website for other users, you are safe from the traditional XSS attacks. An example would be if you were to fetch un-sanitized input data from a database and reflect it as raw markup in your code. That would allow a malicious user to submit code to the database, which when presented to other users, would then be executed effectively giving users the ability to manipulate your page.

我很惊讶没有允许

、

等但不允许脚本标签的过滤器.

I'm surprised there isn't a filter which would allow <p>, <h1> etc but not script tags.

嗯，这将是某种消毒.有一些关于如何实现自己的片段，此处 例如...

Well, this would be some kind of sanitization. There are snippets out there of how you can implement your own, here for example...

这篇关于危险地SetInnerHTML 是从 React 中的 API 呈现 HTML 的唯一方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！