KindEditor禁止用户输入a标签链接以及只允许指定HTML标签输入的方法和技巧

前段时间需要使用KindEditor这个在线HTML编辑器实现一个特殊的功能，在KindEditor中必须过滤掉html的a标签，禁止用户在文本框中输入a标签。本文记录了两种方法来实现这种禁用和过滤特定HTML标签的功能和技巧。

PS：此方法只在特殊环境特殊需求下才能使用，项目中要注意XSS攻击，要在服务端做好防御。

方法一：使用KindEditor自带的HTML过滤功能

这里可以查看官网的相关说明：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标签

使用正则过滤需要特定的正则表达式，这里只提供过滤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" />&lt;a href="<a href="https://shiyousan.com/">https://shiyousan.com</a>"&gt;十有三&lt;/a&gt;*/

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\" />&lt;a href=\"<a href=\"https://shiyousan.com/\">https://shiyousan.com</a>\"&gt;十有三&lt;/a&gt;";

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" />&lt;a href="https://shiyousan.com"&gt;十有三&lt;/a&gt;*/

最终结果：

上面的两种方法最终结果都是一样的，这里有两张图可以对比下效果。

尚未过滤a标签（提交内容后显示的文本会出现超链接）：

已经过滤a标签（提交内容后超链接都被自动删除了）：

---

---

---