頁面顯示js和HTML標籤內容(防js注入攻擊)

(1)只需要由界面輸出的話,可以用document.write()

(2)通用性更高的一種方法是使用textarea來完成。可以滿足從後臺批量取數據顯示。


比如這是個分頁的表格內有個綁定字段包含html標籤,



如果不做處理,第一條記錄的評論內容顯示爲空,如果內容由客戶端上傳,就可能會被js注入,獲取cookies等信息。

這裏可以用第二種方法完美解決,


“評論內容” 列原來代碼如下:

<td style="word-wrap:break-word;" width="400">${content}</td>

修改爲

<td style="word-wrap:break-word;" width="400">
<textarea rows="1" cols="1" style="border:0;overflow:auto;background-color:#F8F7F5;width:380px" readonly="true">${content}</textarea>
</td>


注意一點,這裏需要修改testarea樣式,去掉邊框和滾動條,才能滿足效果。

如果還是有滾動條。。。把rows改成2 或者textarea的style裏面加上高度height:28px;  自己調整吧。

ok。


附:testarea常用樣式

1.沒有滾動條的文本域(無邊框)

  <textarea   style="border:   0;   overflow:   auto;   color:   #FFFFFF;   background-image:   url(>

2.紅色邊框的文本域

<textarea   style="border:   #FF0000   1px   solid;   overflow:   visible;   color:   #FFFFFF;   background-image:   url(> 

3.無邊框有滾動條

<textarea   style="scrollbar-face-color:#ff80ff;border:0px;background-image:url(http://expert.csdn.net/images/ad/dby3_database_120.GIF);color:#ffffff;font-size:15pt;font-weight:bold">   
  雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>   
  </textarea>  

 4.比較好看的一個

<input name="email" type="text" id="email" style="height:19;border-top: 1px solid #808080;border-right: 1px solid #D4D0C8;border-bottom: 1px solid #D4D0C8;border-left: 1px solid #808080;" value="" size="29">
<br>
<textarea name="content" cols="36" rows="8" id="content" style="border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px;"></textarea>
<textarea   style="border:   #FF0000   1px   solid;   overflow:   visible;   color:   #FFFFFF;   background-image:   url(>

 

其它:

 

  <textarea   style="border:   0;   overflow:   auto;   color:   #FFFFFF;   background-image:   url(>
  1、設置文本域的字體   
    
  <TEXTAREA   STYLE="font-size:9pt;font-family:verdana;color:#333333">輸入內容</textarea>       
    
  2、設置文本域的背景色   
    
  <TEXTAREA   STYLE="background-color:#ffffff">輸入內容</textarea>     
    
  3、文本域的虛線邊框設置   
    
  <TEXTAREA   STYLE="border:1px   dotted   #6CABE7;">輸入內容</textarea>             
    
  4、文本域的實線邊框設置   
    
  <TEXTAREA   STYLE="border:1px   solid   #6CABE7;">輸入內容</textarea>           
    
  5、文本域的點線邊框設置   
    
  <TEXTAREA   STYLE="border:2px   dotted   #6CABE7;">輸入內容</textarea>         
    
  6、   設置文本域的背景圖   
    
  <TEXTAREA   STYLE="background-attachment:   fixed;   background-image:   url(背景圖所處位置)"></textarea> 




發佈了46 篇原創文章 · 獲贊 31 · 訪問量 42萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章