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

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

本文介绍如何在 Pug 模板中将服务端定义的数组（如 projectTemplate）直接、安全地序列化为客户端可使用的 JavaScript 变量，避免手动拼接字符串带来的错误与 XSS 风险。

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

在 Pug 中，模板逻辑与客户端脚本需明确分离：each 迭代仅适用于 HTML 输出上下文，不能直接用于 script. 块内进行 JavaScript 代码生成——因为 script. 是纯文本块，Pug 不会对其内部执行模板语法解析（如 each、插值等）。试图在 script. 中写 each photo in projectTemplate 将导致语法错误或静默失败。

✅ 正确且推荐的做法是：利用 Pug 的 !{...} 非转义插值 + JSON.stringify()，将服务端数据一次性安全注入 JS 变量：

-
  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 }
  ]

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

该写法会生成如下标准、可执行的客户端 JavaScript：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

availableImgs = [
  {"full":"path/to/full250.jpg","tiny":"path/to/tiny250.jpg","class":"photoset"},
  {"full":"path/to/full249.jpg","tiny":"path/to/tiny249.jpg","class":"photoset"},
  // … 其余项
];

⚠️ 注意事项：

必须使用 !{...}（非转义插值），而非 #{...}（转义插值），否则 JSON 字符串会被 HTML 实体编码（如 " → "），导致 JS 解析失败；
JSON.stringify() 自动处理嵌套结构、特殊字符及 Unicode，确保输出合法 JS 对象字面量；
确保 projectTemplate 中所有值均为可序列化类型（如字符串、数字、布尔、数组、普通对象），避免 undefined、Function 或 Date 等不可序列化值（否则对应字段会变为 null）；
若数据来自用户输入，请务必在服务端完成清洗与校验，!{} 不提供额外 XSS 防护——它只是绕过 HTML 转义，不替代数据安全治理。

? 扩展提示：若需动态构造更复杂的客户端逻辑（如带方法的类实例），建议仍以纯数据注入为主，后续在独立 .js 文件中通过 availableImgs 初始化行为，保持关注点分离与可维护性。