17-关于layui模板引擎使用中出现的xss问题解决方案

澪Lwh

已于 2024-10-29 17:48:29 修改

阅读量369

点赞数 2

文章标签： layui xss 前端

于 2024-10-29 17:43:10 首次发布

本文链接：https://blog.csdn.net/weixin_46675693/article/details/143335445

版权

前提条件：项目检测报告中提及项目页面展示存在有xss风险，需要处理，查看检测报告的测试位置，发现是在获取表格数据中，使用了laytpl模板引擎解析展示引起的，所以需要出方案解决

过程：

由于我之前了解了一些关于xss防护库的使用，我以为可以用同样的方式去解决这个问题，但是，由于项目上在很多位置都使用了laytpl，若是我采用这种方式，那将是个很大修改工程，所以这个方案不可行

然后我去翻查了layui的文档说明（模板引擎文档-Layui），发现，laytpl其实是有自己的方式去预防xss的，那就是使用{{= d.field }}的模板语法，但这依然是需要修改多处，因为项目上使用的都是普通输出语法{{ d.field }}

但是，我又在文档中发现，原始输出的语法在2.6.11开始就会默认转义，结果原项目使用的版本是2.6.8，所以，升级版本不失为一种方案，这样既不需要大批量改动，也能解决现有问题

2.7.6版本的layui.js直接在上述链接首页下载即可，最新版2.9.18的layui.js也可以用（可以直接在上诉链接中切换）

测试

<!DOCTYPE html>
<html>

<head>
    <title>laytpl测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="../js/layui/layui2.6.8/layui.js"></script> -->
    <script src="../js/layui/layui-v2.7.6/layui/layui.js"></script>
    <!-- <script src="../js/layui/layui-v2.9.18/layui/layui.js"></script> -->
</head>

<body>
    <div id="view"></div>
    <script>
        layui.use('laytpl', function () {
            var laytpl = layui.laytpl;
            var data = { //数据
                "title": "Layui常用模块"
                , "list": [{ "modname": "弹层", "alias": "layer", "site": "<img src='1' onerror=alert(1)></img>" }, { "modname": "表单", "alias": "form" }]
            }
            var getTpl = demo.innerHTML
                , view = document.getElementById('view');
            laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });
        })
    </script>
    <script id="demo" type="text/html">
        <h3>{{ d.title }}</h3>
        <ul>
        {{#  layui.each(d.list, function(index, item){ }}
          <li>
            <span>{{ item.modname }}</span>
            <span>{{ item.alias }}：</span>
            <span>{{ item.site || '' }}</span>
          </li>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
          无数据
        {{#  } }} 
        </ul>
      </script>
    <script>

    </script>
</body>

</html>