网络对抗技术 20181216 Exp8 Web基础
原理与实践说明
实践内容概述
-
Web前端HTML
-
能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。
-
-
Web前端javascipt
-
理解JavaScript的基本功能,理解DOM。编写JavaScript验证用户名、密码的规则。
-
-
Web后端:MySQL基础:正常安装、启动MySQL,建库、创建用户、修改密码、建表
-
Web后端:编写PHP网页,连接数据库,进行用户认证
-
-
最简单的SQL注入,XSS攻击测试
-
功能描述:用户能登陆,登陆用户名密码保存在数据库中,登陆成功显示欢迎页面。
-
-
课题负责人需要完成:登陆后可以发贴;会话管理。
实践原理
1、 基础知识
-
Web前端
-
编程语言:html、css、js
-
运行环境:浏览器
-
编程用语:在浏览器内部的动态,美观展示形式
-
-
Web后端
-
编程语言:PHP、JSP、.NET
-
运行环境:应用服务器
-
编程用途:对前端提交的数据进行处理并返回相应的HTML网页内容
-
-
数据库编程
-
编程语言:PHP、JSP等相应的库,SQL语言
-
运行环境:数据库服务器
-
变成用途:基本的数据增、删、改、查
-
2、 GET和POST两个方法
-
两个方法都是像后台传参的一种方法。
-
最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数
-
GET产生一个TCP数据包;POST产生两个TCP数据包(火狐就只有一个)。
-
GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留
基础问题回答
1、 什么是表单
-
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:
-
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
-
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
-
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
2、 浏览器可以解析运行什么语言
-
支持HTML(超文本标记语言)
-
XML(可扩展标记语言)
-
Python
-
PHP
-
JavaScript
-
ASP等众多脚本语言
3、 WebServer支持哪些动态语言
-
最常用的三种动态网页语言有ASP(ActiveServerPages),JSP(JavaServerPages),PHP(HypertextPreprocessor)。
-
ASP全名ActiveServerPages,是一个WEB服务器端的开发环境,利用它可以产生和执行动态的、互动的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript(Javascript)作为自己的开发语言。
-
JSP是Sun公司推出的新一代网站开发语言,Sun公司借助自己在Java上的不凡造诣,将Java从Java应用程序和JavaApplet之外,又有新的硕果,就是JSP,JavaServerPage。JSP可以在Serverlet和JavaBean的支持下,完成功能强大的站点程序。
-
PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法,并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。
-
三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。但JSP代码被编译成Servlet并由Java虚拟机解释执行,这种编译操作仅在对JSP页面的第一次请求时发生。在ASP、PHP、JSP环境下,HTML代码主要负责描述信息的显示样式,而程序代码则用来描述处理逻辑。普通的HTML页面只依赖于Web服务器,而ASP、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中,然后一起发送给浏览器。ASP、PHP、JSP三者都是面向Web服务器的技术,客户端浏览器不需要任何附加的软件支持。
实验内容
任务一:Web前端HTML
我使用的软件是XAMPP,他是一个集成Apache、数据库、FileZilla、Mercury、Tomcat的环境,安装过程见博客https://blog.csdn.net/qq_36595013/article/details/80373597
安装完成后使用管理员权限打开:
编写一个网页,我使用的是php和html、css、js。这是我们小组之前实验所编写的网站,以下是登录界面:
表单部分代码:
<form action="check.php" method="post">
<div class="login form">
<div class="group">
<div class="group-ipt email">
<input type="text" name="name" class="ipt" placeholder="输入您的用户名" required>
</div>
<div class="group-ipt password">
<input type="password" name="pw" class="ipt" placeholder="输入您的登录密码" required>
</div>
<div class="group-ipt verify">
<input type="text" name="verify" id="verify" class="ipt" placeholder="输入验证码" required>
<img src="imgcode.php" class="imgcode">
</div>
</div>
</div>
<div class="button">
<button type="submit" class="login-btn register-btn" id="button">登录</button>
</div>
</form>
任务二:Web前端:javascipt
1、 在原有login.html
基础上,可以添加一段JavaScript代码,以完成对用户是否填写邮箱和密码的判断。增加的js和php语句:
<?php
session_start();
include "headerfiles.php";
$username = $_POST['name'];
$password = $_POST['pw'];
$check = $_POST['verify'];
$sql = "SELECT username FROM userinfo WHERE username = '$username' ";
$result = pg_query($conn, $sql);
$res_rows = pg_fetch_array($result);
if ($_SESSION['randcode'] != $check){
echo "<script>alert('验证码错误,请重新输入!');top.location.href = 'login.html';</script>";
} else if (!$res_rows) {
echo "<script>alert('用户不存在,请重新输入!');top.location.href = 'login.html';</script>";
} else {
$sql = "SELECT username,password FROM userinfo
WHERE (username = '$username' and password = '$password') ";
$result = pg_query($conn, $sql);
if (!$result) {
echo "<script>alert('密码错误,请重新输入!');top.location.href = 'login.html';</script>";
} else {
//可以在此写登录后的操作
$_SESSION['username'] = $username;
echo "<script>alert('登陆成功!'); top.location.href = '广场.php';</script>";
}
}
?> return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("password!");
return false ;
}
}
当用户名存在、密码不对,验证码错误时都会报错。
js语句:
<script>alert('密码错误,请重新输入!');top.location.href = 'login.html';</script>
任务三、四:Web后端:MySQL基础、编写PHP网页
开启MySQL服务,点击admin
如图,可以新建数据库和表,简单的表手动创建也很方便
我使用的是在数据库作业中创建的华为云数据库,具体表项如下(使用navicat工具):
连接数据库语句:
<?php
$host = "host=xxx.xxx.xx.xx";
$port = "port=26000";
$dbname = "dbname=postgres";
$credentials = "user=dboper password=BigData@123";
$conn = pg_connect( "$host $port $dbname $credentials" );
if(!$conn){
echo "Error : Unable to open database\n";
} else {
echo "Opened database successfully\n";
}
?>
注册审查和数据库插入语句:
<?php session_start();//注册信息验证
include "headerfiles.php";
@$user=$_POST['name'];
@$email=$_POST['email'];
@$pass=$_POST['password'];
@$confirm=$_POST['password1'];
@$imgcode = $_POST['verify'];
$userlen= mb_strlen($user,'UTF8');
$check_user="SELECT username FROM userinfo WHERE username = '$user'";
$result_user=pg_query($conn,$check_user);
$row_user=pg_fetch_array($result_user);
//$check_email="SELECT email FROM userinfo WHERE email = '$email'";
//$result_email=pg_query($conn,$check_email);
//$row_email=pg_fetch_array($result_email);
if($_SESSION['randcode'] != $imgcode){
echo "<script>alert('验证码错误,请重新确认!'); location.href = document.referrer;</script>";
}
else if($pass!=$confirm)
{
echo "<script>alert('两次输入密码不一致,请重新确认!'); location.href = document.referrer;</script>";
}
else if($row_user)
{
echo "<script>alert('用户名\'$user\'已存在!'); location.href = document.referrer;</script>";
}
else
{
//$date=date("Y-m-d H:i:s", time()+6*60*60);
$img = "images/qwe.jpg";
$sql = "insert into userinfo(username,password,email,img) values('$user','$pass','$email','$img')";?
@$result = pg_query($conn,$sql);
echo "<script>alert('注册成功!'); location.href = 'login.html';</script>";
}
?>
关键语句:
$check_user="SELECT username FROM userinfo WHERE username = '$user'";
将数据库查询语句存入变量
$result_user=pg_query($conn,$check_user);
我使用的是postgres数据库,使用pg_query()函数执行查询语句
$row_user=pg_fetch_array($result_user);
将查到的结果存入row中(详情见php——pg语法)
注册一个新用户:
查看数据库,发现新注册的用户数据插入进去了:
用刚注册的用户登录:
注销,输入一个数据库中不存在的用户尝试登录,发现登录失败:
任务五:最简单的SQL注入,XSS攻击测试
SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。
由于我的登录是设置了安全保护的,所以单纯的语句打不进去,经过尝试和分析,我发现需要修改一些语句:
由于postgres的注释符是--
,所以将用户名修改为 'or 1=1 --
,发现在验证密码的时候报错了:
查看我验证密码的sql语句:
$sql = "SELECT username,password FROM userinfo
WHERE (username = '$username' and password = '$password') ";
$result = pg_query($conn, $sql);
发现之前用户名中输入的--
并没有把后面的' and password = '$password'
给注释掉
研究了一会儿发现是WHERE加了一个括号,导致解析的时候是整个括号解析,所以注释符并没有起作用。整了半天没办法,就把括号给删了,重新尝试,发现成功了:
由此可见这个括号是保障安全的有效措施,减少了注入点
尝试使用注入的用户发布数据,发现语句报错:
显示无法通过此用户连接数据库,可见注入的用户最多只能查看,不能修改。因为既是是我这样安全性比较低的网址都做了一些防护。
2、 XSS攻击
跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。故将跨站脚本攻击缩写为XSS。XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞由于被骇客用来编写危害性更大的phishing攻击而变得广为人知。
我尝试了一下,发现无法注入,索性把我的安全检查全部去掉了,输入<img src="images/qwe.jpg" alt="">
注入成功,可见用户名变成了图片:
任务六:课题负责人需要完成:登陆后可以发贴、会话管理。
1、 根据要求,在广场中加了一些代码:
<?php
if (pg_num_rows($result) > 0) {
// 输出数据 格式:echo "<div class="bbbb" style='padding-left:0;'>...</div>";
while($row = pg_fetch_assoc($result)) {
$use = $row["username"];
//echo "用户名:" . $row["username"]. "密码:" . $row["password"] . "昵称:" .$row["nickname"]."邮箱:" . $row["email"] . "<br>";
echo "<div class=\"box\">
<div class=\"media\">
<div class=\"media-left\">
<figure class=\"image is-64x64\">
<img src=\"".$row['img']."\" alt=\"\">
</figure>
</div>
<div class=\"media-content\">
<div class=\"content\">
<p><a href:\"\"><strong><font size=\"3\">".$row["username"]."</font></strong></a>:</font><font size=\"3\">".$row["content"]." </font></p>
</div>
</div>
<div id=\"dateTime\" class=\"is-info is-pulled-right\">".$row["usetime"]."</div>
</div>
<div id=\"dateTime\" class=\"is-info is-pulled-right\">".$userimg["email"]."</div>
</div>";
}
} else {
echo "0 结果";
}
echo "</div>";
?>
实现了效果:不同用户登录连接的是同一个数据库,且可以发布话题
实验感想