reactjs - 使用 react 获取 wordpress 帖子显示特殊字符而不是撇号

Question

我得到我假设的是来自 wordpress 博客端点的 json 数据，如下所示：

我现在正在循环并显示瓷砖：

<div>{posts && posts.map((post) => <h1>{post.title.rendered}</h1>)}</div>

但是帖子标题显示不正确。例如单词不显示Don’t

我发现我可以用dangerouslySetInnerHTML它来解决这个问题，但它安全吗？它包含“危险”一词的事实令人担忧。

score 1 · Accepted Answer

我相信这dangerouslySetInnerHTML是解决这个问题的方法 - 但我将更详细地说明为什么“dangerouslySetInnerHTML”中有“dangerously”，希望这能帮助您针对您的情况做出明智的决定。

什么dangerouslySetInnerHTML是在 DOM 元素中呈现给它的任何 HTML 字符串。

例如：

<h1 dangerouslySetInnerHTML={{__html: post.title.rendered}} />

（顺便说一句，请注意__html键有两个下划线）

将正确地将字符串呈现Don’t为Don't.

这一切都是无害的，但是，例如，如果的值post.title.rendered可以由不受信任的一方（例如任意用户）设置，并且如果该任意用户想要造成一些损害，他们可以输入如下字符串：

<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>

当页面加载时，浏览器会执行这段代码——因为 React 会生成以下 DOM：

<h1>
   <script type="text/javascript>
   // Do evil stuff
   console.log('I did some evil stuff');
   </script>
</h1>

因此，考虑到所有这些，如果您确定该字段的值在您的控制范围内（而不是其他任何人的控制范围内），并且您也知道这些字符串中不会有任何任意代码，那么继续使用dangerouslySetInnerHTML.

但是，如果您以外的其他人有可能操纵此字段，我会转而使用decode-html-entities 之类的东西- 这样您就可以拥有所需的演示文稿，而不会影响您的应用程序/用户。

1 回答 1