nextjs项目，富文本消毒（预防xss)

三橘菜花
701 阅读1分钟

XSS概述

跨站脚本 ( Cross-Site Scriptin ) 简称xss，是由于Web应用程序对用户的输入过滤不足而产生的.攻击者利用网站漏洞把恶意的脚本代码(通常包括HTML代码和客户端 Javascript脚本)注入到网页之中，当其他用户浏览这些网页时，就会执行其中的恶意代码，对受害用户可能采取 Cookie资料窃取、会话劫持、钓鱼欺骗等各种攻击。

# 简单的几条常用xss的代码
# 常用
<script>alert("xss")</srcipt>

# DOM型
<a href="#" onclick="alert('xss')">过过审吧</a>

# 绕过、过滤型
'"><sCrIPt>alert('xss')></sCrIPt>
<scr<script>ipt>alert('xss')</scr</script>ipt>
';alert('xss');'
  • 在我们开发的时候，如果不注意预防很可能就造成了XSS的漏洞。
  • 我们可以简单的使用几个富文本消毒库来处理这些问题,这俩个库可以针对一些xss代码进行消毒
    • xss
    • dompurify
    • isomorphic-dompurify
xss库的使用
import xss from 'xss'

const xssCode = '<script>alert("xss")</srcipt>'
const disinfectCode = xss(xssCode)

import DOMPurify from 'isomorphic-dompurify';

const clean = DOMPurify.sanitize('<s>hello</s>'); 

import { JSDOM } from 'jsdom'
import DOMPurify from 'dompurify'
const { window } = new JSDOM('<!DOCTYPE html>')
const domPurify = DOMPurify(window)
console.log(domPurify.sanitize(`
        hell <script>alert("hi");</script>
        <div onclick="alert(123);">
                o
        </div>
        world
        <img id="createElement">
`));

简单的使用了这俩个库，详细的使用可以查阅npmjs的文档

avatar
文章
阅读
粉丝