前段时间需要使用KindEditor这个在线HTML编辑器实现一个特殊的功能,在KindEditor中必须过滤掉html的a标签,禁止用户在文本框中输入a标签。本文记录了两种方法来实现这种禁用和过滤特定HTML标签的功能和技巧。
PS:此方法只在特殊环境特殊需求下才能使用,项目中要注意XSS攻击,要在服务端做好防御。
这里可以查看官网的相关说明:http://kindeditor.net/docs/option.html#htmltags
我们主要是使用htmlTags参数来过滤掉HTML标签,这个过滤功能其实就是设置白名单,规定哪些HTML标签能被添加到文本中。
htmlTags参数说明:指定要保留的HTML标记和属性。Object的key为HTML标签名,value为HTML属性数组,”.”开始的属性表示style属性。
默认值:
{
font : ['color', 'size', 'face', '.background-color'],
span : [
'.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
],
div : [
'align', '.border', '.margin', '.padding', '.text-align', '.color',
'.background-color', '.font-size', '.font-family', '.font-weight', '.background',
'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
],
table: [
'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
'.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
'.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
'.width', '.height', '.border-collapse'
],
'td,th': [
'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
'.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
'.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
],
a : ['href', 'target', 'name'],
embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
],
pre : ['class'],
hr : ['class', '.page-break-after'],
'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
}
默认值是在配置文件中设置的,默认所有的HTML标签都是可以添加到文本中的,另外我们最好不要修改配置文件中的默认值参数,要在KindEditor初始化调用的时候设置。
假设我要过滤的是a标签,那么在htmlTags参数中就不要设置a标签名,由于我需要用户可以添加图片,所以我的配置如下:
<script>
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: ['emoticons', 'image', 'source']
, htmlTags: {
img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align']
}
});
});
</script>
可以看到我只设置了img标签作为白名单,也就是我只允许img标签添加到文本中,所以其他HTML标签包括a标签在提交的时候都是会被编辑器自动过滤的。
需要注意的是filterMode参数必须为true才能使htmlTags生效,虽然filterMode的默认值就是true,但是难免还是要注意下。
另外htmlTags参数还可以指定要过滤哪些HTML标签的属性,具体请查看官方的文档说明。
使用正则过滤需要特定的正则表达式,这里只提供过滤a标签的正则,其他标签的要另外编写。由于项目是ASP.NET MVC,用的是C#语言,代码如下:
/*还未过滤a标签的字符串,strText:<img alt="" src="http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/44.gif" border="0" /><img alt="" src="http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/42.gif" border="0" /><a href="<a href="https://shiyousan.com/">https://shiyousan.com</a>">十有三</a>*/
string strText="<img alt=\"\" src=\"http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/44.gif\" border=\"0\" /><img alt=\"\" src=\"http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/42.gif\" border=\"0\" /><a href=\"<a href=\"https://shiyousan.com/\">https://shiyousan.com</a>\">十有三</a>";
Regex reg = new Regex(@"<a\s+(?:(?!</a>).)*?>|</a>", RegexOptions.IgnoreCase);
string strNewText = reg.Replace(strText, "");
/*已经过滤a标签的字符串,strNewText:<img alt="" src="http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/44.gif" border="0" /><img alt="" src="http://localhost:59975/Scripts/kindeditor/plugins/emoticons/images/42.gif" border="0" /><a href="https://shiyousan.com">十有三</a>*/
上面的两种方法最终结果都是一样的,这里有两张图可以对比下效果。
尚未过滤a标签(提交内容后显示的文本会出现超链接):
已经过滤a标签(提交内容后超链接都被自动删除了):
作者:十有三
出处:https://shiyousan.com/post/635561051720927596
版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。