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);
// 接下来便可保存数据...
// .....
});