兼容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. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  2. 数组排序自定义comparator()

    案例1:现在有一个普通数组arr = [3,1,2,4,5,6,8,0,1]; 自定义一个排序方法: function createComparator(){ return function (obj ...

  3. .NET平台

    .nat 是一种跨语言的平台 类跟对象回顾 由于对象归纳类 是归纳对象共性的过程 在类似的基础上  将状态和行为实体话为对象的过程称为实例话 只写属性   只包含set访问器 只读属性  只包含get ...

  4. PythonStudy——函数默认值

    # 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值 a = 100 def fn(num=a): a = 200 fn() 输出: 100 也就是说在函数调用的时 ...

  5. Unix中共享信息方式

  6. Java高级特性 第4节 输入输出流

    一.使用I/O操作文件 关键步骤: 使用File类操作文件或目录属性 使用FileInputStream类读文本文件 使用FileOutputStram类写文本文件 使用BufferedReader类 ...

  7. mysql查询中AND与OR注意事项

    在查询的where条件中,and要优于or 如果要改变优先级, 需要在最小逻辑判断的条件外加括号(),例如: select * from `table_name` where (`type` = 1 ...

  8. 减小delphi体积的方法

    1.关闭RTTI反射机制  自从Delphi2010中引入了新的RTTI反射机制后,编译出来的程序会变得很大,这是因为默认情况下 Delphi2010 给所有类都加上了反射机制.而我们的工程并不每每都 ...

  9. 二叉树遍历(flist)（已知中序和按层遍历，求先序 ）

    问题 F: 二叉树遍历(flist) 时间限制: 1 Sec  内存限制: 128 MB提交: 11  解决: 9[提交][状态][讨论版][命题人:quanxing][Edit] [TestData ...

  10. Scrapy学习篇（九）之文件与图片下载

    Media Pipeline Scrapy为下载item中包含的文件(比如在爬取到产品时,同时也想保存对应的图片)提供了一个可重用的 item pipelines . 这些pipeline有些共同的方 ...