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

Question

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

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

  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数据的规则很棘手(详情请参见此处),因此我强烈建议使用诸如sharify之类的帮助程序模块,以确保数据在HTML中安全传递.