教你在React项目中如何防止防 XSS 攻击

二十世纪末的程序员
634 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

什么是XSS攻击

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

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

我们先来演示一下XSS攻击！很多的项目需要给用户输入内容的权限，然后把用户输入的内容以HTML标签的形式渲染到页面上，这就很容易遭到XSS攻击

//这里故意写一段代码仿照XSS攻击
const pStr = '<img onerror="localStorage.removeItem(`app-channels`)" src=""/>'

//dangerouslySetInnerHTML是React里面的innerHtml,可以把内容以标签的形式渲染在页面上

<div dangerouslySetInnerHTML={{ __html:article.content }} />

这里是利用漏洞删除我存在本地localStorage里的的信息，因为我需要将用户输入的内容通dangerouslySetInnerHTML展示在页面上。这样就可以通过这一漏洞，故意给img标签写一个错误的路径，当这个img标签渲染到页面上时，会自动触发onerror事件来删除我本地的信息，因为路径故意是错误的，会无条件触发onerror事件！还可以通过src给别的网站发请求，获取我cooks里的信息

image.png

打开localStorage发现本地的app-channels里存的数据本删除了，这就是一个简单的XSS攻击，主要就是利用开发时的漏洞，注入恶意指令代码到网页

XSS是一项很老的网页攻击方式，我们前端使用较多的解决方法是dompurify插件

1、首先下包

npm i dompurify @types/dompurify -D

2、在需要展示用户内容的组件导入

import DOMPurify from 'dompurify'

3、把需要展示的内容放入用DOMPurify.sanitize方法

console.log(DOMPurify.sanitize(pStr))

image.png

这时我们打印发现那段危险代码已经被净化成安全的代码

在项目中使用DOMPurify，避免XSS攻击

  <div className="content">
        <div className="content-html dg-html"
        
        //只需要将要渲染到页面的数据放到DOMPurify.sanitize方法里就可以了
        
        dangerouslySetInnerHTML={{ __html:DOMPurify.sanitize(article.content)}}
        />
      </div>
avatar
文章
阅读
粉丝