修复富文本编辑器引起的XSS安全问题

前言

在平时使用的富文本编辑器中也会存在恶意输入JS脚本

使用js-xss 对文本进行过滤，删除掉可能存在的脚本

安装

NPM

npminstall xss

Bower

bower install xss

使用

在Node中使用

var xss =require("xss");var html =xss('<script>alert("xss");</script>');
console.log(html);

浏览器中使用

<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script><script>// 使用函数名 filterXSS，用法一样var html =filterXSS('<script>alert("xss");</scr'+'ipt>');alert(html);</script>

语法

xss

接收两个参数，第一个参数

HtmlString

需要被处理的

html

字符串，第二个参数

options

如何处理 hmtl 的配置项

/*
* 只允许a标签，该标签只允许href, title, target这三个属性
var options = {
  // 白名单
  whiteList: {
    a: ["href", "title", "target"]
  },
  // 过滤掉不再白名单的标签
  stripIgnoreTag: true,
  // script标签较特殊，需要过滤标签中间的内容
  stripIgnoreTagBody: ["script"],
  // 更多文档 https://gitee.com/meiyou_ruguo/js-xss?_from=gitee_search
};
*/const= options ={};// 自定义规则const html =xss('<script>alert("xss");</script>', options);

项目中使用

const xss =require("xss");functiongetDefaultWhiteList(){return{a:["target","href","title"],abbr:["title"],address:[],area:["shape","coords","href","alt"],article:[],aside:[],audio:["autoplay","controls","loop","preload","src"],b:[],bdi:["dir"],bdo:["dir"],big:[],blockquote:["cite"],br:[],caption:[],center:[],cite:[],code:[],col:["align","valign","span","width"],colgroup:["align","valign","span","width"],dd:[],del:["datetime"],details:["open"],div:[],dl:[],dt:[],em:[],font:["color","size","face"],footer:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],header:[],hr:[],i:[],img:["src","alt","title","width","height"],ins:["datetime"],li:[],mark:[],nav:[],ol:[],p:[],pre:[],s:[],section:[],small:[],span:[],sub:[],sup:[],strong:[],table:["width","border","align","valign","style"],tbody:["align","valign"],td:["width","rowspan","colspan","align","valign","style"],tfoot:["align","valign"],th:["width","rowspan","colspan","align","valign"],thead:["align","valign"],tr:["rowspan","align","valign"],tt:[],u:[],ul:[],video:["autoplay","controls","loop","preload","src","height","width"],style:[]//新添};}const options ={whiteList:getDefaultWhiteList(),stripIgnoreTag:true,stripIgnoreTagBody:['script']}let editorHtml = editor.txt.html()// 确保这里拿到的是 <script>xxx</script>,如果是 &lt;xxx&gt; 则需要替换// 替换 &lt; &gt;// editor.txt.html().replaceAll('&lt;', '<').replaceAll('&gt;', '>');const html =xss(editorHtml, options);
console.log(html);

总结

• 富文本形式输入脚本的形式是 存储型 xss ,提交的数据存在脚本，并且保存成功。其他人访问当前页面就会触发
• 开启 httponly （禁止JS获取Cookie）
• 输入过滤，输出转义