web入门

用户93135600274
120 阅读7分钟

[TOC]

web概述

web系统

  1. Web 系统是指我们通过浏览器访问的各种⽹站与 Web 应⽤的总称。⽐如你登录邮箱、浏览购物⽹站、刷微博，这些背后都有⼀套完整的Web 系统在⽀撑。

  2. 四大部分：

    1. 客户端（前端）= 客户点菜
    2. 通信层（协议）= 服务员
    3. 服务器端（后端）= 厨房厨师
    4. 数据层（数据库）= ⻝材仓库

image-20250705163947351.png

Web安全与架构的关系

image-20250705164233131.png

web开发入门

Web开发四阶段核心模块

第⼀阶段：HTML - 网页骨架搭建

HTML简介

*   **<!DOCTYPE html>** 声明为 HTML5 文档
*   **<html>** 元素是 HTML 页面的根元素
*   **<head>** 元素包含了文档的元（meta）数据，如 **<meta charset="utf-8">** 定义网页编码格式为 **utf-8**。
*   **<title>** 元素描述了文档的标题
*   **<body>** 元素包含了可见的页面内容
*   **<h1>** 元素定义一个大标题
*   **<p>** 元素定义一个段落

基础标签 - HTML 基础 | 菜鸟教程 (⽹⻚源码暴露敏感信息⻛险)

1. <h1>这是一个标题</h1>//HTML标题

2. <p>这是一个段落。</p>//HTML段落

3. <p><a href="https://www.microsoft.com/">本文本</a> 一个指向链接。//HTML 链接

4. <img src="/images/logo.png" width="258" height="39" />//HTML 图像

表单交互 - HTML 表单 | 菜鸟教程 (攻击⼊⼝：未过滤的表单输⼊可植⼊恶意代码)

<h2>表单</h2>

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text"//文本类型 id="name" name="name" required>//普通输入框

    <br>//换行

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password"//隐藏类型 id="password" name="password" required>//密码输入框

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="rad"//单选按钮类型 id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked//默认选择>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>//选项
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit"//提交类型 value="提交">
</form>

</body>
</html>

⻚⾯结构 - HTML 布局 | 菜鸟教程 (合理结构提升代码可维护性)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px"//全局宽度>

<div id="header" style="background-color:#FFA500;"//背景颜色>
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>
</html>

第⼆阶段：JavaScript - ⽹⻚⾏为控制

基础语法 - JavaScript 语法 | 菜鸟教程 (代码逻辑错误导致功能失效)

  1. HTML 中的 Javascript 脚本代码必须位于 与 标签之间。

  2. JavaScript 函数语法

    function functionname()
{
    // 执行代码
}

  3. JavaScript 语句

    document.getElementById("demo").innerHTML = "你好 Dolly";

事件响应 - JavaScript 事件 | 菜鸟教程 (onclick事件可能被恶意利⽤)

  1. HTML 页面完成加载
  2. HTML input 字段改变时
  3. HTML 按钮被点击
<button onclick="displayDate()">现在的时间是?</button>

DOM操作 - JavaScript HTML DOM | 菜鸟教程 (⾼危操作：innerHTML可执⾏恶意脚本)

  1. HTML DOM 树

image-20250705191704375.png

  1. 通过 id 查找 HTML 元素
var x=document.getElementById("intro");

3. 通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

4. 通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

第三阶段：MySQL - 数据存储核⼼

数据库创建 - MySQL 创建数据库 | 菜鸟教程 (默认root账户⻛险)

  1. 建数据库的基本语法
CREATE DATABASE 数据库名
  CHARACTER SET utf8mb4//指定字符集
  COLLATE utf8mb4_general_ci;//指定排序规则

2. 使用 PHP 来创建一个数据库

<?php
$dbhost = 'localhost';  // mysql服务器主机地址
$dbuser = 'root';            // mysql用户名
$dbpass = '123456';          // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
  die('连接错误: ' . mysqli_error($conn));
}
echo '连接成功<br />';
$sql = 'CREATE DATABASE RUNOOB';
$retval = mysqli_query($conn,$sql );
if(! $retval )
{
    die('创建数据库失败: ' . mysqli_error($conn));
}
echo "数据库 RUNOOB 创建成功\n";
mysqli_close($conn);
?>

表结构设计 - MySQL 创建数据表 | 菜鸟教程 (密码明⽂存储=致命漏洞)

  1. 创建一个用户表users
CREATE TABLE users (
    id INT AUTO_INCREMENT//数据类型 PRIMARY KEY//主键,
    username VARCHAR(50) NOT NULL//非空,
    email VARCHAR(100) NOT NULL,
    birthdate DATE,
    is_active BOOLEAN DEFAULT TRUE//默认true
);

2. 使用了PHP脚本来创建数据表

