Exp 8 Web基础 Week12 - 20165201

时间 2019-11-30

标签 exp web 基础 week12 week 栏目 HTML 繁體版

原文原文链接

Exp 8 Web基础 Week12 - 20165201

（因为图片比较大，看的时候须要关闭侧边栏~）javascript

学习目标

(1)Web前端HTML(0.5分)php

能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。html

(2)Web前端javascipt(0.5分)前端

理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。java

(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、建立用户、修改密码、建表(0.5分)mysql

(4)Web后端：编写PHP网页，链接数据库，进行用户认证(0.5分)web

(5)最简单的SQL注入，XSS攻击测试(0.5分)sql

实验环境

macOS Mojave
Kali
Windows XP

基础问题回答

（1）什么是表单

HTML 表单用于搜集不一样类型的用户输入，<form> 元素定义 HTML 表单
HTML 表单包含表单元素，表单元素指的是不一样类型的 input 元素、复选框、单选按钮、提交按钮等等
<input>元素是最重要的表单元素，<input> 元素有不少形态，根据不一样的 type 属性：
- text：定义常规文本输入
- radio：定义单选按钮输入（选择多个选择之一）
- submit：定义提交按钮（提交表单）
<select>元素定义下拉列表
<option>元素定义待选择的选项
<textarea>元素定义多行输入字段（文本域）
<button> 元素定义可点击的按钮

（2）浏览器能够解析运行什么语言

HTML：超文本标记语言(Hyper Text Markup Language)
PHP：超文本预处理器（Hypertext Preprocessor）
JavaScript
XML：可扩展标记语言

(3) WebServer支持哪些动态语言

支持JavaScript、ASP、PHP、Ruby等脚本语言
- PHP基于APACHE WEB SERVER
- ASP基于IIS WEB SERVER，是微软的服务器端脚本技术

预备知识

(1)什么是 HTTP？

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通讯
HTTP 的工做方式是客户机与服务器之间的请求-应答协议

(2)两种 HTTP 请求方法：`GET` 和 `POST`

GET：从指定的资源请求数据，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求可被收藏为书签
- GET 请求不该在处理敏感数据时使用
- GET 请求有长度限制
- GET 请求只应当用于取回数据
- 与 POST 相比，GET 的安全性较差，由于所发送的数据是 URL 的一部分，在发送密码或其余敏感信息时毫不要使用 GET
POST：向指定的资源提交要被处理的数据，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的
- POST 请求不会被缓存
- POST 请求不会保留在浏览器历史记录中
- POST 不能被收藏为书签
- POST 请求对数据长度没有要求
- POST 比 GET 更安全，由于参数不会被保存在浏览器历史或 web 服务器日志中

实验步骤

1、Web前端HTML

能正常安装、启停Apache（Mac下）

Mac系统自带Apache服务，在终端中输入httpd -v查看Apache服务
输入sudo apachectl start以开启Apache服务
而后在Safari中输入网址http://127.0.0.1或http://localhost，若是出现下面的界面就表示Apache服务能够正常使用
工做目录为/Library/WebServer/Documents
输入sudo apachectl stop以关闭Apache服务
输入sudo apachectl restart以重启Apache服务数据库
或者使用xampp开启Apache服务，这个比较方便
apache

理解HTML，理解表单

HTML相关知识在以前的网络安全编程基础中已经学过，表单的概念也是：
HTML 表单用于搜集不一样类型的用户输入，<form> 元素定义 HTML 表单
HTML 表单包含表单元素，表单元素指的是不一样类型的 input 元素、复选框、单选按钮、提交按钮等等
<input>元素是最重要的表单元素，<input> 元素有不少形态，根据不一样的 type 属性：
- text：定义常规文本输入
- radio：定义单选按钮输入（选择多个选择之一）
- submit：定义提交按钮（提交表单）
<select>元素定义下拉列表
<option>元素定义待选择的选项
<textarea>元素定义多行输入字段（文本域）
<button> 元素定义可点击的按钮

理解GET与POST方法

GET：从指定的资源请求数据，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求可被收藏为书签
- GET 请求不该在处理敏感数据时使用
- GET 请求有长度限制
- GET 请求只应当用于取回数据
- 与 POST 相比，GET 的安全性较差，由于所发送的数据是 URL 的一部分，在发送密码或其余敏感信息时毫不要使用 GET
POST：向指定的资源提交要被处理的数据，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的
- POST 请求不会被缓存
- POST 请求不会保留在浏览器历史记录中
- POST 不能被收藏为书签
- POST 请求对数据长度没有要求
- POST 比 GET 更安全，由于参数不会被保存在浏览器历史或 web 服务器日志中

编写一个含有表单的HTML

我在Intellij IDEA中编写代码，而后启动Apache服务
代码以下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>登录页面</title>
</head>
<body background="img/login.jpg">
<h1 align="center" >登录界面</h1><br>
<div style="text-align: center">
    <form action="login" method="post">
        用户名 <input type="text" name = "username" /> <br><br>&nbsp;&nbsp;
        密码&nbsp; <input type="password" name = "password"> <br>
        <input type = "submit" value = "提交">
    </form>
</div>

</body>
</html>

运行结果以下：

2、Web前端javascipt

理解JavaScript的基本功能，理解DOM

HTML DOM 定义了访问和操做 HTML 文档的标准方法，DOM 将 HTML 文档表达为树结构

编写JavaScript验证用户名、密码的规则

登陆检测没有输入用户名或密码的代码以下：

<script language="javascript">
    function check(){
        var sUserName = document.form_login.username.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>

个人登陆验证代码以下：

package servlet;

import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javabean.DBUtil;

public class LoginServlet implements javax.servlet.Servlet {
    @Override
    public void destroy() {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void init(ServletConfig arg0) throws ServletException {

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, InstantiationException, IllegalAccessException {
        String userName = request.getParameter("username");
        String password = request.getParameter("password");
        DBUtil db = new DBUtil();
        boolean canLogin = db.loginSuccess(userName, password);
        if (canLogin) {
            response.sendRedirect("index.jsp");
        } else {
            response.sendRedirect("back.jsp");
        }
    }

    @Override
    public void service(ServletRequest request, ServletResponse response)
            throws ServletException, IOException {
        HttpServletRequest rq = (HttpServletRequest) request;
        HttpServletResponse rs = (HttpServletResponse) response;
        try {
            doPost(rq, rs);
        } catch (InstantiationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

}

个人主界面是index.jsp
登陆界面是login.jsp
出错界面是back.jsp，若是用户输入错误，会返回以下界面

3、Web后端：MySQL基础

正常安装、启动MySQL，建库、建立用户、修改密码、建表

后端这块我使用了Navicat这个软件，Navicat Premium 是一套数据库开发工具，让你从单一应用程序中同时链接 MySQL、MariaDB、MongoDB、SQL Server、Oracle、PostgreSQL 和 SQLite 数据库。它与 Amazon RDS、Amazon Aurora、Amazon Redshift、Microsoft Azure、Oracle Cloud、MongoDB Atlas、阿里云、腾讯云和华为云等云数据库兼容。你能够快速轻松地建立、管理和维护数据库
能够看到，整个界面很是简洁
点击左上角的链接，就能够选择链接哪一个数据库了，这里选择MySQL，不要看我这个光标放的位置，这图没截好
而后咱们新建一个叫作test的链接
以后是建库，名字设为user
接下来是建表，名字是user_info
再新建两个用户lzh和test
因为我作的这个网站是介绍瑞士旅游地区的，我又建了个新表detail

4、Web后端：编写PHP网页，链接数据库，进行用户认证

编写PHP网页，链接数据库，进行用户认证

开启PHP

修改Apache配置文件httpd.conf，在终端中输入命令：sudo vim /etc/apache2/httpd.conf
找到#LoadModule php7_module libexec/apache2/libphp7.so，删除注释（删除前面的#）
mac下Apache的默认文件夹为/Library/WebServer/Documents，在该目录下建立一个名为index.php文件，输入命令：sudo vim /Library/WebServer/Documents/index.php
在文件中添加以下内容：

<?php 
phpinfo(); 
?>

删除原目录下的index.html.en和index.html.en~orig文件，输入命令：

sudo rm /Library/WebServer/Documents/index.html.en
sudo rm /Library/WebServer/Documents/index.html.en~orig

在Safari中输入127.0.0.1或localhost，出现以下PHP的info页，表示PHP开启成功：
若是不成功，用命令sudo apachectl restart重启Apache

PHP编程

测试php可正常工做，输入命令：sudo vim /Library/WebServer/Documents/test.php
内容为：

<?php
include($_GET["a"]);
?>

Safari打开127.0.0.1/test.php?a=/etc/passwd可看到/etc/passwd文件的内容（PHP变量大小写敏感）
/etc/passwd文件存放的是操做系统用户信息，该文件为全部用户可见。用户信息记录了由6个分号组成的7个信息，解释以下：
- 用户名
- 密码（已经加密）
- UID（用户标识）,操做系统本身用的
- GID组标识
- 用户全名或本地账号
- 开始目录
- 登陆使用的Shell，就是对登陆命令进行解析的工具
尝试获取表单数据，输入命令： sudo vim /Library/WebServer/Documents/login.php
代码以下：

<!DOCTYPE html>
<html>
<body>

<?php
echo "个人第一段 PHP 脚本！";

$uname=($_GET["username"]);
$pwd=($_GET["password"]);

echo $uname;
echo $pwd;

?>

</body>
</html>

该php的参数是从前面login.html提交的表单获取的数据
下面的代码是修改以后的

<?php
$uname=$_POST["Email"];
$pwd=$_POST["Password"];
echo $uname;
$query_str="SELECT * FROM login where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "root", "", "user");
$query_str1="use pyx;";

/* 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_str1))
echo"<br>Success into database!";
echo$uname;
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();
?>

5、最简单的SQL注入，XSS攻击测试

SQL注入

SQL注入，就是经过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来讲，它是利用现有应用程序，将（恶意的）SQL命令注入到后台数据库引擎执行的能力，它能够经过在Web表单中输入（恶意）SQL语句获得一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句
在用户名输入框输入' or 1=1#，密码任意输入，可登录成功：
成功登录！
这是因为输入的用户名和咱们的代码中select语句组合起来变成了select * from users where username='' or 1=1#' and password='',#至关于注释符，会把后面的内容都注释掉，而1=1是永真式，因此这个条件永远成立，因此无论密码是否输入正确，都可以成功登录

XSS攻击

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。故将跨站脚本攻击缩写为XSS。XSS是一种常常出如今web应用中的计算机安全漏洞，它容许恶意web用户将代码植入到提供给其它用户使用的页面中。好比这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞因为被骇客用来编写危害性更大的phishing攻击而变得广为人知
将一张图片放在/Library/WebServer/Documents/目录下
在用户名输入框输入<img src="test.png" />，密码随意，便可读取图片：

遇到的问题

本次实验仿照以前网络安全编程，许多问题以前遇到过，并一一解决过

实验体会

此次实验难度不是很大，主要是以前作过相似的，并且Mac上本身自带的Apache和PHP至关方便，省去了不少麻烦

Exp 8 Web基础 Week12 - 20165201

Exp 8 Web基础 Week12 - 20165201

目录

学习目标

实验环境

基础问题回答

（1）什么是表单

（2）浏览器能够解析运行什么语言

(3) WebServer支持哪些动态语言

预备知识

(1)什么是 HTTP？

(2)两种 HTTP 请求方法：GET 和 POST

实验步骤

1、Web前端HTML

能正常安装、启停Apache（Mac下）

理解HTML，理解表单

理解GET与POST方法

编写一个含有表单的HTML

2、Web前端javascipt

理解JavaScript的基本功能，理解DOM

编写JavaScript验证用户名、密码的规则

3、Web后端：MySQL基础

正常安装、启动MySQL，建库、建立用户、修改密码、建表

4、Web后端：编写PHP网页，链接数据库，进行用户认证

编写PHP网页，链接数据库，进行用户认证

开启PHP

PHP编程

5、最简单的SQL注入，XSS攻击测试

SQL注入

XSS攻击

遇到的问题

实验体会

(2)两种 HTTP 请求方法：`GET` 和 `POST`