當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

Exp 8 Web基础 20164302 王一帆

發(fā)布時間：2023/11/27 生活经验 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Exp 8 Web基础 20164302 王一帆小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?

1.實踐具體要求

（1）Web前端HTML(0.5分)

? ? ? ?? 能正常安裝、啟停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTML。

（2）Web前端javascipt(0.5分)

? ? ? ?? 理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規(guī)則。

（3）Web后端：MySQL基礎(chǔ)：正常安裝、啟動MySQL，建庫、創(chuàng)建用戶、修改密碼、建表(0.5分)

（4）Web后端：編寫PHP網(wǎng)頁，連接數(shù)據(jù)庫，進行用戶認證(1分)

（5）最簡單的SQL注入，XSS攻擊測試(1分)

? ? ? ?? 功能描述：用戶能登陸，登陸用戶名密碼保存在數(shù)據(jù)庫中，登陸成功顯示歡迎頁面。

2.基礎(chǔ)問題回答

（1）什么是表單？

　　? 表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。一個表單有三個基本組成部分：表單標簽、表單域、表單按鈕

　　? 表單標簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。

　　? 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。

　　? 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

（2）瀏覽器可以解析運行什么語言？

　　? 支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等眾多腳本語言。

（3）WebServer支持哪些動態(tài)語言？

　　? 最常用的三種動態(tài)網(wǎng)頁語言有ASP(ActiveServerPages),JSP(JavaServerPages),PHP(HypertextPreprocessor)。

　　? ASP全名ActiveServerPages，是一個WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和執(zhí)行動態(tài)的、互動的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript（Javascript）作為自己的開發(fā)語言。

　　? JSP是Sun公司推出的新一代網(wǎng)站開發(fā)語言，Sun公司借助自己在Java上的不凡造詣，將Java從Java應(yīng)用程序和JavaApplet之外，又有新的碩果，就是JSP，JavaServerPage。JSP可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。

　　? PHP是一種跨平臺的服務(wù)器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法,并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動態(tài)產(chǎn)生頁面。

3.實踐過程

3.1Web前端：HTML基礎(chǔ)

（1）kali默認已安裝Apache，使用?service apache2 start?命令打開Apache服務(wù)

2）在瀏覽器輸入?127.0.0.1?可以打開Apache的默認網(wǎng)頁

（3）進入?/var/www/html?目錄下（即Apache目錄下），新建一個簡單的含有表單的html文件，4302.html。

?代碼如下：

<html>
<head>
<title>CryptoTeam</title>
<!-- Meta tag Keywords -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tag Keywords -->
</head><body>
<!-- main -->
<!--//header--><h2>Login Quick</h2><form action="login" method="post"><input placeholder="E-mail" name="Name" class="user" type="email"><br></br><input  placeholder="Password" name="Password" class="pass" type="password"><br></br><input type="submit" value="Login"></form>
<!--//main-->
</body>
</html>

（4）在瀏覽器中打開

3.2Web前端：JavaScript基礎(chǔ)

（1）在原有 4302.html的基礎(chǔ)上，添加一段JavaScript代碼，以完成對用戶是否填寫郵箱和密碼的判斷。修改后的20164302.html

<html>
<head>
<title>CryptoTeam</title>
<!-- Meta tag Keywords -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tag Keywords -->
</head><body>
<!-- main -->
<!--//header--><h2>Login Quick</h2><form action="login" method="post" name="form_login"><input placeholder="E-mail" name="Email" class="user" type="email" οnfοcus="if (this.value=='Your email') this.value='';" /><br></br><input  placeholder="Password" name="Password" class="pass" type="password" οnfοcus="if (this.value=='Your password') this.value='';"/><br></br><input type="submit" value="Login" onClick="return validateLogin()"/></form>
<!--//main-->
<script language="javascript">  function validateLogin(){  var sUserName = document.form_login.Email.value ;  var sPassword = document.form_login.Password.value ;    if ((sUserName =="") || (sUserName=="Your email")){  alert("user email!");  return false ;  }  if ((sPassword =="") || (sPassword=="Your password")){  alert("password!");  return false ;  }  }   
</script>  </body>
</html>

（2）在瀏覽器訪問?http://127.0.0.1/20164302.html ，若用戶郵箱或密碼未填寫就直接提交，網(wǎng)頁會呈現(xiàn)如下提示

3.3Web后端：MySQL基礎(chǔ)

（1）執(zhí)行?/etc/init.d/mysql start?命令，開啟MySQL服務(wù)

（2）輸入?mysql -u root -p?使用root權(quán)限進入，默認的密碼是?password?

（3）使用?create database 數(shù)據(jù)庫名稱;?建立數(shù)據(jù)庫

（4）使用?show databases;?查看存在的數(shù)據(jù)庫

（5）使用?use 數(shù)據(jù)庫名稱;?使用我們創(chuàng)建的數(shù)據(jù)庫

（6）使用?create table 表名 (字段設(shè)定列表);?建立數(shù)據(jù)庫表，并設(shè)置字段基本信息?create table login_table (username VARCHAR(20), password VARCHAR(20));?

（7）使用?show tables;?查看表信息

（8）使用??insert into 表名 values('值1','值2','值3'...);?插入數(shù)據(jù)?insert into login_table values('hello@163.com', 'world');?

（9）使用?select * from 表名;?查詢表中的數(shù)據(jù)

10）在MySQL中增加新用戶，使用?grant select,insert,update,delete on 數(shù)據(jù)庫.* to 用戶名@登錄主機(可以是localhost,也可以是遠程登錄方式的IP) identified by "密碼";?意思是：將對某數(shù)據(jù)庫的所有表的select,insert,update,delete權(quán)限授予某ip登錄的某用戶

（11）增加新用戶后，退出，使用新的用戶名和密碼進行登錄

?3.4Web后端：PHP基礎(chǔ)

（1）在?/var/www/html?目錄下新建一個PHP測試文件20164302.php

（2）瀏覽器打開localhost:80/20164302.php

（3）在瀏覽器網(wǎng)址欄中輸入?http://127.0.0.1/test.php?id=/etc/passwd ，可看到/etc/passwd文件的內(nèi)容

（4）利用PHP和MySQL，結(jié)合之前編寫的登錄網(wǎng)頁進行登錄身份認證

（這一部分做了很久，之前嘗試了很多次還不容才成功，改過html的代碼，php的代碼也改了很多次，數(shù)據(jù)庫也重建了好多次，最終突然就成功了，真正出現(xiàn)問題的原因還不太明確）

所以后面的部分信息可能前面的對不上，因為一直在不能的試，但步驟是一樣的

數(shù)據(jù)庫名：wang 表名：testtable 在表中添加用戶和密碼分別為：4302@qq.com 123456

修改后的164302.html代碼

<html>
<head>
<title>login</title>
</head>
<h1>Login</h1>
<body>
<table><form action="login.php" method="GET" name="form_login">
<tr>
<td>username:</td>
<td><input type="text" name="username" size="20" maxlength="20"οnfοcus="if (this.value=='You name')this.value='';"/></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password" size="20" maxlength="20"οnfοcus="if (this.value=='You password')this.value='';"/></td>
</tr>
<table>
<tr>
<td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td>
<td><input type="reset" name="rs" value="reset"/></td>
</tr>
</table>
</from>
</table><script language="javascript">  function validateLogin(){  var sUserName = document.form_login.username.value ;  var sPassword = document.form_login.password.value ;    if ((sUserName =="") || (sUserName=="Your name")){  alert("user email!");  return false ;  }  if ((sPassword =="") || (sPassword=="Your password")){  alert("password!");  return false ;  }  }   
</script>  </body>
</html>

修改后的login.php代碼

<?php
$uname=($_GET["username"]);
$pwd=($_GET["password"]);
echo $uname;
$query_str="SELECT * FROM testtable where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "root", "123456", "wang");/* check connection */
if ($mysqli->connect_errno) {printf("Connect failed: %s\n", $mysqli->connect_error);exit();
}
echo "connection ok!";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {if ($result->num_rows > 0 ){echo "<br> {$uname}:Welcome!!! <br> ";} else {echo "<br> login failed!!!! <br> " ; }/* free result set */$result->close();
}
$mysqli->close();
?>

成功的數(shù)據(jù)庫

（5）在瀏覽器輸入?127.0.0.1/164302.html?訪問自己的登錄界面，輸入用戶名和密碼，登錄后界面如圖所示，說明登錄成功

?3.5最簡單的SQL注入，XSS攻擊測試

1.SQL注入

在用戶名輸入框輸入?' or 1=1#?，密碼任意輸入，可登陸成功。

輸入的用戶名與select語句組合變成?select * from users where username='' or 1=1#' and password=''?,#起到注釋作用屏蔽了密碼判斷語句，而1=1是1，所以能夠成功登陸。

2.XSS攻擊

將圖片放在?/var/www/html?目錄下，在用戶名輸入框輸入?<img src="pk.jpg" />?，密碼任意，就成功登錄

縮小看一下，嘿嘿

是可愛的皮卡丘沒錯了！

4 實驗心得

? ? ? ? 這次實驗比前面幾次的實驗難度都要高一點，不僅有前后的連貫，在html和php的編寫上也是一個很大的挑戰(zhàn)，自己的編程能力不是很高，只能是不停的拿著學長學籍的代碼去試去改，過程很艱難，但結(jié)果是好的，對HTML和PHP文件都有了進一步的了解，雖然不能弄懂，但是有點小收獲總是不錯的。

轉(zhuǎn)載于:https://www.cnblogs.com/wyf20164302/p/10890135.html

總結(jié)

以上是生活随笔為你收集整理的Exp 8 Web基础 20164302 王一帆的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：求一个简短搞笑的个性签名
下一篇： Python中numpy模块的简单使用