layui table 默认 escape 开启导致 HTML 被转义,需在列配置中设 escape: false(仅可信字段),templet 中用 {{= d.field }} 输出;后端须白名单过滤,避免 XSS。
layui table 渲染时自动转义 HTML 怎么关
默认开启 escape,后端返回的 <b>加粗</b> 会原样显示成文字,不是加粗效果。这不是 bug,是安全机制,但业务需要渲染富文本时就得关掉。
关键在列配置项:escape: false。只对特定列关,别全局关——否则 XSS 风险直接拉满。
- 必须写在
cols数组对应列对象里,比如{field: 'content', title: '内容', escape: false} -
escape是布尔值,别写成字符串"false",否则无效 - 如果用了
templet自定义模板,escape会被忽略,模板里输出变量时得手动用{{= d.content }}(等号表示不转义),而不是{{ d.content }}
后端返回带标签的字符串,前端怎么防 XSS
关了 escape 就等于把过滤责任甩给后端和业务逻辑。不能图省事全放开。
- 只对明确可信的字段关
escape,比如后台编辑器生成的article_body,别对用户昵称、评论摘要这类字段关 - 后端返回前应做白名单过滤(如只保留
<b></b>、<i></i>、<p></p>、<br>),别依赖前端“不转义”来展示 - 若字段可能混入脚本(如
<script>alert(1)</script>),即使escape: false,浏览器也会执行——这已不是 layui 的问题,是数据源头失控
templet 里用 {{= }} 输出 HTML 为什么没生效
常见错法:在模板字符串里写 {{ d.content }} 还以为关了 escape 就能渲染,结果还是被转义。Layui 模板语法里,{{ }} 默认就转义,{{= }} 才不转义。
- 正确写法:
templet: '<div>{{= d.content }}</div>' - 如果
d.content是null或undefined,{{= d.content }}会输出空字符串,不会报错,但可能留白,建议加空值判断:{{= d.content || '' }} - 别在
templet里拼接复杂逻辑,Layui 不支持表达式,只认简单变量访问和三元{{= d.status === 1 ? '启用' : '禁用' }}
服务端返回 被双重编码怎么办
后端 JSON 序列化时,有些框架(如旧版 Java Fastjson、某些 PHP 配置)会把 自动变成 <code><,前端再关 escape,结果页面显示的是 <b>文本</b>,而非加粗。
- 先确认原始响应体:用浏览器「Network → Response」看接口返回的是否已是
<—— 如果是,问题在后端,不是前端能修的 - Node.js/Express 常见原因:用了
res.json()但中间件二次 encode,或模板引擎提前转义;PHP 常见于htmlspecialchars()被误调用 - 临时绕过(不推荐长期用):前端用
decodeURIComponent(escape(d.content))解一层,但仅适用于纯 HTML 实体,且无法处理嵌套编码
最麻烦的其实是边界模糊的场景:比如一个字段既可能含用户输入的短文本,又可能含管理员发布的富文本。这时候没法一刀切开 escape,得拆成两个字段,或者前端用 DOMPurify 之类库做运行时过滤——但那就超出 layui 自身能力了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!









