zoukankan      html  css  js  c++  java
  • 使用jQuery+huandlebars防止编码注入攻击

    兼容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,不要转码,很简单,把{{}}换成{{{}}}就可以啦。

  • 相关阅读:
    sort和uniq去重操作【转】
    MySQL中interactive_timeout和wait_timeout的区别【转】
    Keepalived详解(五):Keepalived集群中MASTER和BACKUP角色选举策略【转】
    Keepalived详解(四):通过vrrp_script实现对集群资源的监控【转】
    Keepalived详解(三):Keepalived基础功能应用实例【转】
    Spring详解(六)------AspectJ 实现AOP
    深入理解计算机系统(1.3)------操作系统的抽象概念
    深入理解计算机系统(1.2)------存储设备
    深入理解计算机系统(1.1)------Hello World 是如何运行的
    深入理解计算机系统(序章)------谈程序员为什么要懂底层计算机结构
  • 原文地址:https://www.cnblogs.com/lengyue0030/p/7423815.html
Copyright © 2011-2022 走看看