[jQuery][PHP] 利用 fancybox 或AJAX 傳送表單前加密，到PHP後進行驗證
<?############################## test.php #######################################
session_start();
/*
* 說明：
*
* 一般都是利用<form>傳送整頁後再進行php check的動作，
* 但有時候需要做比較花俏的特效來增加網頁效果阿，
* 像是配合jquery 的外掛 fancybox 來 ajax 送表單~
*
* 例：使用者點送出表單 -> 彈出驗證的結果
*
* 這種透過AJAX的方法，就可以做到不用換整頁囉。當然程式碼也就變更麻煩而且更多了
*
* 但是需要注意，最好加上驗證碼避免黑客攻擊：
-1.加入一個hash， 用來讓PHP判斷資料有沒有在傳輸途中被串改
-2.註冊PHP的session，讓PHP check的時候知道是由自己的伺服器發送表單來到此頁
用意是避免黑客在他的電腦做一個一模一樣的form，然後丟到我們的test.php頁面來check。
*/
// 1.定義一個密碼，固定時間要變一下，避免黑客長期監視找出規則
define('HASH', 'rhjefrue8934');
// 2.首先在伺服器註冊一個加密的SESSION 時間戳記
// (基本上session因為註冊在伺服器，安全度比 cookie高了。這樣做其實只是自認為會更安全一點)
$_SESSION['stamp'] = hash('sha512', HASH . date("YmdHis") . HASH);
?>
<script src="require/tools/jquery.js"></script>
<script src="require/tools/jquery.md5.js"></script>
<script>
$(function (){
//3.表單送出前
$(".form1").live("submit", function (){
//把使用者輸入的<input>變成query字串
var data_string = $("input").serialize();
//把變數串起來用jQuery的外掛md5加密(也可以用其他的如sha512啦…)
//這裡舉例的規則是： (jquery 取得的input serialize後 + 時間戳記 + 自訂的密碼) 串在一起後用md5加密
var hash_string = $.md5( data_string + '<?=$_SESSION['stamp'] . HASH?>')
//4.AJAX ，利用POST方法
$.post(
"test2.php",
{
action : 'check',
data : data_string,
hash : hash_string
},
function (data){
//我這裡是用alert範例，可以用fancybox彈跳出來會更好~
alert(data);
//若用fancybox就是這樣:
//$.fancybox(data);
}
);
//5.結尾記得要return false 不然整頁就送出去了
return false;
})
})
</script>
<meta charset="utf-8">
<form class="form1" method="post" action="">
<input name="english" type="text" value="This is Englist" >
<input name="chinese" type="text" value="這是中文" >
<input name="submit" class="submit" type="submit" value="試試看吧" >
</form>
<?
############################## test2.php ############################################
session_start();
define('HASH', 'rhjefrue8934');
if ($_POST['action'] == "check") {
//驗證資料正確嗎
if ($_POST['hash'] == md5($_POST['data'].$_SESSION['stamp'].HASH)) echo "驗證碼正確！";
else die("資料比對錯誤囉！");
//分析傳來的query字串並自動預設命名
parse_str($_POST['data']);
die("您輸入的是{$english}與{$chinese}");
}
?>