添加 latpl 应用安全提示注释

pull/1424/head
贤心 2023-11-17 09:57:36 +08:00
parent 99bc35a06c
commit 5895e84785
2 changed files with 24 additions and 18 deletions

View File

@ -2,7 +2,7 @@
title: 模板引擎 laytpl
toc: true
---
# 模板引擎
> `laytpl` 是 Layui 的一款轻量 JavaScript 模板引擎,在字符解析上有着比较出色的表现。
@ -37,14 +37,14 @@ toc: true
```
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
// 直接解析字符
laytpl('{{= d.name }}是一名前端工程师').render({
name: '张三'
}, function(str){
console.log(str); // 张三是一名前端工程师
});
// 同步写法
var str = laytpl('{{= d.name }}是一名前端工程师').render({
name: '张三'
@ -60,9 +60,9 @@ layui.use('laytpl', function(){
<h3>{{= d.name }}</h3>
<p>性别:{{= d.sex ? '男' : '女' }}</p>
</script>
<div id="view"></div>
<!-- import layui -->
<script>
layui.use(function(){
@ -98,6 +98,8 @@ compile.render(data, callback); // 模板渲染
{{- d.include("/laytpl/detail/options.md") }}
</div>
> ### 注意
> 开发者在使用模板语法时,需确保模板中的 JS 语句不来自于页面用户输入,即必须在页面开发者自身的可控范围内,否则请避免使用该模板引擎。
<h2 id="config" lay-toc="{level: 2}">属性配置</h2>
@ -119,7 +121,7 @@ laytpl.config({
open: '<%',
close: '%>'
});
// 模板语法将默认采用上述定义的标签符书写
laytpl(`
<%# var job = ["前端工程师"]; %>
@ -129,7 +131,7 @@ laytpl(`
type: 0
}, function(string){
console.log(string); // 张三是一名前端工程师。
});
});
```
### 局部配置 <sup>2.8+</sup>
@ -142,7 +144,7 @@ laytpl('<%= d.name %>是一名前端工程师', {
close: '%>'
}).render({name: '张三'}, function(string){
console.log(string); // 张三是一名前端工程师。
});
});
```

View File

@ -12,11 +12,11 @@ layui.define(function(exports){
};
// 模板工具
var tool = {
var tool = {
escape: function(html){
var exp = /[<"'>]|&(?=#[a-zA-Z0-9]+)/g;
if(html === undefined || html === null) return '';
html += '';
if(!exp.test(html)) return html;
@ -77,12 +77,12 @@ layui.define(function(exports){
// 模板必须为 string 类型
if(typeof template !== 'string') return template;
// 正则解析
template = template.replace(/\s+|\r|\t|\n/g, ' ')
.replace(inner.exp(options.open +'#'), options.open +'# ')
.replace(inner.exp(options.close +'}'), '} '+ options.close).replace(/\\/g, '\\\\')
// 不匹配指定区域的内容
.replace(inner.exp(options.open + '!(.+?)!' + options.close), function(str){
str = str.replace(inner.exp('^'+ options.open + '!'), '')
@ -92,13 +92,13 @@ layui.define(function(exports){
});
return str
})
// 匹配 JS 语法
.replace(/(?="|')/g, '\\').replace(that.tagExp(), function(str){
str = str.replace(jss, '').replace(jsse, '');
return '";' + str.replace(/\\(.)/g, '$1') + ';view+="';
})
// 匹配普通输出语句
.replace(that.tagExp(1), function(str){
var start = '"+laytpl.escape(';
@ -114,10 +114,14 @@ layui.define(function(exports){
}
return start + str.replace(/\\(.)/g, '$1') + ')+"';
});
template = '"use strict";var view = "' + template + '";return view;';
try {
/**
* 请注意: 开发者在使用模板语法时需确保模板中的 JS 语句不来自于页面用户输入
* 即模板中的 JS 语句必须在页面开发者自身的可控范围内否则请避免使用该模板解析
*/
that.cache = template = new Function('d, laytpl', template);
return template(data, tool);
} catch(e) {
@ -132,7 +136,7 @@ layui.define(function(exports){
var that = this;
var result = that.cache ? that.cache(data, tool) : that.parse(that.template, data);
// 返回渲染结果
typeof callback === 'function' && callback(result);
return result;
@ -152,7 +156,7 @@ layui.define(function(exports){
};
laytpl.v = '2.0.0';
// export
exports('laytpl', laytpl);
});
});