富⽂本编辑器防xss攻击
在平时的开发中,有时需要引⼊富⽂本编辑器,由⽤户来输⼊信息并保存⼊数据库。⽽这也给项⽬留下了潜在的隐患,如果不在开发时就做好防范,则很容易受到相应的攻击。
对于常见的web安全问题,可以参考
现在针对富⽂本编辑器如何防⽌xss攻击,给出⼏点建议,也供⾃⼰以后查:
推荐使⽤UEditor
使⽤ESAPI
推荐使⽤UEditor
在多个项⽬中使⽤了UEditor,在使⽤上⽐较顺⼿,⽽且它⼀直在更新维护,最重要的是它注重修复其潜在的xss漏洞。这将有效的防⽌xss 攻击。
使⽤ESAPI
针对不同的开发语⾔,ESAPI有多个不同版本相对应。⽐如Java,PHP,.NET,Python,Classic ASP,Cold Fu
sion,Node
以node为例
node-esapi is a minimal port of the ESAPI4JS (Enterprise Security API for JavaScript) encoder.
-Installation
$ npm install node-esapi
-Usage
var ESAPI = require('node-esapi');
-Encoder Functions
The encoder() returns an object with the following main functions:
encodeForHTML
encodeForCSS
encodeForJS = encodeForJavaScript = encodeForJavascript
encodeForURL
encodeForHTMLAttribute
encodeForBase64
-Middleware
The ESAPI has a function for creating express middleware to serve client side scripts of ESAPI.
app.use(ESAPI.middleware());
// Now in your HTML you can do
<script src="/esapi/esapi.js"></script>
<script src="/esapi/resources/i18n/ESAPI_Standard_en_US.properties.js"></script>
<script src="/esapi/resources/Base.esapi.properties.js"></script>
<script>
org.owasp.esapi.ESAPI.initialize();
//Here you have access to the $ESAPI object and can do
$der().encodeForHTML('<p>This is a test</p>');
</script>
node防xss还有⼀个可选⽤的插件 –xss
-安装
NPM
$ npm install xss
图片编辑器appBower
$ bower install xss
或者
$ bower install github/leizongmin/js-xss.git
-使⽤⽅法
-在Node.js中使⽤
var xss = require('xss');
var html = xss('<script>alert("xss");</script>');
console.log(html);
-在浏览器端使⽤
Shim模式(参考⽂件 test/test.html):
<script src="raw.github/leizongmin/js-xss/master/dist/xss.js"></script> <script>
/
/ 使⽤函数名 filterXSS,⽤法⼀样
var html = filterXSS('<script>alert("xss");</scr' + 'ipt>');
alert(html);
</script>
AMD模式(参考⽂件 test/test_amd.html):
<script>
baseUrl: './',
paths: {
xss: 'raw.github/leizongmin/js-xss/master/dist/xss.js'
},
shim: {
xss: {exports: 'filterXSS'}
}
});
require(['xss'], function (xss) {
var html = xss('<script>alert("xss");</scr' + 'ipt>');
alert(html);
});
</script>