前端注入（xss csrf ）

一、前置知识

1.1前后端交互

      在一个web服务中，有前端和后端之分。前端主要是呈现给用户，后端是处理前端用户发出的请求或者可以理解为用户在浏览器中对前端页面的一系列操作。

1.2前端和后端又是怎么交互的呢？

     前端主要用的是标记语言，html，css，js

html：

<form action="login.php" method="post">
    <h1>用户登入</h1>
    <div class="form-group">
        <label for="username">账户：</label>
        <input type="text" name="username" id="username" required>
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" required>
    </div>
    <input type="submit" value="登录">
</form>

css：

<style>
form {
            position: relative;
            z-index: 1;
            background-color: rgba(255, 255, 255, 0.1); 
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); 
            width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px solid transparent; 
            transform: rotateY(10deg);
            animation: rotate 10s infinite alternate; 
            opacity: 0; 
            animation: fadeIn 1s forwards; 
        }
</style>

js:

<script> 
   function animate() {
        if (glowPoints.length < 200) { // 控制光点数量
            createGlowPoint();
        }
        updateGlowPoints();
        requestAnimationFrame(animate);
    }
</script>

以上代码，主要是html的内容有作用我们创建一个用户登入的效果，用户访问到我们的网站进行登入，当用户点击登入后，表单通过POST提交方式给服务器，等待服务器的处理。

后端常用的语言有，c，python，php，java，go

php：

$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

这里我们在服务上写了一个代码，用于接受用户发起的请求。常见用接受请求方式有，GET,POST，REQUESTE。

if ($username='123' and $password='123') {
    // 登录成功
    echo "登录成功";
} else {
    // 登录失败
    echo "登录失败：用户名或密码错误";
}

这里我们先写死判断条件（后面可以结合数据库在动态查询，这里我们首先用两个变量接受了前端用户发起的请求，再用if函数做出判断。

php+mysql：

<?php
// 从前端获取用户名和密码
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

// 数据库连接参数
$host = '127.0.0.1'; // 数据库主机名
$dbname = 'test'; // 数据库名
$user = 'test'; // 数据库用户名
$pass = 'test123'; // 数据库密码

// 创建连接
$conn = new mysqli($host, $user, $pass, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

$stmt = $conn->prepare("SELECT * FROM test WHERE username = ? AND password = ?");
echo $stmt;
$stmt->bind_param("ss", $username, $password); // "ss"

// 执行查询
$stmt->execute();
$result = $stmt->get_result();

// 检查查询结果
if ($result->num_rows > 0) {
    // 登录成功
    echo "登录成功";
} else {
    // 登录失败
    echo "登录失败：用户名或密码错误";
}

// 关闭预处理语句
$stmt->close();
$conn->close();
?>

这里是通过php接受到post请求，我们在本地搭建了mysql服务，通过php去连接到我们的数据库，将mysql在数据库中查到的信息，在做if判断将处理的结果在输出给前端用户。

总结一下：前端用户----php/pyjon/java去接受前端用户的请求---在通过后端语言处理这个请求---一般数据都是存储在数据库中的，所有都会去连接数据库。

1.3什么是cookie，session，token，SOP，Ajax

    前面我们大致了解了，web服务器的通信流程。那下面我们还得了解一下什么是cookie，session，token，Ajax。由于http协议是无状态的，每一次请求都是独立了，服务器不会记住用户之前的请求。所有诞生cookie，seeseion，token

1.3.1 cookie：

    它是用来标识辨别用户的身份信息，跟踪用户的登录状态和会话信息。当用户访问一个网站时，服务器通过HTTP响应头中的

Set-Cookie

字段向浏览器发送Cookie，然后浏览器会将cookie存储在本地。后续请求都带上cookie字段，cookie存在客户端一旦cookie被篡改后，服务器九不认识了。所以cookie不能完全解决状态保存。

1.3.2 session：

    当用户首次访问网站时，服务器会创建一个新的Session，并为其分配一个唯一的Session ID。这个ID通常以Cookie的形式发送到用户的浏览器。在用户后续的请求中，浏览器会自动将Session ID作为Cookie发送回服务器。服务端只需要将保存在服务器的seesioin内容返回给客户都即可，缺点，占用服务端资源 ，集群无法传递，跨域无法传递。

    区别：cookie与seesion，cookie是保存在客户端，seesion是保存在服务器端，只有seesionid是保存在客户端。客户端只需发送Session ID，服务器根据这个ID查找相应的Session数据。

1.3.3token：

    一样前端发起请求，后端认证成功后，创建一个jwt 字符串 ，再将创建的jwt 返回前端，前端拿到jwt的token，通过b64解码即可，后续请求只需要带上响应的 jwt token值，传入后端，后端对jwt 进行解密 ，验证signature，信息没有被篡改就放行。即可起到状态保存效果

（jwt json web token 将json数据加密之后的字符串 ---它有三段数据，1.头部 2.数据载体 3.1（比B64）+2(B64)+自己设置的key（私钥） 一起进行b64加密 ）

1.3.4SOP(同源策略）：

   SOP 是一种浏览器的安全机制，用于限制不同来源之间的交互。**同源**是指在URL的协议、域名和端口完全相同的情况下，才被认为是同源。---------同站点下访问的目录是满足SOP的。

1.3.5Ajax：

    它是异步传输的技术，作用是在不用刷新页面的情况下发送请求（对用户来说是无感的），常见XMLHttpRequest：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);  // true 表示异步
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);  // 处理服务器响应
    }
};
xhr.send();

二、xss

三、csrf

四、xss利用

五、csrf利用----静等一下，有时间再写，以上有什么说的不对的地方，望师傅们指点！！！