兼容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. 剑指Offer 6. 旋转数组的最小数字 （数组）

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  2. 关于IT行业加班的问题

    众所周知,所有行业中,IT行业加班最为严重,国内比较大的IT公司都有加班文化. 为什么要加班?有的时候加班是为了项目上线,因为正在运行的项目,在晚上的时候访问量是最小的,这个时候做系统更新是损失最小的 ...

  3. Java六大必须理解的问题

    Java六大必须理解的问题 对于这个系列里的问题,每个学Java的人都应该搞懂.当然,如果只是学Java玩玩就无所谓了.如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列.内容 ...

  4. Spring Data JPA 常用注解 @Query、@NamedQuery

    1.@Transient @Transient表示该属性并非一个到数据库表的字段的映射,ORM框架将忽略该属性:如果一个属性并非数据库表的字段映射,就务必将其标示为@Transient,否则ORM框架 ...

  5. 两个1/x类的广义函数

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/04/15 1.$\text{p.v.}\,\frac{1}{x}$ 因为$(x \ln x - x)' = ...

  6. Github最简单实用的Git命令指南

    create a new repository on the command line   echo "# test" >> README.md git init gi ...

  7. 帝国cms自动保存图片

    <?=ECMS_ShowEditorVar("newstext",$ecmsfirstpost==1?"":stripSlashes($r[newstex ...

  8. Python全栈之路----函数进阶----迭代器

    我们已经知道,可以直接作用于 for 循环的数据类型有以下几种: 一类是集合数据类型,如 list , tuple , dict , set ,str 等: 一类是 generator ,包括生成器和 ...

  9. Spring Boot Shiro 权限管理 【转】

    http://blog.csdn.net/catoop/article/details/50520958 主要用于备忘 本来是打算接着写关于数据库方面,集成MyBatis的,刚好赶上朋友问到Shiro ...

  10. 使外部主机可访问Django服务

    欲让外部主机可访问Django的服务器,需使用如下命令开启服务 python manage.py runserver 0.0.0.0:8000