作业8

zoukankan html css js c++ java

作业8
20175103王伟泽 Exp 8 Web基础

一、实验前准备

1.实践内容
- Web前端：HTML
- Web前端：JavaScript
- Web后端：MySql基础
- Web后端：编写PHP网页
- SQL注入：XSS攻击
2.实践要求
- Web前端HTML
  能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。
- Web前端javascipt
  理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。
- Web后端：MySQL基础
  正常安装、启动MySQL，建库、创建用户、修改密码、建表。
- Web后端
  编写PHP网页，连接数据库，进行用户认证；
  功能描述：用户能登陆，登陆用户名密码保存在数据库中，登陆成功显示欢迎页面。
- 最简单的SQL注入，XSS攻击测试
3.预备知识

1）SQL注入

SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。

2）GET POST之间的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET产生的URL地址可以被Bookmark，而POST不可以。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求在URL中传送的参数是有长度限制的，而POST么有。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
二、实验内容

1.Web前端

首先在控制台输入指令service apache2 start来开启Apache服务。
在浏览器中输入Kali IP打开Apache的默认网页。

先准备一个能提交用户名密码的login.html页面并放到路径/var/www/html之下，代码如下。
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
</head>
<style type="text/css">
    body{
     background-image:url(/var/www/html/image.jpg) 
}
</style>
<body>
<div align="center" style="padding-top: 50px;">
<form action="login" method="post" name="login" >
<table width="740" height="300" >
<tr height="30">
<td colspan="2"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%">用户名：</td>
<td><input type="text" value="" name="username" id="username"/></td>
<td width="30%"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%">密 码：</td>
<td><input type="password" value="" name="password" id="password"/></td>
<td width="30%"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%"><input type="submit" value="登录"/></td>
<td align="center"><input type="button" name="close" value="关闭" οnclick="window.close();" /></td>
<td width="30%"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
```
然后进入登陆界面。

2.Web前端：JavaScript

我们新建一个register.html；基于上面的代码，我们接下来写一个在用户名或密码为空时会弹出的一个jsp警告，代码如下：
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
<script type="text/javascript">
    function resetValue(){
        document.getElementById("username").value="";
        document.getElementById("password").value="";
    }
</script>

</head>
<style type="text/css">
    body{
     background-image:url(/var/www/html/timg.jpg) 
}
</style>
<body>
    <div align="center" style="padding-top: 50px;">
        <form action="login.php" method="POST" name="login" >
        <table  width="740" height="300"  >

                <td colspan="2"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%">用户名：</td>
                <td><input type="text" value="" name="username" id="username"/></td>
                <td width="30%"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%">密  码：</td>
                <td><input type="password" value="" name="password" id="password"/></td>
                <td width="30%"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%"><input type="submit" name="login" value="登录"onClick="return Login()" /></td>
                <td align="center"><td align="center"><input type="button" name="close" value="关闭" οnclick="window.close();" /></td></td>
                <td width="30%"></td>
            </tr>
            
            
        </table>
        </form>
    </div>


    <script language="javascript">
    function Login(){
        var Name = document.login.username.value ;
        var Pwd = document.login.password.value ;
        if ((Name =="") ){
            alert("用户名为空！");
            return false ;
        }
       if ((Pwd=="")){
            alert("密码为空！");
            return false ;
        }
    }![](https://img2020.cnblogs.com/blog/1944438/202005/1944438-20200519171740048-40178780.png)


</script>
</body>
</html>
```
结果图如下，当用户名或者密码为空时会报错。

3.Web后端：MySQL基础

输入指令来开启MySQL服务，输入指令service mysql start，然后输入mysql -u root -p登录，默认密码为空。

然后输入下面的指令
```
use mysql;
UPDATE mysql.user SET authentication_string = 20175103, plugin = 'mysql_native_password' WHERE User = 'root' AND Host = 'localhost';
```
依次输入以下的内容来创建数据库的表，然后插入一条信息。
```
create database markdata;
use markdata
create table login5103(username VARCHAR(30),password VARCHAR(30));
insert into login5103 values('wwz','20175103');
select * from login5103;
```
输入如下指令来新建用户，并给它赋予一些权限包括select,insert,update,delete。
grant select,insert,update,delete on mark.* to mark@localhost identified by "20175103";

4.Web后端：编写PHP网页

首先输入如下指令开启Apachec2和MySql服务，并查看地址和占用的端口。
```
service apache2 start
/etc/init.d/mysql start
netstat -aptn
```
编写一段代码来进行测试PHP是否可以正常工作，将其放在/var/www/html/下
```
<?php
include($_GET["a"]);
?>
```
然后在浏览器中输入192.168.41.130/test.php?a=/etc/passwd就可以看到/etc/passwd文件的内容了。