<?php
$dbhost = 'localhost';  // mysql服务器主机地址
$dbuser = 'root';            // mysql用户名
$dbpass = '123456';          // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
    die('连接失败: ' . mysqli_error($conn));
}
echo '连接成功<br />';
$sql = "CREATE TABLE runoob_tbl( ".
        "runoob_id INT NOT NULL AUTO_INCREMENT, ".
        "runoob_title VARCHAR(100) NOT NULL, ".
        "runoob_author VARCHAR(40) NOT NULL, ".
        "submission_date DATE, ".
        "PRIMARY KEY ( runoob_id ))ENGINE=InnoDB DEFAULT CHARSET=utf8; ";
mysqli_select_db( $conn, 'RUNOOB' );
$retval = mysqli_query( $conn, $sql );
if(! $retval )
{
    die('数据表创建失败: ' . mysqli_error($conn));
}
echo "数据表创建成功\n";
mysqli_close($conn);
?>

SQL基础操作 - MySQL 及 SQL 注入 | 菜鸟教程 (拼接SQL语句的危险性)

  1. 所谓 SQL 注入，就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。

  2. MySQL 注入是指攻击者通过恶意构造的输入，成功地执行恶意的 SQL 查询，这通常发生在用户输入未经适当验证或转义的情况下，攻击者试图在输入中插入 SQL 代码，以执行意外的查询或破坏数据库。

  3. 防范 SQL 注入：

    • 使用参数化查询或预编译语句： 使用参数化查询（Prepared Statements）可以有效防止 SQL 注入，因为它们在执行查询之前将输入数据与查询语句分离。

    • 输入验证和转义： 对用户输入进行适当的验证，并使用合适的转义函数（如mysqli_real_escape_string）来处理输入，以防止恶意注入。

    • 最小权限原则： 给予数据库用户最小的权限，确保它们只能执行必要的操作，以降低潜在的损害。

    • 使用ORM框架： 使用对象关系映射（ORM）框架（如Hibernate、Sequelize）可以帮助抽象 SQL 查询，从而降低 SQL 注入的风险。

    • 禁用错误消息显示： 在生产环境中，禁用显示详细的错误消息，以防止攻击者获取有关数据库结构的敏感信息。

数据类型 - MySQL 数据类型 | 菜鸟教程 (类型错误导致数据异常)

使用burpsuite抓包

1. burpsuite使用

image-20250705194925245.png

2. 用burpsuite抓包并分析dvwa靶场登陆包

1. 搭建漏洞测试环境（DVWA）

# ⼀键启动Damn Vulnerable Web App
docker run -d -p 80:80 vulnerables/web-dvwa

2. ping通主机和虚拟机

image-20250705195341804.png

3. 用主机IP登录网站，查看抓包信息

image-20250705195453818.png

4. 分析抓包信息

image-20250705195706683.png

  1. HTTP请求结构
GET /index.html HTTP/1.1 ← 请求行：请求方法+文件路径，POST请求会发送数据
Host: www.example.com ← 请求头（域名）
User-Agent: Chrome/114.0
Accept: text/html
Cookie: session_id=abc123 ← 重要！用于连续请求的身份识别
referer:					← 从哪个网站跳转过来
							← 空⾏
username=john&password=1234 ← 请求体（POST/PUT时存在）

2. HTTP响应结构

HTTP/1.1 200 OK ← 状态⾏（状态码）
Content-Type: text/html ← 响应头
Set-Cookie: session_id=xyz789 ← 重要！
Content-Length: 1024
					← 空⾏
<!DOCTYPE html> ← 响应体
<html>...</html>

3. 关键状态码

状态码 含义 示例场景

200 成功 ⻚⾯加载成功

301 永久重定向 ⽹站域名变更

302 临时重定向 登录后跳转

404 资源未找到 错误URL访问

403 禁⽌访问 ⽆权限访问资源

500 服务器内部错误 后端代码崩溃

  1. 重要头部字段

Cookie 客户端存储的会话信息 会话劫持⽬标

Set-Cookie 服务器设置客户端Cookie 安全属性设置点

Content-Type 响应内容的MIME类型 XSS防护关键

Authorization 身份验证凭证 敏感信息泄露⻛险

Referer 请求来源⻚⾯ 隐私泄露/CSRF检测

User-Agent 客户端浏览器信息 浏览器指纹识别

AI使用实例：留言板开发

1. 在Visual Studio Code上安装roo code

image-20250705234851359.png

2. 配置roo code

image-20250705234957222.png

  1. 提供商选OpenAI Compatible。
  2. 在轨迹流动官网文档中心处复制基础 URL。

image-20250705235625960.png

  1. 复制轨迹流动的API密钥

  2. 选择AI模型

3. 向AI提供提示词

  1. ⽤HTML表格设计留⾔展示区
  2. 通过JS表单验证过滤
  3. ⽤PHP连接MySQL存储数据
  4. 设计登录功能，留⾔时显示⽤户名

（打开自动批准）

image-20250705235921904.png

4. 修改数据库账号密码，用Navicat创建数据库

image-20250706000510781.png 将文件内容复制到Navicat执行

5. 用phpstudy创建网站，测试网站运行

  1. 将网站根目录部署为AI生成文件的文件夹

  2. 打开网站测试：

image-20250706000758744.png

avatar
文章
阅读
粉丝