如何在 Pug 模板中将数据安全注入客户端 JavaScript 变量-js教程-PHP中文网

如何在 Pug 模板中将数据安全注入客户端 JavaScript 变量

本文介绍如何将 pug 模板中的数组变量（如 projecttemplate）直接、安全地序列化为客户端可使用的 javascript 对象，避免手动拼接字符串带来的错误与 xss 风险。

本文介绍如何将 pug 模板中的数组变量（如 projecttemplate）直接、安全地序列化为客户端可使用的 javascript 对象，避免手动拼接字符串带来的错误与 xss 风险。

在 Pug（原 Jade）模板中，常需将服务端准备的数据（如图片元信息数组）传递给前端 JavaScript 使用。虽然你可能本能地想到用 each 循环在 <script> 标签内逐条生成对象字面量，但这种写法不仅冗长易错，还极易因未转义内容引入 XSS 漏洞。</script>

✅ 正确且推荐的方式是：利用 Pug 的 !{...} 非转义插值 + JSON.stringify()，一次性安全输出整个结构化数据。

例如，在你的 projectTemplate.pug 中已定义：

-
  var projectTemplate = [
    { full: full250, tiny: tiny250, class: classPhotoset },
    { full: full249, tiny: tiny249, class: classPhotoset },
    { full: full248, tiny: tiny248, class: classPhotoset },
    { full: full247, tiny: tiny247, class: classPhotoset }
  ]

只需在模板任意位置（通常置于

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

或页面底部）添加：

script.
  const availableImgs = !{JSON.stringify(projectTemplate)};

Pug 会自动将 projectTemplate 序列化为标准 JSON 字符串，并以 非转义方式 插入到 <script> 块中，最终渲染结果等效于：</script>

<script>
  const availableImgs = [
    {"full":"/img/250.jpg","tiny":"/thumb/250.jpg","class":"photoset"},
    {"full":"/img/249.jpg","tiny":"/thumb/249.jpg","class":"photoset"},
    // ...
  ];
</script>

⚠️ 注意事项：

必须使用 !{...}（感叹号+大括号），而非 #{...} —— 后者会对 HTML 特殊字符进行转义，导致 JSON 格式损坏；
JSON.stringify() 会自动处理引号、斜杠、Unicode 等转义，确保输出合法 JS 对象字面量；
若 projectTemplate 中含函数、undefined、Symbol 或循环引用，JSON.stringify() 会忽略或报错，建议确保数据为纯 JSON 可序列化对象（即仅含 string、number、boolean、null、array 和 plain object）；
如需兼容旧版浏览器（如 IE8），可引入 json2.js 做 polyfill，但现代项目通常无需考虑。

? 小技巧：为提升可维护性，可将该逻辑封装为 mixin：

mixin injectJsData(varName, data)
  script.
    const #{varName} = !{JSON.stringify(data)};

// 使用时
+injectJsData('availableImgs', projectTemplate)

这种方式简洁、安全、高效，是 Pug 与前端 JS 数据桥接的最佳实践。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南