深入理解ajax系列第八篇
前面的話
在以前，網站的用戶與後端交互的主要方式是通過HTML表單的使用。表單的引入在1993年，由於其簡單性和易用性，直到電子商務出現之前一直保持著重要位置。理解表單提交，對於更深入地理解ajax是有好處的。下面將詳細介紹表單形式的交互
建立表單
表單處理是一個多線程。首先創建一個表單，以供用戶輸入詳細的請求信息。接著，輸入的數據被發送到網頁服務器，在服務器裏這些數據得到編譯和錯誤檢測。如果PHP代碼標識出一個或多個需要重要輸入的字段，則帶有相關錯誤信息的表單會重新顯示。當精確的輸入信息滿足代碼的需要時，代碼會采取一些調用數據庫的行為，如輸入購物的細節
[註意]關於HTML表單元素的詳細信息移步至此
要建立一個表單，至少需要以下幾個元素：一個form元素、一個指定GET或POST方法的提交類型、一個或多個輸入字段，以及表單數據提交的目的地址URL
<form action="http://www.w3school.com.cn/demo/welcome.php">
<span>Name:</span>
<input name="name"><br>
<span>Email:</span>
<input name="email"><br>
<input type="submit">
</form>
表單處理
PHP 超全局變量 $_GET 和 $_POST 用於收集表單數據(form-data)
GET 和 POST 都創建數組(例如，array( key => value, key2 => value2, key3 => value3, ...))。此數組包含鍵/值對，其中的鍵是表單控件的名稱，而值是來自用戶的輸入數據。
GET 和 POST 被視作 $_GET 和 $_POST。它們是超全局變量，這意味著對它們的訪問無需考慮作用域，即無需任何特殊代碼，能夠從任何函數、類或文件訪問它們
$_GET 是通過 URL 參數傳遞到當前腳本的變量數組
$_POST 是通過 HTTP POST 傳遞到當前腳本的變量數組
通過 GET 方法從表單發送的信息對任何人都是可見的(所有變量名和值都顯示在 URL 中)。GET對所發送信息的數量也有限制。限制在大於2000個字符。不過，由於變量顯示在 URL 中，把頁面添加到書簽中也更為方便
通過 POST 方法從表單發送的信息對其他人是不可見的(所有名稱/值會被嵌入 HTTP 請求的主體中)，並且對所發送信息的數量也無限制。此外 POST 支持高階功能，比如在向服務器上傳文件時進行 multi-part 二進制輸入。不過，由於變量未顯示在 URL 中，也就無法將頁面添加到書簽。一般地，使用 POST 來發送表單數據
【post】
<!-- 提交頁 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="post" action="http://www.w3school.com.cn/demo/welcome.php">
<span>Name:</span>
<input name="name"><br>
<span>Email:</span>
<input name="email"><br>
<input type="submit">
</form>
</body>
</html>
<!-- 響應頁 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
【get】
如果不設置form元素的method屬性，則默認為get方法
<!-- 提交頁 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="http://www.w3school.com.cn/demo/welcome_get.php">
<span>Name:</span>
<input name="name"><br>
<span>Email:</span>
<input name="email"><br>
<input type="submit">
</form>
</body>
</html>
<!-- 響應頁 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>
表單安全
上面的代碼很簡單。不過，最重要的內容被漏掉了。需要對表單數據進行驗證，以防止腳本出現漏洞
對 HTML 表單數據進行適當的驗證對於防範黑客和垃圾郵件很重要
字段 驗證規則 Name 必需。必須包含字母和空格。 E-mail 必需。必須包含有效的電子郵件地址(包含 @ 和 .) Website 可選。如果選填，則必須包含有效的 URL。 Comment 可選。多行輸入字段(文本框) Gender 必需。必須選擇一項。
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 姓名： <input type="text" name="name" value=""> <span class="error">* </span> <br><br> 電郵： <input type="text" name="email" value=""> <span class="error">* </span> <br><br> 網址： <input type="text" name="website" value=""> <span class="error"></span> <br><br> <label> 評論： <textarea name="comment" rows="5" cols="40"></textarea> <br><br> 性別： <input type="radio" name="gender" value="female">女性 <input type="radio" name="gender" value="male">男性 <span class="error">* </span> <br><br> <input type="submit" name="submit" value="提交"> </form>
【$_SERVER["PHP_SELF"]】
$_SERVER["PHP_SELF"] 是一種超全局變量，它返回當前執行腳本的文件名。因此，$_SERVER["PHP_SELF"] 將表單數據發送到頁面本身，而不是跳轉到另一張頁面。這樣，用戶就能夠在表單頁面獲得錯誤提示信息
【XSS】
$_SERVER["PHP_SELF"] 變量能夠被黑客利用。如果頁面使用了PHP_SELF，用戶能夠輸入下劃線然後執行跨站點腳本(XSS)
跨站點腳本(Cross-site scripting，XSS)是一種計算機安全漏洞類型，常見於Web應用程序。XSS能夠使攻擊者向其他用戶瀏覽的網頁中輸入客戶端腳本
假設"test_form.php" 的頁面中有如下表單
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
現在，如果用戶進入的是地址欄中正常的URL："http://www.example.com/test_form.php"，上面的代碼會轉換為：
<form method="post" action="test_form.php">
不過，如果用戶在地址欄中鍵入了如下 URL：
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert(‘hacked‘)%3C/script%3E
在這種情況下，上面的代碼會轉換為：
<form method="post" action="test_form.php"/><script>alert(‘hacked‘)</script>
這段代碼加入了一段腳本和一個提示命令。並且當此頁面加載後，就會執行JavaScript代碼(用戶會看到一個提示框)。這僅僅是一個關於 PHP_SELF 變量如何被利用的簡單無害案例
<script>標簽內能夠添加任何JavaScript代碼，黑客能夠把用戶重定向到另一臺服務器上的某個文件，該文件中的惡意代碼能夠更改全局變量或將表單提交到其他地址以保存用戶數據等
【htmlspecialchars()】
如果避免$_SERVER["PHP_SELF"]被利用？通過使用 htmlspecialchars() 函數能夠避免$_SERVER["PHP_SELF"]被利用
htmlspecialchars()函數把特殊字符轉換為 HTML 實體。這意味著 < 和 > 之類的HTML字符會被替換為 < 和 >。這樣可防止攻擊者通過在表單中註入HTML或JavaScript代碼(跨站點腳本攻擊)對代碼進行利用
表單代碼是這樣的：
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
htmlspecialchars()把特殊字符轉換為HTML實體。現在，如果用戶試圖利用PHP_SELF變量，會導致如下輸出
<form method="post" action="test_form.php/"><script>alert(‘hacked‘)</script>">
所以，驗證表單要做的第一件事是通過PHP的htmlspecialchars()函數傳遞所有變量。在使用htmlspecialchars()函數後，如果用戶試圖在文本字段中提交以下內容：
<script>location.href(‘http://www.hacked.com‘)</script>
代碼不會執行，因為會被保存為轉義代碼，就像這樣：
<script>location.href(‘http://www.hacked.com‘)</script>
現在這條代碼顯示在頁面上或e-mail中是安全的
在用戶提交該表單時，我們還要做兩件事：1、通過PHP的trim()函數去除用戶輸入數據中不必要的字符(多余的空格、制表符、換行)；2、通過PHP的stripslashes()函數刪除用戶輸入數據中的反斜杠(\)
接下來我創建一個檢查函數，命名為 test_input()，通過test_input()函數檢查每個$_POST變量
<?php
// 定義變量並設置為空值
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
錯誤信息
在下面的代碼中增加了一些新變量：$nameErr、$emailErr、$genderErr以及$websiteErr。這些錯誤變量會保存被請求字段的錯誤消息。還為每個$_POST變量添加了一個if else語句。這條語句通過PHP的empty()函數檢查$_POST變量是否為空。如果為空，則錯誤消息會存儲於不同的錯誤變量中。如果不為空，則通過test_input()函數發送用戶輸入數據
<?php
// 定義變量並設置為空值
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
?>
在 HTML 表單中，在每個被請求字段後面增加了一點腳本。如果需要，會生成恰當的錯誤消息(如果用戶未填寫必填字段就試圖提交表單)
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> Name: <input type="text" name="name"> <span class="error">* <?php echo $nameErr;?></span> <br><br> E-mail: <input type="text" name="email"> <span class="error">* <?php echo $emailErr;?></span> <br><br> Website: <input type="text" name="website"> <span class="error"><?php echo $websiteErr;?></span> <br><br> <label>Comment: <textarea name="comment" rows="5" cols="40"></textarea> <br><br> Gender: <input type="radio" name="gender" value="female">Female <input type="radio" name="gender" value="male">Male <span class="error">* <?php echo $genderErr;?></span> <br><br> <input type="submit" name="submit" value="Submit"> </form>
表單驗證
驗證規則中，"Name", "E-mail" 以及 "Gender" 字段是必需的。這些字段不能為空且必須在 HTML 表單中填寫
【驗證名字】
以下代碼檢查name字段是否包含字母和空格。如果name字段無效，則存儲一條錯誤消息
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "只允許字母和空格！";
}
【驗證 E-mail】
以下代碼展檢查e-mail地址語法是否有效。如果無效則存儲一條錯誤消息
$email = test_input($_POST["email"]);
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
$emailErr = "無效的 email 格式！";
}
【驗證 URL】
以下代碼檢查URL地址語法是否有效。如果 URL 地址語法無效，則存儲一條錯誤消息
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%
=~_|]/i",$website)) {
$websiteErr = "無效的 URL";
}
保留值
如果需要在用戶點擊提交按鈕後在輸入字段中顯示值，我們在以下輸入字段的value屬性中增加了一小段 PHP 腳本：name、email 以及 website。在 comment 文本框字段中，把腳本放到了 <textarea> 與 </textarea> 之間。這些腳本輸出$name、$email、$website 和 $comment 變量的值
然後，還需要顯示選中了哪個單選按鈕。對此，必須操作 checked 屬性(而非單選按鈕的 value 屬性)
Name: <input type="text" name="name" value="<?php echo $name;?>"> E-mail: <input type="text" name="email" value="<?php echo $email;?>"> Website: <input type="text" name="website" value="<?php echo $website;?>"> Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> Gender: <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
表單發送
HTML網頁的<form>元素能夠以四種格式，向服務器發送數據
使用POST方法，將enctype屬性設為application/x-www-form-urlencoded，這是默認方法
<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"></form>
使用POST方法，將enctype屬性設為text/plain
<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"></form>
使用POST方法，將enctype屬性設為multipart/form-data
<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"></form>
使用GET方法，enctype屬性將被忽略
<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"></form>
某個表單有兩個字段，分別是foo和baz，其中foo字段的值等於bar，baz字段的值是一個分為兩行的字符串。上面四種方法，都可以將這個表單發送到服務器
第一種方法是默認方法，POST發送，Encoding type為application/x-www-form-urlencoded
Content-Type: application/x-www-form-urlencoded foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
第二種方法是POST發送，Encoding type為text/plain
Content-Type: text/plain foo=bar baz=The first line. The second line.
第三種方法是POST發送，Encoding type為multipart/form-data
Content-Type: multipart/form-data; boundary=---------------------------314911788813839 -----------------------------314911788813839 Content-Disposition: form-data; name="foo" bar -----------------------------314911788813839 Content-Disposition: form-data; name="baz" The first line. The second line. -----------------------------314911788813839--
第四種方法是GET請求
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line
完整代碼
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// 定義變量並設置為空值
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "姓名是必填的";
} else {
$name = test_input($_POST["name"]);
// 檢查姓名是否包含字母和空白字符
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "只允許字母和空格";
}
}
if (empty($_POST["email"])) {
$emailErr = "電郵是必填的";
} else {
$email = test_input($_POST["email"]);
// 檢查電子郵件地址語法是否有效
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
$emailErr = "無效的 email 格式";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// 檢查 URL 地址語法是否有效（正則表達式也允許 URL 中的斜杠）
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "無效的 URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "性別是必選的";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<p><span class="error">* 必需的字段</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
姓名：<input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
電郵：<input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
網址：<input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
評論：<textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
<br><br>
性別：
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="female") echo "checked";?>
value="female">女性
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="male") echo "checked";?>
value="male">男性
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
深入理解ajax系列第八篇