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

这篇具有很好参考价值的文章主要介绍了修复富文本编辑器引起的XSS安全问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

安装

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>,如果是 &lt;xxx&gt; 则需要替换
// 替换 &lt; &gt;
// editor.txt.html().replaceAll('&lt;', '<').replaceAll('&gt;', '>');
const html = xss(editorHtml, options);
console.log(html);

总结

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

到了这里,关于修复富文本编辑器引起的XSS安全问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • dede编辑器修改成纯文本编辑器的方法

    我在做优秀啦网站大全的时候需要的正文内容都不需要设置什么文字样式,所以我需要把编辑器上的工具全部取消掉,包括会员投稿中的编辑器工具栏全部取消掉或者屏蔽隐藏掉,所以我需要把DEDE编辑器修改成纯文本编辑器的方法如下: 如图: 首先打开 /include/ckeditor/ckedi

    2024年02月16日
    浏览(42)
  • 【富文本编辑器实战】04 菜单组件和编辑器的整合

    在上一篇文章中,我们对整个编辑器项目的大体结构有了一定的了解,主要分为菜单栏和编辑区。菜单栏包括了编辑器的主要文本操作功能,且菜单项是可配置的。编辑器界面显示比较简单,是一个可编辑的 div 区域。接下来我们就来把编辑器的整体框架搭建起来,让其可以

    2024年01月24日
    浏览(68)
  • 富文本编辑器

    啥是富文本编辑器,就是下面这个东西: 1.那这玩意儿怎么安装和配置: 2. 通过(在终端里输入)  npm install vue-quill-editor --save  安装 3.具体的在项目里的配置过程可以看最新的官方文档vue-quill-editor · Quill官方中文文档 · 看云 4.这里先简单说下怎么配置,首先在main里输入:

    2024年02月10日
    浏览(52)
  • Vim文本编辑器

    目录 一、Vim文本编辑器   1.1、什么是Vim文本编辑器 1.2、Vim文本编辑器基本格式 1.3、Vim的三种模式及切换 ​二、命令模式 2.1、Vim的进入与退出 2.2、命令模式下光标跳转的快捷键 2.3、常用命令集合 三、编辑模式 四、末行模式 Linux 系统中“一切皆文件”,因此当我们要更改

    2024年02月10日
    浏览(56)
  • 【Electron】富文本编辑器之文本粘贴

    由于这个问题导致,从其他地方复制来的内容 粘贴发送之后都会多一个 换行 在发送的时候如果直接,发送innerHTML 就 可以解决 Electron h5 Andriod 都没问题,但是 公司的 IOS 端 不支持,且不提供支持(做不了。)。 于是,继续想办法。 把单纯的富文本插入操作,改一下,只粘

    2024年02月03日
    浏览(41)
  • 15 文本编辑器vim

            如果file.txt就是修改这个文件,如果不存在就是新建一个文件。          使用vim建完文件后,会自动进入文件中。          底部要是显示插入,是编辑模式;         按esc,底部要是空白的,则是进入命令模式,可以输入一些快捷键进行操作,比如说

    2024年02月15日
    浏览(53)
  • 简版的富文本编辑器、VUE+ElementUI 富文本编辑器 element ui富文本编辑器的使用(quill-editor) 不好用你来打我!全网醉简单!要复杂的别来!

    实现效果   1.安装插件 npm install vue-quill-editor --save 2.安装成功后在package.json中查看 3.在main.js中全局引入插件 4.页面实现 感谢老哥: ElementUI生成富文本编辑器 https://blog.csdn.net/keplerm/article/details/123379511?spm=1001.2101.3001.6650.9utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCom

    2024年02月16日
    浏览(69)
  • vim文本编辑器,常用命令

    目录 1、常用模式 2、基本移动光标 3、插入和替换文本 4、删除和复制文本 5、搜索和替换 6、保存和退出 Vim是一款功能强大的文本编辑器,在Linux系统中被广泛使用。它提供了丰富的编辑和操作功能,适用于编程、文件编辑、配置文件修改等各种任务。 下面是对Vim常用场景详

    2024年01月16日
    浏览(52)
  • 八、vim高级文本编辑器

    vim是vi的增强版,由vim-enhanced软件包提供。 vim具有vi不具备的特性eg:命令语法的高亮 vim是一个默认的文本编辑器来进行使用,在众多的Linux发行版中均被内置,成为Linux主流的文本编辑器。 gvim:vim的图形化版本 提供在vim-x11包里、 1、vim的工作模式 命令模式:打开文件进入命

    2024年02月05日
    浏览(47)
  • Linux文本编辑器-vim

    目录 前言 Vim三种模式 打开方式 命令模式 插入模式 可视模式 保存和退出 Vim是一个功能丰富且强大的文本编辑器,被广泛用于Linux系统。它是Vi的增强版本,提供了更多的功能和改进,同时可以通过插件扩展其功能; 「命令模式」:可以进行删除、复制、粘贴等快捷操作。

    2024年02月15日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包