ueditor和xss的二三事

版权声明:承蒙大佬看得起,本文可以随意转载,只要注明出处。 https://blog.csdn.net/falcom_fans/article/details/74157259

富文本编辑器ueditor的引入

虽然经常吐槽百度,但是这个富文本编辑器还是很好使的,尤其是还有良心的兔斯基绿豆蛙等经典表情

  • 首先引入三个js文件
 <script type="text/javascript" charset="utf-8" src="{:C('PLUGIN_URL')}UEditer/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="{:C('PLUGIN_URL')}UEditer/ueditor.all.min.js"> </script>
  <script type="text/javascript" charset="utf-8" src="{:C('PLUGIN_URL')}UEditer/lang/zh-cn/zh-cn.js"></script>
  • 然后将自己的textarea设置一个id属性
<textarea rows="5" cols="30" id="goods_introduce" name="goods_introduce" style="width:1080px;  height:300px"></textarea>
  • 最后再执行一段js代码
var ue = UE.getEditor('goods_introduce')

其实在上面的getEditor函数里面可以传入第二个参数,一个json格式的参数,可以定制富文本编辑器的功能按钮,这样在编辑器里面只会出现里面的功能按钮

var ue = UE.getEditor('goods_introduce',{toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
        'horizontal'
    ]]});

XSS攻击与htmlpurifier

很奇怪的是XSS全称是Cross Site Scripting,据说为了和CSS区分,由于百度的ueditor自带了一些防范xss攻击的,但是无法阻止在html模式下的js攻击
所以可以借助htmlpurifier来防止类似的攻击,他的原理是,直接删除你不允许的标签(通常是选择不允许出现script标签)
自定义一个函数,引入HTMLPurifier.auto.php文件,然后进行一系列骚操作,比如下面这样的,然后在处理数据的时候调用自己的这个方法的就可以了,比如我这里就调用preventXSS方法

/**
 * @param $string  待处理的字符串
* @return string  处理之后的字符串
*/
function preventXSS($string)
{
    require_once './Application/Common/Plugin/Htmlpurifier/HTMLPurifier.auto.php';
    // 生成配置对象
    $cfg = HTMLPurifier_Config::createDefault();
    // 以下就是配置:
    $cfg->set('Core.Encoding', 'UTF-8');
    // 设置允许使用的HTML标签
    $cfg->set('HTML.Allowed','div,b,strong,i,em,a[href|title],ul,ol,li,br,span[style],img[width|height|alt|src]');
    // 设置允许出现的CSS样式属性
    $cfg->set('CSS.AllowedProperties', 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align');
    // 设置a标签上是否允许使用target="_blank"
    $cfg->set('HTML.TargetBlank', TRUE);
    // 使用配置生成过滤用的对象
    $obj = new HTMLPurifier($cfg);
    // 过滤字符串
    return $obj->purify($string);
}

没有更多推荐了,返回首页