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的值了