Exp8 Web基础

时间 2019-12-12

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

原文原文链接

Web基础

什么是表单？

答：①表单是一个包含表单元素的区域，表单元素是容许用户在表单中（好比：文本域、下拉列表、单选框、复选框等等）输入信息的元素，表单在网页中主要负责数据采集功能，一个表单有三个基本组成部分：表单标签、表单域、表单按钮；②表单标签php

：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；③表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；④表单按钮：包括提交按钮、复位按钮和通常按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还能够用表单按钮来控制其余定义了处理脚本的处理工做。html

浏览器能够解析运行什么语言？

答：支持HTML（超文本标记语言）、XML（可扩展标记语言）以及Python、PHP、JavaScript、ASP等众多脚本语言。除了IE浏览器是基于系统内核的解析，如今大部分浏览器都是用浏览器内核解析脚本。所以如今大部分浏览器在不装插件的状况下只能解析JS脚本。前端

WebServer支持哪些动态语言？

答：JavaScript、ASP、PHP、Ruby等脚本语言，ASP基于IIS WEB SERVER，是微软的服务器端脚本技术，PHP基于APACHE WEB SERVER，与ASP有几分相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言。python

虽然php，jsp等确实写在html中，但在服务器返回给浏览器的并非这些.php，/.jsp文件，而是这些文件生成的html（字符串），python也有相似jsp的psp，但这就须要一些web服务器的特殊功能了（好比apache的mod_python模块）mysql

实验过程

1.环境配置

安装Apache

sudo apt-get install apache2
service apache2 start

/etc/apache2/apache2.conf 存储apache2的配置 web

/var/www/html 存储网页 sql

/var/log/apache2/error.log 存储报错信息数据库

这样按默认配置能够直接在80端口访问/var/www/html中的网页了。apache

若是配置有问题能够去apache2.conf 找到对应的参数进行修改。编程

2.前端编程

<html>
<script>

function inputTest(){
    alert(document.getElementById("ppp").value);  //获取id为ppp的元素的值并用alert窗口显示出来，就是上图的弹窗

    if (document.getElementById("ppp").value.length>4){　　　　//若是id为ppp的元素的值的长度大于4返回真，不然返回假，简单的密码格式规范
        return true
    } else {
            return false;
    }
}

    </script>
<body>
<form action="login.php" method="GET" onsubmit="return inputTest()">  //表单，提交后的action指向login.php，onsubmit提交表单时触发js脚本
    <input type="text" name="username" value="Please Input Your Username"/>  <br>　　//上图中第一个输入框
    <input type="password" name="password" value="default" id="ppp"/>  <br>　　　　　　//上图中第二个输入框，id为ppp
    <input type="submit" value="Login GET"/>  　　　　//按钮，点击提交
</form>
</body>
</html>

3.PHP测试

上面已经把表单的连接指向了login.php，下面就在login.php中编写一个简单的php测试。

php代码以下：

<html>
<body>
<?php
echo "个人第一段 PHP 脚本！";　　//输出"个人第一段 PHP 脚本"
$uname=($_GET["username"]);　　//从GET到的内容中获取username将其做为uname变量
$pwd=($_GET["password"]);　　//从GET到的内容中获取password将其做为pwd变量
echo $uname;　　//输出uname变量
echo $pwd;　　//输出pwd变量
?>
</body>
</html>

下面来看看结果

咱们可明显地看到服务器端的php文件发到客户端就变样了，不在有php脚本了，说明在php脚本是在服务器端就解析了的，而后将解析事后的html发送到客户端。

4.MySQL基础

开启sql服务/etc/init.d/mysql start

输入mysql -u root -p，并根据提示输入密码，默认密码为p@ssw0rd进入MySQL

此处能够修改本身的密码：
输入use mysql，选择mysql数据库
输入update user set password=PASSWORD("20151213") where user='root';
输入flush privileges;，更新权限

咱们先使用create database Guo;创建一个数据库；
使用show databases;查看存在的数据库；

使用use 库名;使用咱们建立的数据库：

接着使用create table 表名 (字段设定列表);创建数据表，数据表是数据库中一个很是重要的对象，一个数据库中可能包含若干个数据表；

create table Guo(username VARCHAR(20), password VARCHAR(32));

使用show tables查看存在的数据表：

使用insert into 表名 values('值1','值2','值3'...);插入数据；

insert into Guo values('guoyicai','20151213');

使用select * from 表名;查询表中的数据：

咱们还能够在MySQL中增长新用户，使用grant select(insert,update,delete) on 数据库.* to 用户名@登陆主机 identified by "密码";

grant select,insert,update,delete on Guo.* to gyc@localhost identified by "20151213"; #为数据库Guo增长一个新用户gyc，密码为20151213,而且赋予select,insert,update,delete四个操做权限

5.php+mysql

从新编辑login.php，改成如下内容。

<!DOCTYPE html>
<html>
<body>

<?php
$uname=($_GET["username"]);
$pwd=($_GET["password"]);
/* echo $uname; */
$query_str="SELECT * FROM Guo where username='{$uname}' and password='{$pwd}';";   //sql查询语句

/* echo "<br> {$query_str} <br>";*/

$mysqli = new mysqli("localhost", "gyc", "20151213", "Guo");　　　　　　//建立一个mysqli对象，面向对象使用数据库

/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}


/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){　　　　　　　　　　　　　　//若是符合query_str中的查询条件，则打印uname
        echo "<br> Wellcome login Mr/Mrs:{$uname} <br> ";
    } else {
        echo "<br> login failed!!!! <br> " ;
    }

    /* free result set */
    $result->close();
}


$mysqli->close();

?>

</body>
</html>

结果以下

6.SQL注入

由于已经知道sql语句是怎么写的，因此很容易能够经过sql注入绕过密码验证，

只须要将

SELECT * FROM Guo where username='{$uname}' and password='{$pwd}';
变成

SELECT * FROM Guo where username='' or 1=1;#' and password='{$pwd}';
这样随便用户名均可以绕过密码验证

7.XSS

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。故将跨站脚本攻击缩写为XSS。XSS是一种常常出如今web应用中的计算机安全漏洞，它容许恶意web用户将代码植入到提供给其它用户使用的页面中。好比这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞因为被骇客用来编写危害性更大的phishing攻击而变得广为人知。

能够编写下面这样的代码做为用户名输入

<a href="http://www.baidu.com">登陆错误，点击查看帮助</a> ' or  1=1;#

结果以下，若是用户点击了，就去咱们给的网址，固然也能够加入js脚本，直接执行不少操做。

实验体会

此次实验对我来讲确实有难度，由于没有这方面的知识，须要本身学html，js，php，mysql，还有web服务器和浏览器的工做机制，以及服务器经过sql语句与数据库通讯的过程。虽然作起来很难，但收获也很大，经过此次实验认清了web服务器和浏览器到底都在作哪些工做，还学到了几句sql语句，获益匪浅。