前言
在平时使用的富文本编辑器中也会存在恶意输入JS脚本
使用js-xss 对文本进行过滤,删除掉可能存在的脚本文章来源:https://www.toymoban.com/news/detail-506205.html
安装
NPM
npm install 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 的配置项文章来源地址https://www.toymoban.com/news/detail-506205.html
/*
* 只允许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");
function getDefaultWhiteList() {
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>,如果是 <xxx> 则需要替换
// 替换 < >
// editor.txt.html().replaceAll('<', '<').replaceAll('>', '>');
const html = xss(editorHtml, options);
console.log(html);
总结
- 富文本形式输入脚本的形式是 存储型
xss
,提交的数据存在脚本,并且保存成功。其他人访问当前页面就会触发 - 开启
httponly
(禁止JS获取Cookie) - 输入过滤,输出转义
到了这里,关于修复富文本编辑器引起的XSS安全问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!