危险地反应SetInnerHTML和脚本标签

Question

我正在构建一个用于处理远程HTML内容的React应用程序。

实际上，我们在后台使用所见即所得的东西，因此我需要在我的react应用中检索它。

它非常适合“标准”内容，例如<p> ， <div>等。

实际上，我想基于Twitter创建内容，例如将tweet的时间线嵌入应用程序页面中。

这是我从后端API获取的HTML：

<div>
  <a class="twitter-timeline" href="https://twitter.com/twitterAccount">Tweets by Twitter Account</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

没有比推特提供的嵌入东西更多/更少的东西了。

当我尝试放入时：

<div dangerouslySetInnerHTML={content}/>

它没有在屏幕上提供任何内容（链接除外），但没有提供时间轴，就像未执行script标签一样（并且我确信是因为这个原因）。

但是，这些东西存在于我的DOM中，实际上看起来像：

<div>
  <a class="twitter-timeline" href="https://twitter.com/user">Tweets by User</a><br>
  <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

是否存在使该脚本执行的方法？

Answer 1

您可以阅读script标记中的src属性，使用url进行请求，并在将eval()加载到文本后进行此操作，但这与推荐的做法相去甚远。

您是否总是希望相同的脚本标记出现在html中？ 也许包括

<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

在您的页面上将正常工作