编写PHP文件连接MySql数据库
```
<?php
$uname=($_POST["username"]);
$pwd=($_POST["password"]);
/*echo $uname; */
$query_str="SELECT * FROM login5121 where username='{$uname}' and password='{$pwd}';";
/*echo "<br> {$query_str} <br>"; */
$mysqli = new mysqli("127.0.0.1", "root", "", "markdata");
/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s
",$mysqli->connect_error);
    exit();
}
echo "连接成功! ";
if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){
        echo "<br> welcome:{$uname}<br> ";
    } 
    else {
        echo "<br> 登入失败 <br> " ;
    }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>
```
打开浏览器，在搜索栏中输入192.168.41.130/login.php，输入正确账号和密码后，点击登录后成功转到登录后的界面。

如果出错，则会显示下面的界面。

5.SQL注入: XSS攻击测试

打开浏览器，输入192.168.41.130/register.html进入登陆界面后，在用户名输入栏中输入' or 1=1#，随意输入密码，点击登录。

登陆成功，攻击成功。

在login.php代码中将下面那行代码的注释符去掉。
echo "<br> {$query_str} <br>";

重新打开登陆界面，用户名中输入如下指令：
<img src="image.jpg" />
随意输入密码。

点击登录，成功输入。

6.登录发贴，会话管理。

首先在登录界面文件中加入如下代码来开启session服务：
```
<?php
    session_start();
    $_SESSION["number"] = null;
?>
```
接下来用代码if (isset($_SESSION["number"]) && $_SESSION["number"] === true)进行判断是否登录，如果失败，则跳转失败页面。

登录后，进行跳转到发帖界面。
```
<form method="post"action="test.php">
<p>welcome!</p>
<p>tytle:<input type="text" name="title"></p>
<p>content:<textarea name="content"></textarea></p>
<input type="submit"value="submit">
</form>
```
尝试输入内容后，点击提交。使用如下代码写入文件夹。
```
$title=$_POST['title'];
$content=$_POST["content"];
file_put_contents('data.txt',"title:".$title.",content:".$content."/n",FILE_APPEND)
```
提交后，进入test.php界面，可以继续发帖，也可以查看之前所发的帖子。

点击check查看之前内容。
```
<?php

$content =file_get_contents("data.txt");
echo str_replace("
","<br>",$contene)
?>
```
三、实验总结

1.实验中遇到的问题

在实验中途，由于我的电脑死机，重启计算机，结果导致虚拟机由于非正常关机进入了如下模式，即存储文件损坏。

遇到这种情况不要慌，解决方法：https://blog.csdn.net/qq_38289815/article/details/105558145.

2.基础问题回答

1）什么是表单
表单是一个包含很多表单元素的区域，主要用于网站向用户搜集不同的信息，在不同的表单元素中，用户可以输入包括用户名、密码、文本、多行文本、数字等等。
其内容包括
- text,明文文本框
- password，暗文文本框，比如密码框
- radio，单选框
- checkbox,多选框
- submit,提交按钮
- reset，重置按钮
- hidden，隐藏域写在页面代码上并不会让用户看得见，当用户填写完表单之后这条代码也会一并提交到服务器。
  2）浏览器可以解析运行什么语言。
  HTML/CSS超文本标记语言、XML可扩展标记语言和一些脚本语言，如JavaScript、Python、Java、JSP等等。
  3）WebServer支持哪些动态语言。
  ASP、PHP和JSP等动态语言都支持。
3.实验总结

本次实验，所用的对我来说都是新语言，如PHP，在学习上还是有一定困难，希望能够在接下来的努力中把这些新语言学通学懂，此外对于数据库的使用也不够熟练，我会继续努力的。
查看全文

相关阅读:
Siege 3.0 正式版发布，压力测试工具
 Pomm 1.1.2 发布，专为 PG 设计的 ORM 框架
 Whonix 0.5.6 发布，匿名通用操作系统
 国内开源 java cms，Jspxcms 2.0 发布
 EZNamespaceExtensions.Net v2013增加对上下文菜单、缩略图、图标、属性表的支持
 GNU Guile 2.0.9 发布，Scheme 实现
 jdao 1.0.4 发布轻量级的orm工具包
 OpenSearchServer 1.4 RC4 发布
 Percona Server for MySQL 5.5.3030.2
Samba 4.0.5 发布

原文地址：https://www.cnblogs.com/20175103-wangweize/p/12918457.html

20175103王伟泽 Exp 8 Web基础

一、实验前准备

1.实践内容

2.实践要求

3.预备知识

1）SQL注入

2）GET POST之间的区别

二、实验内容

1.Web前端

2.Web前端：JavaScript

3.Web后端：MySQL基础

4.Web后端：编写PHP网页

5.SQL注入: XSS攻击测试

6.登录发贴，会话管理。

三、实验总结

1.实验中遇到的问题

2.基础问题回答

3.实验总结