牛骨文教育服务平台(让学习变的简单)

xss过滤

富文本编辑器是黑客进行xss攻击的一个重要入口,因此不得不引起重视。本文就给出一个wangEditor编辑器在前端进行xss过滤的解决方案。


首先,编辑器本身将默认过滤在编辑源码模式下,用户输入的<script>标签,当然这是一个最基础的过滤手段。(如果你想关闭这个过滤,点击这里


接下来,针对更加高级、复杂的xss过滤,我们可以借用一个工具——http://jsxss.com/zh/index.html ,毕竟『术业有专攻』,还是用专业搞这项工作的库,比较靠谱。

如何下载使用,可参见它的官方网站。它的API很简单,网站首页就有一个样例,如下:

<!--引入 xss.js 文件-->
<script src="https://raw.github.com/leizongmin/js-xss/master/dist/xss.js"></script>
<script>
// 通过一个全局的 filterXSS 函数来过滤
console.log(filterXSS("<a href="#" onclick="alert(/xss/)">click me</a>"));
</scsript>

下面写一个完整的示例


<div id="div1">
    <p>请输入内容...</p>
</div>
<button id="btn1">获取内容</button>

<!--这里引用jquery-->
<!--这里引用wangEditor.js-->
<!--这里引用xss.js-->
<script type="text/javascript">
    var editor = new wangEditor("div1");
    editor.create();

    $("#btn1").click(function () {
        // 获取编辑器区域完整html代码
        var html = editor.$txt.html();
        // 过滤 xss 攻击
        html = filterXSS(html);
        
        // 接下来便可保存数据...
        // .....
    });