使用jQuery+huandlebars防止编码注入攻击

最新推荐文章于 2024-04-21 16:59:09 发布

weixin_30838873

最新推荐文章于 2024-04-21 16:59:09 发布

阅读量42

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/lengyue0030/p/7423815.html

版权

兼容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解析，实际上就是做了类似这样的操作：把<用<替代。

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

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

转载于:https://www.cnblogs.com/lengyue0030/p/7423815.html

weixin_30838873

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery+huandlebars防止编码注入攻击

兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）<!DOCTYPE html><html> <head> <META http-equiv=Content-Type conte...
复制链接

扫一扫