React中将字符串类型的标签渲染在页面上-dangerouslySetInnerHTML

React 中的 innerHTML

• 在vue中提供了v-html可以直接将内容标签解析渲染在页面上
• 虽然react中没有提供像什么v-html,但是提供了一个方法dangerouslySetInnerHTML,效果和v-html一样
  
  

缺点 — XSS攻击

人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容

例如你写一个文章类的项目,别人写了一些字符串标签,你通过dangerouslySetInnerHTML方法渲染的标签,那么有些人会恶意的,在字符串的标签中书写一些例如 script,img等标签在里面书写代码或发请求,并且那些代码被渲染的同时都会被执行,可能他们会通过这些方法,获取后端的数据,写一些恶意破坏用户体验的代码,所以,我们要杜绝这种情况的发生,使用一些手段净化

解决方案

安装包

npm i dompurify @types/dompurify -D

在页面中调用 dompurify 来对渲染的内容做净化：

import DOMPurify from 'dompurify'

使用DOMPurify.sanitize()包裹要渲染的内容

<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(a)}}>