安全之-web前端基础

tingting01192026-04-14 11:20

一、php开发环境搭建

1.1 简介

web渗透针对与网站，那就要熟悉网站的运行和搭建。此处讲解环境搭建。

phpStudy是一个PHP调试环境的程序集成包。该程序包集成最新Apache+PHP+Mysql+phpMyAdmin+ZendOptimizer,一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序不仅包括PHP调试环境，还包括了开发工具、开发手册等等。

1.2 下载

#https://m.xp.cn/download

1.3 安装

windows标准安装，下一步下一步。

1.4 版本切换

1.5 其他选项菜单

1.6端口修改

二、css代码

复制代码 
*{
    margin: 0;
    padding: 0;
}
/*去掉整个网页空白页*/



.container{
    height: 100%;
    background-image: linear-gradient(to right,#a3fbf9,#eea1ee);
    /*创建一个表示两种或者多种颜色线性渐变的图片*/
}
/*设置背景颜色*/
body{
    text-align: center;
}

h1{
    font-size: 45px;
}
/*设置标题大小*/
a:link,a:visited{
    color: rgb(230, 0, 255, 0.35);
    text-decoration: none;
    /*超链接去掉下划线*/
}

a:hover{
    color: cyan;
    text-decoration: underline;
    /*鼠标防止超链接显示下划线*/
}
table{
    background-color: white;
    /*表格背景颜色*/
    margin-top: 160px;
    margin-left: 620px;
    /*修改整个表格位置大概属于中间位置*/
    width: 680px;
    height: 600px;
    /*修改整个表格大小*/
    border-radius: 20px;
    /*这个表格添加边框圆角效果*/
}
.login-wrapper{
    text-align: center;
}
/*文本居中显示*/
input{
    outline: none;
    /*去掉输入框点击后的边框聚焦效果*/
    width: 350px;
    border-bottom: 1px solid #dbdbdb;
    border-top: 0;
    border-left: 0;
    border-fight: 0;
    /*让输入框有下划线的效果*/
}
.login input{
    font-size: 20px;
    width: 200px;
    height: 40px;
    background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
    /*登录按钮背景*/
    color: #fff;
    /*登录两字颜色*/
    border-radius: 20px;
    /*边框圆角*/
}
::placeholder{
    font-size: 14px;
}

三、登录

复制代码 
## login.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="./aa.css">
    <link rel="icon" href="icon.ico" type="image/x-icon">
    <?php
    include "database.php";
    session_start();
    if(!empty($_SESSION['username'])){
        echo "<script>window.location.href='list.php'</script>";
    }
    function abc($mamba){
        $mamba = trim($mamba);
        $mamba = stripcslashes($mamba);
        $mamba = htmlspecialchars($mamba);
        return $mamba;
    }
    if (isset($_POST['submit'])) {
        $username = abc($_POST['username']);
        $password = abc($_POST['password']);
        $sql = "select password from user where username = '$username'";
        $huixian = mysqli_query($conn, $sql); //返回对象
        //var_dump($huixian);
        $aaa = mysqli_fetch_row($huixian);    //是一个数组
        //var_dump($aaa);
        if (!empty($aaa) && $aaa[0] == $password ){
            $_SESSION['username'] = $username;
            echo "<script>alert('login sucessfully');window.location.href='list.php'</script>";
        }else{
            echo "<script>alert('密码错误');</script>";
        }
    }

    ?>
</head>
<body class="container">
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" autocomplete="on">
    <table>
      <tr>
        <td class="login-wrapper"><h1>登录</h1></td>
      </tr>
      <tr>
        <td><label>
          <input type="text" name="username" placeholder="用户名"/>
        </label></td>
      </tr>
      <tr>
        <td><label>
          <input type="password" name="password" placeholder="密码" />
        </label></td>
      </tr>

      <tr>
        <td><span class="login"><input type="submit" name="submit" value="登录"> </span></td>
      </tr>
      <tr>
        <td><span id="post">没有账号?<a href="zhuce.php">注册</a> </span></td>
      </tr>
    </table>
  </form>
</body>
</html>

四、注册

复制代码 
##zhuce.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta name="registry" content="这是注册页面" charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="./aa.css">
    <link rel="icon" href="icon.ico" type="image/x-icon">
    <?php
        include "database.php";
        $usernameErr = $passwordErr = $querenpasswordErr = $phoneErr = $emailErr = "";
        $username = $password =$querenpassword = $phone = $email = "";
        function abc($mamba){
            $mamba = trim($mamba);
            $mamba = stripslashes($mamba);
            $mamba = htmlspecialchars($mamba);
            return $mamba;
        }
        if (isset($_POST['submit'])){
            $username = abc($_POST['username']);
            $password = abc($_POST['password']);
            $querenpassword = abc($_POST['querenpassword']);
            $phone = abc($_POST['phone']);
            $email = abc($_POST['email']);



            if(!empty($username)){
                if(!preg_match("/^[a-zA-Z1-9 ]*$/",$username)){
                    $usernameErr = "只能是字母加空格";
                }elseif(!empty($password)){
                    if(!preg_match("/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/",$password)){
                        $passwordErr = "8-20(英文/数字/符号)至少两种或者两种以上组合";
                    }elseif(!empty($querenpassword)){
                        if($querenpassword == $password){
                            if(!empty($phone)){
                                if(!preg_match("/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/",$phone)){
                                    $phoneErr = "电话号码格式不正确";
                                }elseif(!empty($email)){
                                    if(!preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/",$email)){
                                        $emailErr = "邮箱格式不正确";
                                    }else{
                                        //$usersql = "select username form user where username = '$username'";
                                        $usersql = "select username form user where username = ".$username;
                                        //对象,对象不能做判断
                                        $userselect = mysqli_query($conn,$usersql);
                                        //var_dump($userselect);
                                        //转换成数组
                                        $userall = mysqli_fetch_row($userselect);
                                        var_dump($userall);
                                        if (!empty($userall)){
                                            echo "<script>alert('此账号已存在');window.history.back(-1)</script>";
                                        }else{
                                            $charu = "insert into user(username,password,phone,email)".
                                                "value ('$username','$password','$phone','$email')";
                                            mysqli_query($conn,$charu);
                                            echo "<script>alert('注册成功');window.location.href='login.php'</script>";
                                        }
                                    }
                                }else{
                                    $emailErr = "邮箱不能为空";
                                }
                            }else{
                                $phoneErr = "手机不能为空";
                            }
                        }else{
                            $querenpasswordErr = "两次密码不一致";
                        }
                    }else{
                        $querenpasswordErr = "确认密码不能为空";
                    }
                }else{
                    $passwordErr = "密码不能为空";
                }
            }else{
                $usernameErr = "用户名不能为空";
            }
        }

    ?>
</head>
<body class="container">
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" autocomplete="on">
      <table>
          <tr>
              <td class="login-wrapper"><h1>注册</h1></td>
          </tr>
          <tr>
              <td>
                  <label>
                      <input type="text"  name="username" placeholder="用户名" value="<?php echo $username; ?>"/>
                      <span style="color: red; font-size: 4px;"><?php echo $usernameErr; ?></span>
                  </label>
              </td>
          </tr>
          <tr>
              <td>
                  <label>
                      <input type="password" name="password" placeholder="密码" value="<?php echo $password; ?>" />
                      <span style="color: red; font-size: 4px;"><?php echo $passwordErr;?></span>
                  </label>
              </td>
          </tr>
          <tr>
              <td>
                  <label>
                      <input type="password" name="querenpassword" placeholder="确认密码" value="<?php echo $querenpassword;?>" />
                      <span style="color: red; font-size: 4px;"><?php echo $querenpasswordErr;?></span>
                  </label>
              </td>
          </tr>
          <tr>
              <td>
                  <label>
                      <input type="tel" name="phone" placeholder="电话号码" maxlength="100" value="<?php echo $phone; ?>"/>
                      <span style="color: red; font-size: 4px;"><?php echo $phoneErr;?></span>
                  </label>
              </td>
          </tr>
          <tr>
              <td>
                  <label>
                      <input type="youxiang" name="email" placeholder="email" value="<?php echo $email; ?>"/>
                      <span style="color: red; font-size: 4px;"><?php echo $emailErr; ?></span>
                  </label>
              </td>
          </tr>

          <tr>
              <td><span class="login"><input type="submit" name="submit" value="注册"/> </span></td>
          </tr>
          <tr>
              <td><span id="post">已有账号？我要<a href="login.php">登录</a> </span></td>
          </tr>
      </table>
  </form>
</body>
</html>

五、修改

复制代码 
##list.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="./aa.css">
    <?php
    include "database.php";
    session_start();

    if(empty($_SESSION['username'])){
        echo "<script>alert('你还没有登录');window.location.href='login.php'</script>";
    }else{
        $username = abc($_SESSION['username']);
        $sql = "select * from user where username = '$username'";
        $sqlzz = mysqli_query($conn, $sql);
        $all = mysqli_fetch_row($sqlzz);
        //var_dump($all);
        if(isset($_POST['submit'])){
            $password = abc($_POST['password']);
            $phone = abc($_POST['phone']);
            $email = abc($_POST['email']);
            $updatesql = "UPDATE user SET password = '$password', phone = '$phone', email= '$email' where username = '$username'";
            $aa = mysqli_query($conn, $updatesql);
            var_dump($aa);
            echo "<script>alert('修改成功');window.history.back(-1)</script>";
        }
        if(isset($_POST['outlog'])){
            session_destroy();
            header("location:login.php");
        }
    }

    function abc($mamba){
        $mamba = trim($mamba);
        $mamba = stripcslashes($mamba);
        $mamba = htmlspecialchars($mamba);
        return $mamba;
    }
    ?>
</head>
<body class="container">
<form action="#" method="post" autocomplete="on">
    <table>
        <tr>
            <td class="login-wrapper"><h1>个人中心</h1></td>
        </tr>
        <tr>
            <td>
                <label>
                    <span>欢迎 <?php echo $username;?> 用户</span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    修改原密码: <input type="password" name="password" placeholder="密码" value="<?php echo $all[2];?>"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    修改手机号: <input type="tel" name="phone" placeholder="手机号码" value="<?php echo $all[3]?>"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    修改邮箱: <input type="email" name="email" placeholder="email" value="<?php echo $all[4];?>"/>
                </label>
            </td>
        </tr>


        <tr>
            <td><span class="login"><input type="submit" name="submit" value="修改"/></span></td>
        </tr>
        <tr>
            <td><span id="post"><input type="submit" name="outlog" value="退出登录"/></span></td>
        </tr>
    </table>
</form>
</body>
相关推荐
quxuexi19 小时前
网络通信安全与可靠传输：从加密到认证，从状态码到可靠传输
java·安全·web
曲幽1 天前
FastAPI+Vue：文件分片上传+秒传+断点续传，这坑我帮你踩平了！
python·vue·upload·fastapi·web·blob·chunk·spark-md5
身如柳絮随风扬2 天前
Servlet：访问流程、核心接口与生命周期
java·servlet·web
钛态2 天前
前端WebSocket实时通信：别再用轮询了！
前端·vue·react·web
爱学习的程序媛2 天前
浏览器内核揭秘：JavaScript 和 UI 的“主线程争夺战”
前端·性能优化·浏览器·web
曲幽4 天前
FastAPI自动生成的API文档太丑？我花了一晚上把它改成了客户愿意付费的样子
python·fastapi·web·swagger·openapi·scalar·docs
曲幽5 天前
告别手写 API 胶水代码：FastAPI 与 Vue 的“契约自动机” OpenAPI 实战
python·typescript·vue·fastapi·web·swagger·openapi·codegen
里欧跑得慢6 天前
Flutter 导航路由：构建流畅的应用导航体验
前端·css·flutter·web
数据知道6 天前
claw-code 源码详细分析：Command Graph 分段——复杂 CLI 产品如何把命令关系从脑子里搬到纸上？
ai·web·claw code
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03GitHub 镜像站点04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05GPT-6核心能力解析及与现有主流大模型对比06免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手07LLM Wiki：让大模型替你打理知识库的完整指南08从限购到畅通：GLM-5.1 Coding Plan接入攻略09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）