Nodejs 使用jade模板render返回String类型的参数在script里接收发现是一个function

Nodejs 使用jade模板render返回String类型的参数在script里接收发现是一个function

如题，请问这是什么原因呢？我在jade里- var i = #{XX}，这样就没有问题，但是在jade里的script标签里接收就成了function了～～～

3 回复

Node.js 使用 Jade 模板 render 返回 String 类型的参数在 script 里接收发现是一个 function

在使用 Node.js 和 Jade（现在称为 Pug）模板引擎时，有时会遇到一个常见的问题：在 Jade 模板中渲染的字符串在客户端的 <script> 标签中接收时变成了一个函数。这通常是因为 Jade 在处理字符串时对某些字符进行了转义或特殊处理。

原因

当你在 Jade 模板中渲染字符串并将其传递到 <script> 标签时，Jade 会自动将字符串中的特殊字符进行转义，以防止 XSS 攻击。这种转义过程可能导致字符串看起来像是一个函数，尤其是在字符串中包含一些特殊字符时。

示例代码

假设你有一个简单的 Node.js 应用，并且你希望在 Jade 模板中渲染一个字符串并在 <script> 标签中使用它。

Node.js 服务器端代码

const express = require('express');
const app = express();
const jade = require('pug');

app.get('/', (req, res) => {
    const data = { message: 'Hello, <script>alert("XSS")</script>' };
    res.render('index', data);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Jade 模板文件 index.pug

doctype html
html
  head
    title= title
  body
    h1= message
    script.
      var msg = '#{message}';
      console.log(msg);

解决方案

为了避免字符串被转义成函数，你可以使用 !{} 语法来禁止 Jade 对字符串进行转义。

修改后的 Jade 模板文件 index.pug

doctype html
html
  head
    title= title
  body
    h1= message
    script.
      var msg = !{JSON.stringify(message)};
      console.log(msg);

在这个例子中，我们使用 JSON.stringify 将字符串安全地传递到 JavaScript 中，避免了由于转义导致的问题。

通过这种方式，你可以确保从 Jade 模板渲染的字符串在 <script> 标签中正确地作为字符串接收，而不是被误认为是函数。


还有就是，如果我返回一个对象的话，要如何在jade模板的script标签中接收，如何使用呢？

在Node.js中使用Jade（现在称为Pug）模板引擎时，有时会遇到将渲染后的数据从后端传递到前端JavaScript脚本中的问题。当你尝试直接在<script>标签内部使用Jade变量时，可能会发现这些变量被当作函数而不是字符串处理。

这个问题通常是因为Pug在编译模板时会对<script>标签内的内容进行转义或特殊处理，导致原本的字符串被解析为函数或其他形式的数据结构。

示例

假设你有一个简单的Node.js应用，使用Express框架和Pug作为模板引擎。你的目标是将一个变量传递给前端，并在JavaScript中正确地访问它。

后端代码（Node.js/Express）

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
    const someData = "Hello, World!";
    res.render('index', { someData: someData });
});

app.listen(3000, () => console.log('App listening on port 3000!'));

Pug模板文件 (views/index.pug)

doctype
html
  head
    title= 'Example'
  body
    h1 Jade is Pug now!
    script.
      var data = !{JSON.stringify(someData)};
      console.log(data);

在这个例子中，我们通过使用!{JSON.stringify(someData)}来确保将变量someData正确地以字符串形式插入到<script>标签中。这避免了Pug对内容的自动转义或特殊处理，从而使得JavaScript可以正确地识别并使用该变量。

解释

  • !{JSON.stringify(someData)}：这里的!符号告诉Pug不要转义输出的内容。而JSON.stringify()函数确保了变量someData被转换成一个有效的JavaScript字符串，即使它包含特殊字符。

  • 在JavaScript中，var data = ...定义了一个变量data，它的值是从服务器端传来的someData变量。

通过这种方式，你可以确保在客户端JavaScript中安全且正确地访问由服务器端渲染传递过来的数据。

回到顶部