Question

我用快速框架创建了一个应用程序，它以玉石作为模板引擎。在玩玉时，我已经设置了我认为简单的测试：

在Node中我将一个对象传递给渲染res.render('index', { title: 'Express', docs:"is jade cool?"});上的jade模板，而在模板中我试图像这样调用这些值：

  h1= title
  p Hi!
  p Welcome to #{title}
  p #{docs}
   - console.log(docs)

  script(type='text/javascript').

   console.log(docs);

我发现我无法控制日志记录全局对象值，如果我尝试#{docs}，它会尝试将其解析为文字命令而不是它开始的字符串。我还发现我无法将其分配给JS var，如下所示：var test = #{docs};。

有人可以解释一下：

#{docs}，!{docs}和docs之间有什么区别？（奇怪的是，文档中使用了所有三个示例，但没有真正解释过。）
控制日志从Node传递给jade的全局对象属性的正确方法是什么，以及将这些相同的属性分配给本地JS变量的正确方法是什么？

Answer 1

＃{docs}，！{docs}和docs之间有什么区别（奇怪的是，文档中使用了所有三个示例，但没有真正解释过它们）

//This will output literal HTML <p>docs</p>
p docs

示例命令行：

echo "p docs" | jade
<p>docs</p>

//This will interpolate the variable docs into a string
//and also escape any HTML it may contain: <p>is jade cool?</p>
//To see what I mean, try passing docs: "jade is <b>cool</b>" (contains HTML)
//you'll get <p>jade is &lt;b&gt;cool&lt;/b&gt;</p>
p #{docs}

//This syntax is another flavor of the above
p= docs

示例命令行：

echo 'p #{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

echo 'p= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

//This will do the same but NOT escape HTML
//The exclamation point is supposed to convey warning
//because this can be a XSS vulnerability
p !{docs}

示例命令行：

echo 'p !{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

echo 'p!= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

控制记录从节点传递给jade的全局对象属性的正确方法是什么，以及将这些相同属性分配给本地js变量的正确方法

想要这样做是很常见的，天真/不安全的答案是这样的：

script(type="text/javascript")!= "var myData = " + JSON.stringify(myData)

我可以通过

进行测试

jade --obj '{myData: {foo: "FOO"}}' < t1.jade

并获取

<script type="text/javascript">var myData = {"foo":"FOO"}</script>

但是，在HTML文档中安全地嵌入JSON数据的规则很棘手（details here），所以我强烈建议使用sharify这样的辅助模块来确保数据传入安全的HTML。

jade中的变量，全局对象和console.log

1 个答案: