简答介绍 :HTMLPurifier 是基于 PHP 编写的富文本 HTML 过滤器,通常我们可以使用它来防止 XSS 跨站攻击
开发中遇到的问题,在使用富文本编辑器选择表情包提交后,前台发现表情包展示不出来,发现存在数据库里面的数据不完整
原格式
<p>
<img src="http://forum.cn/static/js/summernote/tam-emoji/img/blank.gif"
class="img" style="display:inline-block;width:25px;height:25px;
background:url("http://forum.cn/static/js/summernote/tam-emoji/img/emoji_spritesheet_0.png") no-repeat -550px 0px;
background-size:675px 175px;" alt=":joy:">
</p>
过滤后
<p>
<img src="http://forum.cn/static/js/summernote/tam-emoji/img/blank.gif"
class="img" style="width:25px;height:25px;" alt=":joy:">
</p>
发现过滤后少了style样式,display,background,background-size
经查找laravel项目 框架代码使用htmlpurifier,过滤了这些样式
解决:
修改config/purifier.php,配置 “CSS.AllowedProperties”:自定义受信任元素
默认
'CSS.AllowedProperties'=>'font,font-size,width,height,font-weight,font-style,font-family,text-decoration,padding-left,color,text-align,background-color';
初步想加上过滤的样式,添加为受信任的
'CSS.AllowedProperties'=>'display,background,background-size,font,font-size,width,height,font-weight,font-style,font-family,text-decoration,padding-left,color,text-align,background-color';
发现display和background-size添加都报错
解决display报错,增加CSS.AllowTricky,解决display报错
'CSS.AllowTricky' => true,
找background-size解决方法,看到插件库默认只支持受信任的安全元素
添加background-size
参考 https://www.cnblogs.com/liuxiaowei/p/7163484.html