jade安全转义和非转义

 

- var data = 'text'
- var htmlData = '<script>alert(1)</script><span>script</span>'

例如上面的例子，假如没有对他进行转义的话，他仍然是变量的形式，到页面上就会被执行掉，也就是在页面上看不出任何不一样，在后面进行引用

 

- var data = 'text'
- var htmlData = '<script>alert(1)</script><span>script</span>'
p #{data}
p #{htmlData}
=>
<p>text</p>
<p>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;</p>

可以看出text还是text的纯文本，但是这个htmlData就不一样了，他这里面有尖括号，这个可执行的脚本，html标签，这里默认进行了安全转义，转成了字符，那么我就是希望输出这种不转义的格式，这个时候要怎么弄

把原来取值的#换成叹号，我们称之为非转义

- var data = 'text'
- var htmlData = '<script>alert(1)</script><span>script</span>'
p !{data}
p !{htmlData}
=>
<p>text</p>
<p><script>alert(1)</script><span>script</span></p>

 

 

除了#的取值方式，我们还有一种

- var data = 'text'
- var htmlData = '<script>alert(1)</script><span>script</span>'
p＝ data
p＝ htmlData
p!= data
p!= htmlData
=>
<p>text</p>
<p>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;</p>
<p>text</p>
<p><script>alert(1)</script><span>script</span></p>

作用跟＃取值是等同的,也可以加！的方式来非转义

了解完这个之后，在有些情况下，我就是希望输出的是#和这个{}，那怎么办呢，因为#挨着{}，在jade里面会视为变量，会被编译掉的,这样弄

p #{htmlData}
p !{htmlData}
=>
<p>#{htmlData}</p>
<p>!{htmlData}</p>

最会一个场景，什么场景呢，有时候我们的变量未定义，

input(value='#{newData}')
=>
<input value="undefined">

这样，会输出undefined,我们可以这么弄，不用＃取值，用=取值

input(value=newData)
=>
<input>

这样就没有了undefined的值了