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的值了
原文地址:https://www.cnblogs.com/wzndkj/p/9266323.html