Layui表格怎么处理后端返回的带HTML标签的字符串

老静吖_7666

老静吖_7666

2026-05-18

204人浏览

原创

Wechat HTML Publisher
Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载
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实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

html layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2503

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6430

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5826

10

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2503

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5403

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6430

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6038

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

6175

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 224人学习