当前位置：首页 > news >正文

深入理解前端安全：CSRF与XSS攻击详解

news 来源：原创 2025/8/6 18:45:40

引言

在Web开发的世界里，安全性就像是房子的门锁。你可能觉得它不显眼，但一旦没了它，麻烦可就大了！本文将深入探讨两大前端安全威胁：CSRF（跨站请求伪造）和XSS（跨站脚本攻击）。通过生动的实例和实用的防御策略，让我们一起踏上这段“安全大冒险”吧！

一、CSRF攻击详解

1.1 什么是CSRF？

CSRF（Cross-Site Request Forgery，跨站请求伪造），听起来像个高大上的术语，但其实它就是恶搞用户的日常操作。攻击者通过引诱已认证用户访问恶意网站，利用用户的身份发起未授权请求。结果？用户可能会无意中执行一些危险操作，比如转账、修改密码等。

1.2 CSRF攻击原理

攻击者设计一个恶意页面，当用户在浏览器中访问时，浏览器会自动携带当前会话的认证信息（如Cookie）向目标网站发起请求。想象一下，你正在银行页面处理业务，突然跳出来一个“银行”链接，点击后转账到攻击者账户，连你都没反应过来！

经典案例：银行转账

<!-- 恶意网站中的代码 -->
<img src="https://your-bank.com/transfer?to=attacker&amount=10000" width="0" height="0">

只要已登录银行账户的用户点击了这个“看似无害”的图片，就会触发转账操作。浏览器会自动带上当前会话的Cookie，直接把钱转给攻击者。

1.3 更多CSRF示例

示例1：修改用户信息

<form action="https://social-media.com/update-profile" method="POST"><input type="hidden" name="email" value="hacker@example.com"><input type="hidden" name="password" value="newpassword">
</form>
<script>document.forms[0].submit();</script>

示例2：社交媒体发帖

fetch('https://social-media.com/post', {method: 'POST',body: JSON.stringify({content: 'Check out this scam site!'}),credentials: 'include'
});

1.4 CSRF防御措施

CSRF Token：防止恶意请求的最好方法之一是引入CSRF Token。每个表单都带有一个随机生成的token，服务器验证该token才允许执行请求。
```
<form action="/transfer" method="POST"><input type="hidden" name="_csrf" value="随机生成的token">
</form>
```
SameSite Cookie属性：确保Cookie只能在当前站点下发送，减少跨站点伪造请求的风险。
```
Set-Cookie: sessionid=xxxx; SameSite=Strict; Secure; HttpOnly
```

检查Referer/Origin头部：可以验证请求来源，确保请求来自可信的页面。

if (request.headers.referer !== 'https://yourdomain.com/') {return res.status(403).send('Forbidden');
}

关键操作二次验证：如短信验证码、密码确认等，确保操作的合法性。

二、XSS攻击详解

2.1 什么是XSS？

XSS（Cross-Site Scripting，跨站脚本攻击）就像是Web页面上的“病毒”，攻击者通过注入恶意脚本到网页，借此窃取数据或执行不法行为。不同于CSRF，它直接攻击浏览器环境，让用户的浏览器成为攻击的“战场”。

2.2 XSS分类与示例

2.2.1 存储型XSS

特点：恶意脚本在目标服务器上被永久存储，所有访问该页面的用户都会受到影响。

案例：论坛评论注入恶意脚本

用户评论内容：<script>stealCookie()</script>

当其他用户查看评论时，恶意脚本便会执行，窃取他们的Cookie等敏感信息。

2.2.2 反射型XSS

特点：恶意脚本作为请求的一部分，服务器将其“反射”回响应中。

案例：搜索功能漏洞

https://vulnerable-site.com/search?q=<script>alert(1)</script>

攻击者将恶意脚本注入搜索查询中，当服务器返回结果时，浏览器执行脚本，导致潜在的危害。

2.2.3 DOM型XSS

特点：完全在客户端发生，不涉及服务器。攻击者通过改变页面的DOM结构来注入恶意脚本。

案例：不安全的innerHTML使用

document.getElementById('output').innerHTML = userInput;

