比較常見的 XSS 多安插 javascript 程式在 HTML 元素中：
<img src="javascript:alert('XSS')">最近發現有趣的攻擊方式：
<img/src=x oooooo/oooooooooo/onerror="top.location='http://zeroplex.blogspot.com'" >這對程式碼本身並不具危險性，但瀏覽器開啟上面那一段 HTML 時，卻會自動重新導向到 zeroplex.blogspot.com。
主要原因是，瀏覽器都有提供語法自動補齊、修正功能。眼尖的人應該會發現，上面那一段語法，使用 Chrome 的開發者工具 (非檢視原始碼) 開啟時，會被自動修成 (top.location 改掉以便 debug)：
恐怖的是，瀏覽器將最後面的語法修道可以執行，因此 %lt;img src=”x”> 時，瀏覽器無法擷取圖片，造成 error，而觸發了後半部 onError 事件，執行 top.localtion=”http://zeroplex.blogspot.com” 而跳到我的部落格頁面
之前提到用 jQuery 的 clone() 複製一列表格，再用 text() 修改該列的文字內容，但這個方法會經過多次 DOM 處理，效率不高。
經過阿育推薦後，發現 jQuery.tmpl() 樣板引擎還不賴，用起來不難且程式碼看起來會乾淨很多。
先定義表格一列的樣板：
<table id="target-table"> </table>
<script type="text/x-jquery-tmpl" id="row-template">
<tr>
<td>${name}</td>
<td>${comment}</td>
</tr>
</script>在樣板中文字內容的位置使用 ${VARIABLE} 取代，tmpl() 會解析樣板內容並將資料填入。
接著透過 tmpl() 處理新增一列至表格最後方：
var data = {
name: 'zeroplex',
comment: 'some text'
};
$.tmpl( $('#row-template').html(), data)
.insertAfter('#target-table > tbody > tr:last');
tmpl() 會自動將第二個傳入的參數對應到樣板變數，data.name 會被帶入 ${name}、data..comment 被帶入 ${comment}，最後將處理完畢的資料放入原始頁面中。
學 javascript 沒多久，剛開始只是很簡單的置換文字、為元素加上類別，短短幾行沒什麼感覺。到了開始動態新增表格資料時，javascript 程式碼裡面參雜 HTML 就越看越噁心。
function addRow( data ){
$('#user-list > tbody ').append(
'<tr> ' +
'<td>' + id + '</td>' +
'<td>' + username + '</td>' +
'<td>' + email + '</td>' +
'</tr>'
);
}這樣的寫法除了可讀性很低以外，之後若修改表格結構以及 CSS 樣式時，必須同時修改樣板以及 javascript 內容，不容易維護。
今天翻了翻 jQuery docs，發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。
先定義一列當作表格樣板，可以在 CSS 將這一列隱藏：
<table border="1">
<tbody>
<tr id="template" style="display: none;">
<td class="id some-other-class"> </td>
<td class="username"> </td>
<td class="email"> </td>
</tr>
</tbody>
</table>新增一列時，將 template 複製一份出來，再依照 class 名稱將資料填入不同欄位：
function addRow(){
$('tr:last').after( $('#template').clone().removeAttr('id') );
$('tr:last > td.id').text( id );
$('tr:last > td.username').text( username );
$('tr:last > td.email').text( email );
}初學 jQuery 第一個感想就是 selector 非常好用，加上 effects 功能後，可以說是懶人的一大福音。
在 effects 中有看到 slide down / up，區塊會上下滑動，但沒看到左右滑動的，所以自己試著刻一個。
<style>
#box {
width: 200px;
display: inline;
}
</style>
$('#box').animate( {
width: '0px',
display: 'none'
} , 'slow' };不過發現 box 不會消失，用開發人員工具去看 display 屬性沒有被改變。後來看了文件才發現是自己耍蠢。
jQuery 建立動畫特效的方式，是依照 duration 以及物件屬性的數字差，並在固定時間間隔對屬性的數值做遞增、遞減，是「數值」遞增、遞減，display 屬性值並非數字，所以 jQuery 沒辦法處理。
ps. 用了 jQuery 以後就不會寫 Javascript 了 …. Orz
CoolShell.cn 網站上整理了不少網頁開發相關資源，包括：