常见的网络攻击及解决方案（附源码）

最新推荐文章于 2025-07-03 09:47:58 发布

『业精于勤』

最新推荐文章于 2025-07-03 09:47:58 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：计算机网络文章标签：网络攻击

本文链接：https://blog.youkuaiyun.com/qq_39816673/article/details/89788764

简介

作为前端攻城狮，web安全是每个开发人员必须了解的，这也是面试经常会被问到的问题，本文我就将我所了解的常见攻击方式以及预防，和大家做个分享，如有不对的地方，欢迎大神指导。
首先，浏览器的同源策略（这个我在之前跨域的文章中有讲，有不明白的朋友可以先看下那篇文章）是浏览器安全的基础，许多客户端脚本攻击，都需要遵顼这一法则，因此理解同源策略对于客户端攻击有着重要意义，一旦同源策源出现漏洞被绕过，将带来非常严重的后果，很多基于同源策源制定的安全方案都将失去效果，那么常见的Web攻击有哪些呢？如下所示

XSS
- DOM Based
- 存储型
- 反射型
CSRF
点击劫持

以上就是常见的客户端脚本的几种攻击方式，当然服务端也存在安全问题的，由于我对服务端不是很熟悉，所以这里就不介绍了~~

XSS攻击

XSS(Cross Site Script)跨站脚本攻击，如字名，字母首拼明明是CSS，为什么叫XSS呢，这里是因为为了和咱们的伙伴CSS做个区分，所以用XSS来表示跨站脚本攻击,通常XSS是指黑客通过“HTML注入”篡改了网页，插入了恶意的代码，从而在用户浏览网页时，控制用户浏览器的一种攻击，常见的有DOM Based，存储型，反射型。

DOM Based XSS

通过修改页面的DOM节点形成的XSS，称之为DOM Based XSS,如下代码：
前端代码

    <div id="content"></div>
    <input type="text" id="text">
    <button onclick="test()">点击</button>
    <script>
        function test(){
   
   
            var str=document.getElementById("text").value;
            document.getElementById("content").innerHTML=`<a href='${
     
     str}'>testLink</a>`
        }
    </script>

服务端：

这里我是用node搭的站点

const express = require("express");

const expressArtTemplate=require('express-art-template')

const bodyParser = require('body-parser');

const app = express()

app.engine('html', expressArtTemplate);

app.use(bodyParser.urlencoded({
   
    extended: false }))

app.use(bodyParser.json())

app.get("/", (req, res) => {
   
   
   res.render("DomBased.html")
})
app.listen("1596", () => {
   
   
    console.log("监听成功.....")
})

在test函数中，修改了页面DOM的节点，通过innerHTML把一段用户数据当作html写入到页面当中，这就造成了DOM Based XSS。
然后这时候再input框输入' onclick=alert('xss') //，首先用单引号闭合掉href的第一个单引号，然后插入一个onclick事件，最后再用注释符”//“注释掉第二个单引号，然后点击这个生成的链接，效果如下:
在这里插入图片描述
这里还有第二种情况，就是闭合掉a标签，插入一个img标签，利用onerror触发。
input输入'> <img src=# onerror=alert('xss') /><'，
DOM节点就变成了如下:

结果效果如下：

存储型XSS

存储型XSS会把用户用户输入的数据“存储”到服务端，这种xss具有很强的稳点性，比较常见的场景就是黑客写一篇含有恶意代码的博客，那么文章发表后，所有访问的用户都会在他们的浏览器执行这段代码，因为那一段恶意的代码已经被黑色保存在了服务端，所以这种XSS攻击就叫做“存储型XSS”，存储型XSS也叫做“持久型XSS”，因为从效果上来说，它存在的时间比较长。

这里我是用node最基本的写法模拟了很简单的例子，因为最基本的写法是没有过滤XSS攻击的

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/_bootstrap@3.4.1@bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <!--发表