/*十有三博客*/
  • 首页
  • 关于本站
  • 网站地图
  • RSS订阅

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

2015-01-06 十有三 0 浏览:9847 Web前端 插件工具

前段时间需要使用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标签(提交内容后超链接都被自动删除了):

过滤后的效果图


作者:十有三

出处:https://shiyousan.com/post/635561051720927596

版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。


  • 上一篇: Visual Studio Community 2013无法折叠代码块
  • 下一篇: 解决ASP.NET“从客户端***中检测到有潜在危险的 Request.Form值。”错误

相关文章
  • limarquee轮番插件图片略微抖动的问题
  • 使用JavaScript ceil()函数计算分页页码总数
  • 百度站内搜索如何设置和使用自定义样式设计(即不使用模板,使用自定义的模板)
  • 解决和分析CSS中z-index属性无效的问题
  • javascript 实现函数/方法重载效果
  • 百度的闭站保护在哪个菜单下

文章分类

.NET技术 123 数据库 24 Web前端 21 网站建设运维 37 操作系统与应用 66 程序猿日常 11 开发工具 12 其他随笔 13

文章标签

ASP.NET ASP.NET MVC C# CSS HTML IIS Javascript Linux MongoDB MySql SQL SQL Server Visual Studio Windows系统 版本控制系统 插件工具 服务器 搞笑娱乐 好文分享 软件应用 生活知识 手机问题 随笔 网络知识 网站设计优化 网站维护 养生保健 异常处理 硬件设备 游戏攻略

热门文章

  • IIS8如何安装和使用URL重写工具-URL Rewrite
  • 林蛋大与楚中天,朱肚皮与朱月坡
  • 解决IE11安装升级失败和在安装前需要更新的问题
  • Windows Server 2012无法安装 .NET3.5-安装角色或功能失败,找不到源文件
  • VS重构重命名的快捷键

推荐文章

  • ASP.NET MVC实现IExceptionFilter接口编写自定义异常处理过滤器
  • (译)在 ASP.NET中使用 XML-RPC 进行ping
  • ASP.NET 在.aspx页面中使用<script runat="server"></script>标记
  • ASP.NET MVC AJAX.BeginForm异步提交和刷新无效
  • 记录下博客静态化的历程和经验

友情链接

  • Passingwind的博客
  • 码友网

知识共享许可协议 CC BY-SA 4.0本站作品采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。
闽ICP备15003702号
闽公网安备 35020302035102号