兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>关于HTML编码 - by 杨元</title>

  </head>

  <body>

    <h1>关于HTML编码</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>姓名</th>

          <th>性别</th>

          <th>年龄</th>

          <th>个人主页</th>

        </tr>

      </thead>

      <tbody id="tableList">

      </tbody>

    </table>

    <!--插件引用-->

    <script type="text/javascript" src="script/jquery.js"></script>

    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <script id="table-template" type="text/x-handlebars-template">

      {{#each student}}

        <tr>

          <td>{{name}}</td>

          <td>{{sex}}</td>

          <td>{{age}}</td>

          {{#compare age 20}}

            <td>{{homePage}}</td>

          {{else}}

            <td>{{{homePage}}}</td>

          {{/compare}}

        </tr>

      {{/each}}

    </script>

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = {

                    "student": [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 18,

                            "homePage":"<a href='javascript:void(0);'>张三的个人主页</a>"

                        },

                        {

                            "name": "李四",

                            "sex": "0",

                            "age": 22,

                            "homePage":"<a href='javascript:void(0);'>李四的个人主页</a>"

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 19,

                            "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"

                        }

                    ]

                };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //注册一个比较数字大小的Helper,有options参数，块级Helper

        Handlebars.registerHelper("compare",function(v1,v2,options){

          //判断v1是否比v2大

          if(v1>v2){

            //继续执行

            return options.fn(this);

          }else{

            //执行else部分

            return options.inverse(this);

          }

        });

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

通过{{}}取出来的内容，都会经过编码，也就是说，如果取出的内容中包含html标签，会被转码成纯文本，不会被当成html解析，实际上就是做了类似这样的操作：把<用&lt;替代。

这样做是很好的，既可以显示html代码，又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。

但是有时候我们可能需要解析html，不要转码，很简单，把{{}}换成{{{}}}就可以啦。

使用jQuery+huandlebars防止编码注入攻击的更多相关文章

  1. HTML5 App的代码注入攻击

    原文链接 摘要 基于HTML5的手机app(译者注:以下简称HTML5 app)越来越流行了, 在大多数情况下它比native应用更容易适配不同的移动操作系统.它开发起来很方便,可以使用标准的web技 ...

  2. 实例讲解 SQL 注入攻击

    这是一篇讲解SQL注入的实例文章,一步一步跟着作者脚步探索如何注入成功,展现了一次完整的渗透流程,值得一读.翻译水平有限,见谅! 一位客户让我们针对只有他们企业员工和顾客能使用的企业内网进行渗透测试. ...

  3. PHP函数 addslashes() 和 mysql_real_escape_string() 的区别 && SQL宽字节，绕过单引号注入攻击

    首先:不要使用 mysql_escape_string(),它已被弃用,请使用 mysql_real_escape_string() 代替它. mysql_real_escape_string() 和 ...

  4. PHP邮件注入攻击技术

    1. 简介 如 今,互联网的使用急剧上升,但绝大多数互联网用户没有安全知识背景.大多数的人都会使用互联网通过邮件Email的方式和他人进行通信.出于这个原因,大 多数网站允许他们的用户联系他们,向网站 ...

  5. SQL注入攻击

    SQL注入攻击是黑客对数据库进行攻击的常用手段之一.随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候, ...

  6. ADO.NET笔记——SQL注入攻击

    相关知识: 可以通过字符串的拼接来构造一个SQL命令字符串,但是SQL命令字符串的拼接确是造成“SQL注入攻击”的重要原因. 考虑下列例子:从ProductCategory表中检索出Name为“Bik ...

  7. SQL注入攻击的种类和防范手段

    观察近来的一些安全事件及其后果,安全专家们已经得到一个结论,这些威胁主要是通过SQL注入造成的.虽然前面有许多文章讨论了SQL注入,但今天所讨论的内容也许可帮助你检查自己的服务器,并采取相应防范措施. ...

  8. Yii防注入攻击笔记

    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查,可以使用正则表达式或者直接输入字符判断,大部分是只允许输入字母和数字的,其它字符度不允许:对于内容复杂表单的内容,应该对html和script ...

  9. mysql注入攻击及防范

    一.注入攻击种类     1. GET注入         输入参数通过URL发送.     2. POST注入         输入参数通过HTTP正文发送     3. COOKIE注入      ...

随机推荐

  1. 用CSS3制作尖角标签按钮样式

    如图的效果.标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈. 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的 ...

  2. 《从Lucene到Elasticsearch：全文检索实战》学习笔记五

    今天我给大家讲讲tf-idf权重计算 tf-idf权重计算: tf-idf(中文词频-逆文档概率)是表示计算词项对于一个文档集或语料库中的一份文件的重要程度.词项的重要性随着它在文档中出现的次数成正比 ...

  3. webpack的知识内容

    webpack的构建工具: 浏览器的兼容性? 转换ES6语法: 转化JSX: css

  4. cordova文件传输系统插件使用：cordova-plugin-file-transfer

    1. 添加插件:cordova plugin add cordova-plugin-file-transfer 2. 调用方法: var fileTransfer = new FileTransfer ...

  5. String 与 StringBuffer的差别

    原文:http://blog.csdn.net/yirentianran/article/details/2871417 在Java中有3个类来负责字符的操作. 1.Character 是进行单个字符 ...

  6. Javascript var 和 let 的区别

    Javascript var 和 let 的区别 var 是函数块的全局变量. let 是代码块的局部变量. let 变量不会提升,如果先使用后定义会 undefind. 参考: https://de ...

  7. C# 调用打印机 打印 Excel

    打印 Excel 模板 大体思路,通过NPOI操作Excel文件,通过Spire将Excel转成图片,将图片传给系统打印. Spire是收费工具,在微软库中下载Free版本. #region 打印所用 ...

  8. 如何从 VSS 迁移到Team Foundation Server

    TFS 2012自带了vss upgrade wizard工具, 在Team Foundation Server管理控制台左侧的最后一个菜单其他工具和组件中,选择Visual SourceSafe升级 ...

  9. jdk8 Metaspace 调优

    简介 jdk8的元空间的初始大小是21M,如果启动后GC过于频繁,请将该值设置得大一些. 更多Meatspace内容见<Metaspace 之一:Metaspace整体介绍(永久代被替换原因.元 ...

  10. iframe-父子-兄弟页面相互传值(jq和js两种方法)

    参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archi ...