layui table怎么处理富文本HTML标签的转义渲染

雨晨大大_5253

雨晨大大_5253

2026-10-12

109人浏览

原创

layui表格默认对字段值html转义,富文本需用{{{d.content}}}跳过转义且必须配合声明模板;escape: false可替代但仅适用于可信数据源,xss防护须由后端净化或前端dompurify白名单过滤。

layui table怎么处理富文本html标签的转义渲染

layui table 默认会对所有字段值做 HTML 转义,所以富文本内容(如 <strong>审核通过</strong>)会原样显示为字符串,而不是渲染成加粗文字。这不是 bug,是安全机制;绕过它必须显式控制转义行为,且不能牺牲 XSS 防护。

templet 里用三重大括号 {{{d.content}}} 才能跳过转义

Layui 的模板语法中,{{=d.content}} 会触发 layui.util.escape(),把 变成 <code><;只有 {{{d.content}}}(三个左花括号)才会原样输出,不转义。

  • 必须配合 <script type="text/html"></script> 声明模板,写在 <div> 或直接内联字符串里都无效 <li> <code>templet: '#myTpl' 中的 #myTpl 必须指向一个已静态存在于 DOM 中的 <script></script> 元素,JS 动态插入的会被忽略
  • 如果后端返回的是未过滤的富文本(含 <img src="xss">),光靠 {{{}} 就等于开后门——务必先净化
  • 服务端或前端必须先用 DOMPurify.sanitize() 过滤内容

    直接把用户输入的富文本塞进 {{{d.content}}} 是高危操作。Layui 不负责内容安全,只负责模板执行。

    Article To Html
    Article To Html

    文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

    下载
    • 推荐在前端用 DOMPurify.sanitize(d.content, {ALLOWED_TAGS: ['strong', 'em', 'span', 'br']}) 白名单过滤
    • 更稳妥的做法是在后端(如 .NET 或 Node.js)就完成净化,再传给前端,避免客户端篡改绕过
    • 别用正则手动删标签(如 .replace(/]+>/g, '')),容易漏掉注释、CDATA、属性里的 JS 等攻击向量

    列配置加 escape: false 是替代方案,但仅适用于简单 HTML

    如果你不用 templet,而是想让某字段直接渲染 HTML,可在列定义里设 escape: false:

    cols: [[
      {field: 'content', title: '详情', escape: false}
    ]]

    但这只对纯字段值生效,不支持逻辑判断或结构拼接;而且依然没解决 XSS,所以只适合内部可信数据源(如 CMS 后台自己生成的 label 列表)。

    • escape: false 是列级配置,不是表格级,别错放到 table.render() 的顶层参数里
    • 若字段本身是空值或 null,escape: false 仍会输出空字符串,不会报错,但可能影响样式对齐
    • 和 templet 互斥:一旦用了 templet,escape 配置就失效,控制权完全交给模板写法

    真正难的不是怎么让 HTML 显示出来,而是判断哪些标签该留、哪些必须砍、谁来负责净化——后端传来的 d.content 如果已经混入了 onerror 或 javascript:,{{{}}} 就是放大器,不是渲染器。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

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

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

下载

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

相关专题

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

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

2023.08.11

2403

5

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

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

2023.10.09

5203

6

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

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

2024.03.19

6250

13

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

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

2024.03.22

5818

10

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

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

2024.05.22

823

5

html版权符号
html版权符号

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

2023.06.14

5935

7

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

2023.06.21

3352

4

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.31

3010

5

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.01

3039

5

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习