当用户输入包含恶意脚本时，这段代码会将恶意脚本渲染到页面上，从而执行攻击。

2.3 更多XSS攻击向量

通过图片标签：利用onerror事件触发脚本。
```
<img src="x" onerror="恶意代码">
```

通过CSS：在背景中注入JavaScript。

<div style="background:url('javascript:恶意代码')">

通过HTML属性：如<a href="javascript:恶意代码">点击我</a>。

2.4 XSS防御措施

输入验证与过滤：确保不允许注入恶意脚本。可以通过正则表达式等手段清除或过滤输入中的不安全字符。
```
function sanitize(input) {return input.replace(/<script.*?>.*?<\/script>/gi, '');
}
```

输出编码：对输出内容进行编码，避免恶意脚本被当作HTML标签解析。

function htmlEncode(str) {return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

Content Security Policy (CSP)：通过CSP来限制页面加载的资源来源，防止恶意脚本的执行。
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
```
使用安全API：避免使用不安全的API，如innerHTML，转而使用textContent等更安全的方式。
```
// 不安全的
element.innerHTML = userInput;// 安全的
element.textContent = userInput;
```

三、CSRF与XSS对比

特性	CSRF	XSS
攻击目标	利用用户身份执行操作	窃取数据或执行恶意脚本
是否需要用户登录	是	不一定
攻击方式	伪造请求	注入脚本
影响范围	特定操作	整个页面/应用
防御重点	验证请求来源	输入输出过滤

四、综合防御策略

前端防御：
- 使用现代框架（React/Vue等）的内置防护
- 避免使用eval()、innerHTML等危险API
- 实现CSP策略
后端防御：
- 实现CSRF Token机制
- 严格验证所有输入
- 设置安全的HTTP头部
运维配置：
- 启用HTTPS
- 设置安全的Cookie属性
- 定期安全审计

五、真实案例分析

案例1：某社交平台CSRF漏洞

攻击者构造虚假“点赞”请求，导致用户无意中为恶意内容点赞。最终，该漏洞被及时修复，避免了大规模的用户操作被滥用。

案例2：电商网站XSS漏洞

攻击者通过商品评价注入脚本，窃取访问者的支付信息。幸好，安全团队迅速发现并修复了漏洞，避免了大量财务损失。

结语

CSRF与XSS攻击并不新鲜，但它们依然是攻击者的“最爱”。只有通过扎实的前端与后端防护、有效的输入输出验证和对安全细节的细致关注，才能在这场网络“战争”中立于不败之地。网络安全不仅仅是“加个锁”，更是保持警觉、不断强化防御的持续过程。

深入理解前端安全：CSRF与XSS攻击详解

引言在Web开发的世界里，安全性就像是房子的门锁。你可能觉得它不显眼，但一旦没了它，麻烦可就大了！本文将深入探讨两大前端安全威胁：CSRF（跨站请求伪造）和XSS（跨站脚本攻击&#xf…...

编程日记 2025/8/6 18:45:40

spring-batch批处理框架(2)

文章目录八、作业控制8.1 作业启动8.1.1 SpringBoot 启动8.1.2 Spring 单元测试启动8.1.3 RESTful API 启动 8.2 作业停止方案1：Step 步骤监听器方式方案2：StepExecution停止标记 8.3 作业重启8.3.1 禁止重启8.3.2 限制重启次数8.3.3 无限重启九、Item…...

编程日记 2025/8/5 1:33:38

[Java · 初窥门径] Java 注释符

🌟 想系统化学习 Java 编程？看看这个：[编程基础] Java 学习手册 0x01：Java 注释符简介在编写程序时，为了使代码易于理解，通常会为代码加一些注释。Java 注释就是用通俗易懂的语言对代码进行描述或解释&a…...

编程日记 2025/8/6 14:25:49

linux下C++性能调优常用的工具

性能优化的常见流程发现问题--->定位问题--->解决问题--->验证问题发现问题的常见工具 1.定位内存问题 top指令，发现占用内存多的线程 asan 发现内存问题。 2.定位cpu问题 top指令，发现占用cpu多的进程，线程一般对内存和…...

编程日记 2025/8/6 19:47:47

MinnowBoard MAX单板UEFI BIOS代码编译教程

此教程用于UEFI EDK2代码的研究，虽然EDK2框架代码开源，但是都是在模拟器上跑仿真，差点意思，搞过嵌入式大的应该有一个共识，是骡子是马，你得把板子点亮啊。MinnowBoard MAX单板是intel10多年前发布的软硬件全…...

编程日记 2025/8/3 12:57:16

真实波幅策略思路

该策略是一种基于ATR（Average True Range）指标的交易策略，主要用于期货市场中的日内交易。策略的核心思想是利用ATR指标来识别市场的波动范围，并结合均线过滤来确定买入和卖出的时机。交易逻辑思维 1. 数据准备与初始化 - 集合竞…...

编程日记 2025/8/1 1:29:31

【每天一个知识点】模式识别

“模式识别”是一种从数据中识别出规律、结构或趋势的技术，它广泛应用于人工智能、机器学习、图像处理、语音识别、自然语言处理等领域。简单来说，就是让计算机学会“看出”数据中的规律，比如： 从图像中识别人脸（人脸识…...

编程日记 2025/8/4 11:10:05

Node.js 创建 HTTP 服务端

Node.js 创建 HTTP 服务端的用法总结，内容涵盖了核心模块、基本用法、Express 简化用法、常见场景、错误处理、以及实用小贴士。 ✅ 一、Node.js 创建 HTTP 服务的方式 Node.js 使用内置的 http 模块即可快速创建一个 Web 服务，无需额外安装依赖。 ✅ …...

编程日记 2025/7/30 8:04:31

深入浅出伯努利分布：从 0‑1 随机世界到统计学习基石

深入浅出伯努利分布：从 0‑1 随机世界到统计学习基石 “当你能把一个问题拆解成一系列“是/否”答案时，伯努利分布就是第一块砖。” 目录引言：伯努利分布为何如此重要？历史回顾：从赌博到信息论形式化定义与基本表示三…...

编程日记 2025/8/5 12:58:16

x-ui重新申请ssl证书失败

由于某些需要我们重新申请ssl证书，x-ui自动化脚本不能强制更新，根据x-ui仓库源码： https://github.com/vaxilu/x-ui/blob/main/x-ui.sh 在申请ssl证书的地方稍作修改，得到，运行下面的脚本就可以重新申请ssl证书&#…...

编程日记 2025/7/31 23:31:01

Python Requests 库：从安装到精通

摘要本文详细介绍 Python Requests 库的安装与使用，通过常见示例让你轻松掌握。一、引言在当今的互联网时代，与各种 Web 服务进行交互是非常常见的需求。Python 作为一门功能强大且易于学习的编程语言，提供了许多用于网络请求的库&…...

编程日记 2025/8/6 21:03:38

No package docker-ce available问题的解决

安装docker时提示 rootk8s-node3 ~]# yum install -y docker-ce docker-ce-cli containerd.io Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.aliyun.com * extras: mirrors.aliyun.com * updates: mirrors.aliyun.com No packag…...

编程日记 2025/8/1 11:22:55

SRS流媒体服务器

SRS流媒体服务器简介 SRS(Simple RTMP Server)是一个开源的流媒体服务器，主要用于直播和WebRTC场景。以下是关于SRS的关键信息： 主要特性支持多种协议：RTMP、HTTP-FLV、HLS、WebRTC、SRT等低延迟：特别优化了WebRTC和HTTP-FLV的…...

编程日记 2025/8/3 15:43:49

【后端开发】Spring日志

文章目录 Spring日志日志作用日志测试日志信息日志级别日志配置配置日志级别日志持久化日志文件分割注解的使用 Spring日志日志作用系统监控：可以通过日志记录这个系统的运行状态，对数据进行分析，设置不同的规则，超过阈值时进…...

编程日记 2025/7/30 8:04:18

Nginx 文件上传大小限制及 `client_max_body_size` 最大值详解

一、默认值与错误提示默认值：client_max_body_size 1m; Nginx 默认允许的请求体最大为 1 MiB，超过该值会返回 413 Request Entity Too Large 错误。错误提示示例：HTTP/1.1 413 Request Entity Too Large Content-Type: text/html二、如何配…...

编程日记 2025/8/3 10:10:19

js day3

for循环打印* let num1prompt("要打印的层数：") for()let i0;i<num1;i）{ for(let j1;j<i;j){ doucument.writeln(*) } document.writeln(<br>) } do……while循环 do{ document.writeln(i) i }while(i>20)——先执行再判…...

编程日记 2025/8/5 1:33:38

Nodejs数据库单一连接模式和连接池模式的概述及写法

概述单一连接模式和连接池模式是数据库连接的两种主要方式： 单一连接模式： 优点：实现简单，适合小型应用缺点：每次请求都需要创建新连接，连接创建和销毁开销大，并发性能差，容易出…...

编程日记 2025/7/30 8:04:12

Java InvalidClassException 深度解析

Java InvalidClassException 深度解析 1. 异常本质 InvalidClassException 是 ObjectStreamException 的子类，在反序列化时抛出，表示序列化ID不匹配或类结构不兼容。 2. 核心触发条件 (1) serialVersionUID 不匹配 java // 版本1（原始类…...

编程日记 2025/8/6 18:31:46

日常开发记录

日常开发记录 1.for循环的打断特定循环示例1：跳出嵌套循环示例2：使用continue跳到外层循环 2.同步请求阻塞主线程 1.for循环的打断特定循环看到了一段这个代码，第一次见在 JavaScript 中，当我们需要从嵌套循环中跳出时&#x…...

编程日记 2025/7/30 8:04:08

MLLMs for TSAD ?

项目链接：Multimodal LLMs Advance Time Series Analysis 代码链接：https://github.com/mllm-ts/VisualTimeAnomaly 出处：ICLR 2025 一文章动机多模态 LLM (MLLM) 通过 “视觉” 方式处理时序的潜力仍未充分探索；人类检测 “时序异常” 的自然方式：可视化、文本描…...

编程日记 2025/8/5 17:10:26

【网络原理】UDP协议

目录一. UDP 报文格式 （1）端口号 （2）UDP长度 （3）校验和 UDP协议属于传输层协议，由操作系统内核内置一. UDP 报文格式 UDP数据报：无连接，不可靠传输，面…...

编程日记 2025/8/4 10:44:51

Android 热点二维码简单示例

Android 热点二维码简单示例一、前言 Android 原生设置有热点二维码分享功能，有些系统应用也会有这个需求。下面看看是如何实现的。本文是一个比较简单的内容。二、热点二维码生成实现 1、效果整个应用就一个普通的Activity，显示一个按钮和二维…...

编程日记 2025/8/3 23:20:20

面向AI时代与数字化转型关键期：中小企业IT人才储备计划研究分析

摘要本文在为中国中小企业（SME）在当前科技产业（特别是人工智能）爆发和数字化转型加速的背景下，构建一个面向未来的IT人才储备计划框架。深入分析中国科技产业现状、AI与数字化转型对中小企业的影响、关键人才需求、招…...

编程日记 2025/8/1 15:42:49

cv::dnn::NMSBoxes和nms-free的比较

1. 原理与目标 cv::dnn::NMSBoxes 基于传统的非极大值抑制（NMS）算法，通过交并比（IoU）筛选重叠框，保留置信度最高的框，抑制冗余检测。支持变体如 Soft-NMS（通过降低分数而非直接抑制&…...

编程日记 2025/8/6 15:19:53

【开发心得】Dify部署ollama模型的坑[8]

目录关于一体机关于特斯拉 AI显卡与游戏显卡总结目前我们的私有化部署已经来到了32B的大模型，场景落地了。在继续评估之前，来说点儿关于硬件的坑。关于一体机市面上，一体机很火，不怀疑一体机的算力，也不…...

编程日记 2025/8/6 3:41:27

matlab论文图一的地形区域图的球形展示Version_1

matlab论文图一的地形区域图的球形展示Version_1 图片此图来源于： ![Jieqiong Zhou, Ziyin Wu, Dineng Zhao, Weibing Guan, Chao Zhu, Burg Flemming, Giant sand waves on the Taiwan Banks, southern Taiwan Strait: Distribution, morphometric relationship…...

编程日记 2025/7/30 9:37:50

velocity模板引擎

文章目录学习链接学习链接 velocity模板引擎 freemarker模板引擎 thymleaf模板引擎 Apache Velocity Project 官网 Velocity Engine基础 Velocity 模板引擎使用介绍黑马程序员Java进阶VelocityTools全套教程...

编程日记 2025/8/4 13:43:27

【Docker项目实战】使用Docker部署NotepadMX笔记本工具

【Docker项目实战】使用Docker部署NotepadMX笔记本工具一、NotepadMX介绍1.1 工具简介1.2 主要特点二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、下载NotepadMX镜像五、部署…...

编程日记 2025/8/4 11:25:45

边沿耦合与宽边耦合的串扰

边沿耦合与宽边耦合的串扰我们知道，如果两条走线位于同一层，由于耦合两条线之间会存在串扰。如果PCB层叠中有相邻的信号层，那么同样存在耦合，这两个相邻信号层的走线之间也会存在串扰。同层走线之间的耦合称为边沿耦合&#xff0…...

编程日记 2025/8/5 13:04:20

基于单片机的按摩器控制系统设计

标题:基于单片机的按摩器控制系统设计内容:1.摘要本设计聚焦于基于单片机的按摩器控制系统。背景方面，随着人们生活压力增大，对按摩器的需求日益增长，传统按摩器功能单一、控制不够精准。目的是设计出一种功能多样、控制灵活的按摩器控制系…...

编程日记 2025/7/30 9:37:45

有效的完全平方数--LeetCode

题目给你一个正整数num。如果num是一个完全平方数，则返回true，否则返回false 。完全平方数是一个可以写成某个整数的平方的整数。换句话说，它可以写成某个整数和自身的乘积。不能使用任何内置的库函数，如sqrt。示例 1: 输…...

编程日记 2025/8/4 12:17:23

Sentinel源码—5.FlowSlot借鉴Guava的限流算法一

大纲 1.Guava提供的RateLimiter限流使用示例 2.Guava提供的RateLimiter简介与设计 3.继承RateLimiter的SmoothBursty源码 4.继承RateLimiter的SmoothWarmingUp源码 1.Guava提供的RateLimiter限流使用示例 (1)拦截器示例 (2)AOP切面示例 (1)拦截器示例一.pom文件中引入G…...

编程日记 2025/7/30 9:37:37

dev_set_drvdata、dev_get_drvdata使用详解

在Linux内核驱动开发中，dev_set_drvdata() 及相关函数用于管理设备驱动的私有数据，是模块化设计和数据隔离的核心工具。以下从函数定义、使用场景、示例及注意事项等方面进行详细解析： 一、函数定义与作用核心函数 dev_set_drvdata() 和 dev…...

编程日记 2025/8/5 15:20:58

OCR技术与视觉模型技术的区别、应用及展望

在计算机视觉技术飞速发展的当下，OCR技术与视觉模型技术成为推动各行业智能化变革的重要力量。它们在原理、应用等方面存在诸多差异，在自动化测试领域也展现出不同的表现与潜力，下面将为你详细剖析。一、技术区别 （一&#xff…...

编程日记 2025/8/3 1:27:47

B端管理系统：企业运营的智慧大脑，精准指挥

B端管理系统的定义与核心功能 B端管理系统（Business Management System）是专门设计用于支持企业内部运作和外部业务交互的一套软件工具。它集成了多种功能模块，包括但不限于客户关系管理(CRM)、供应链管理(SCM)、人力资源管理(HRM)以及财务管…...

编程日记 2025/8/6 5:04:03

实现Azure Synapse Analytics安全地请求企业内部API返回数据

需要编写一个Synapse Analytics在Azure云上运行，它需要访问企业内部的API获取JSON格式的数据，企业有网关和防火墙，API有公司的okta身份认证，通过公司的域账号来授权访问，现在需要创建一个专用的域账号，让Sy…...

编程日记 2025/8/4 18:26:58

让机器学习更透明：使用 Python 开发可解释性模型工具包

友友们好！我是Echo_Wish，我的的新专栏《Python进阶》以及《Python！实战！》正式启动啦！这是专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会…...

编程日记 2025/7/30 2:53:01

PHP实现简单的爬虫功能

<?php// 目标URL $url https://example.com;// 初始化cURL $ch curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_USERAGENT, Mozilla/5…...

编程日记 2025/8/5 18:00:16

手撕简易HashMap

put()、get()、remove() 方法计算存储数组位置和k-vNode节点 public int indexOf(K key){return key.hashCode() & (table.length - 1);}static class Node<K, V>{K key;V value;Node<K, V> next;public Node(K key, V value){this.key key;this.value val…...

编程日记 2025/7/30 10:05:42

go-map+sync.map的底层原理

map 哈希冲突解决方式 1.拉链法 2.开放地址法底层结构 Go 的 map 在源码中由 runtime.hmap 结构体表示，buckets-指向桶数组的指针(常规桶)，oldbuckets-扩容时指向旧桶数组的指针。 type hmap struct {count int // 当前元素个数（len…...

编程日记 2025/8/1 11:36:58

日语学习-日语知识点小记-进阶-JLPT-N2阶段（6）： - （1）てもてでも特别强调（２）~もしないで = 聞かないで：根本不做某动作”

日语学习-日语知识点小记-进阶-JLPT-N2阶段（6）： - （1）ても　　てでも特别强调（２）~もしないで聞かないで：根本不做某动作”。 1、前言（1）情况说…...

编程日记 2025/7/30 10:05:38

读文献方法

虽然读了很多文献，但是并不代表我把读文献这件事真的做到了极致。因此不断优化迭代，反思自己哪里做的不好，非常重要。阅读学术论文时，采用结构化、分阶段的策略可以显著提高效率。以下是针对这篇流体力学论文的高效阅读方法&…...

编程日记 2025/8/3 11:03:54

对象存储概述

对象存储概述 1. 定义与基本概念对象存储（Object-based Storage）是一种新型网络存储架构，其核心是将数据作为对象（Object）进行管理，每个对象包含数据本身、元数据（Metadata）和唯一…...

编程日记 2025/7/30 10:05:34

Grallvm技术介绍

GrallVM介绍 GraalVM核心特性 GraalVM 是由 Oracle 开发的高性能运行时环境，基于 HotSpot JVM 构建，支持多语言互操作和 Ahead-of-Time (AOT) 编译。以下是其核心特性： 核心技术 Graal JIT 编译器：替代传统 JVM 的 C2 编译器&am…...

编程日记 2025/7/30 10:05:32

matlab 环形单层柱状图

matlab 环形单层柱状图 matlab 环形单层柱状图 matlab 环形单层柱状图图片图片【图片来源粉丝】我给他的思路是：直接使用风玫瑰图可以画出。 rose_bar 本次我的更新和这个有些不同！是环形柱状图，可调节细节多； 只需要函数…...

编程日记 2025/7/30 10:05:31

Java调用LLM大模型 - 基于 Spring AI 实现

Spring AI Alibaba实战：Java集成通义千问构建流式对话应用一、Spring AI核心架构解析 1.1 框架定位与优势对比 graph TDA[Spring AI] --> B[统一API接口]A --> C[多模型支持]A --> D[企业级特性]B --> E(OpenAI/Azure/阿里云)C --> F(LLaMA/Qwen…...

编程日记 2025/8/5 18:26:43

RK | rk3568开发与学习

RK | rk3568开发与学习时间：2025年4月19日17:20:28 文章目录 RK | rk3568开发与学习1.参考2.资料3.初次使用连接串口网络连接有线连接SSH登录 1.参考 Rockchip: Rockchip-瑞芯微电子股份有限公司正点原子： 1.正点原子RK3568开发板瑞芯微Linux嵌入式ARM…...

编程日记 2025/8/4 15:13:55