Variables, global objects, and console.log in jade

Question

I've created an app with the express framework, which comes with jade as its templating engine. While playing around with jade, I've set up what I feel to be a simple test:

In Node I am passing an object to the jade template on render res.render('index', { title: 'Express', docs:"is jade cool?"});, and in the template I'm trying to call the values like so:

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

  script(type='text/javascript').

   console.log(docs);

What I've found is that I can't console log the global object values, and if I try #{docs}, it tries to parse it as a literal command rather than the string it started as. I also found that I cannot assign it to a JS var, like this: var test = #{docs};.

Can someone explain:

• What is the difference between #{docs}, !{docs} and docs? (Oddly enough all three examples are used in the documentation, but none of them are really explained.)
• What is the correct way to console log the global object properties passed to jade from Node and the correct way to assign those same properties to local JS variables?

Answer 1

what is the difference between #{docs}, !{docs} and docs (oddly enough all three examples are used in the documentation, but none of them are really explained)

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

Example command line:

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

Example command line:

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}

Example command line:

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>

---

what is the correct way to console log the global object properties passed to jade from node and the correct way to assign those same properties to local js variables

It is very common to want to do this, and the naive/insecure answer is something like this:

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

Which I can test via

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

and get

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

However, the rules for securely embedding JSON data within an HTML document are tricky (details here), so I highly recommend using a helper module such as sharify which will make sure the data is passed in the HTML securely.