前端安全XSS和CSRF讲解

本文详细介绍了XSS(跨站脚本攻击)和CSRF(跨站请求伪造)的原理、常见攻击方式和预防措施,包括编码转义、过滤输入、使用Token验证和设置SameSite策略。提供了从初级到高级的安全工程师学习路径和实用资源链接。
文章目录
  • * XSS
    
    •   * XSS攻击原理
      
      • 常见的攻击方式
      • 预防措施
    • CSRF
    •   * CSRF攻击原理
      
      • 常见攻击情景
      • 预防措施:
    • CSRF和XSS的区别

XSS

全称 Cross Site Scripting ,名为 跨站脚本攻击 。为啥不是单词第一个字母组合CSS,大概率与样式名称css进行区分。

XSS攻击原理

不需要你做任何的登录认证,它会通过合法的操作(比如在url中输入、在评论框中输入),向你的页面注入脚本(可能是js、html代码块等)。

导致的结果可能是:

  • 破坏页面的正常结构
  • 插入广告等恶意内容
  • 盗用Cookie
常见的攻击方式
  • 反射型

发出请求时,XSS代码出现在url中,作为输入提交到服务器端,服务器端解析后响应,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码。这个过程像一次反射,所以叫反射型XSS。

示例:
用户A访问安全网站B,然后用户C发现B网站存在XSS漏洞,此时用户C向A发送了一封邮件,里面有包含恶意脚本的URL地址(此URL地址还是网站B的地址,只是路径上有恶意脚本),当用户点击访问时,因为网站B中cookie含有用户的敏感信息,此时用户C就可以利用脚本在受信任的情况下获取用户A的cookie信息,以及进行一些恶意操作。

  • 存储型

存储型XSS和反射型XSS的差别在于,提交的代码会存储在服务器端(数据库、内存、文件系统等),下次请求时目标页面时不用再提交XSS代码。

示例:
假设网站B是一个博客网站,恶意用户C在存在XSS漏洞的网站B发布了一篇文章,文章中存在一些恶意脚本,例如img标签、script标签等,这篇博客必然会存入数据库中,当其他用户访问该文章时恶意脚本就会执行,然后进行恶意操作。即将携带脚本的数据存入数据库,之后又由后台返回。

预防措施
  1. 对输入、输出结果进行必要的转义和过滤
  2. 尽量使用post,使用get方式时对路径长度进行限制
  3. 使用httponly禁止黑客通过脚本获取用户cookie数据,但这样无法完全阻止xss攻击,因为发送http请求并不需要主动获取cookie

对输入、输出结果进行必要的转义和过滤讲解

  1. 编码:

对用户输入的数据进行 HTML Entity 编码。

HTML 实体是一段以连字号(&)开头、以分号(;)结尾的文本(字符串)。实体常常用于显示保留字符(这些字符会被解析为 HTML
代码)和不可见的字符(如“不换行空格”)。你也可以用实体来代替其他难以用标准键盘键入的字符。

* 不可分的空格:` `
* <(小于符号):`&lt;`
* >(大于符号):`&gt;`
* &(与符号):`&amp;`
* ″(双引号):`&quot;`
* '(单引号):`&apos;`
* ©(版权符号):`&copy;`

以上列出的一些实体比较容易记忆,但有一些不容易记住的您可以查看
[whatwg](https://html.spec.whatwg.org/multipage/named-characters.html#named-
character-references) 或使用解码工具

在前端,一般为了避免 XSS 攻击,会将 <> 编码为 &lt;&gt;,这些就是 HTML 实体编码。

在 HTML 转义时,仅仅只需要对六个字符进行编码:&、<、>、"、’ 和 `。我们可以使用
he 库进行编码及转义,html会正常显示经实体编码或转义后的特殊字符。

    // 实体编码
he.encode('<img src=""></img>') // &#x3C;img src=&#x22;&#x22;&#x3E;&#x3C;/img&#x3E;

// 实体转义
he.escape('<img src=""></img>') // &lt;img src=&quot;&quot;&gt;&lt;/img&gt;

示例:

    document.write('<script>alert(1)</script>')

若不进行任何处理,则浏览器会执行alert的js操作,实现XSS注入。
进行编码处理之后,在浏览器中的显示结果就是

    <script>alert(1)</script>

实现了作为纯文本进行输出,且不引起JavaScript的执行。

  1. 过滤:

移除用户输入的和事件相关的属性。如onerror可以自动触发攻击,还有onclick等。(总而言是,过滤掉一些不安全的内容)移除用户输入的Style节点、Script节点、Iframe节点。(尤其是Script节点,它是支持跨域的,一定要移除)。

  1. 校正:

避免直接对HTML Entity进行解码。使用 DOM Parse 转换,校正不配对的DOM标签。备注:我们应该去了解一下 DOM
Parse
这个概念,它的作用是把文本解析成DOM结构。

比较常用的做法是,通过第一步的编码转成文本,然后第三步转成DOM对象,然后经过第二步的过滤。

还有一种简洁的方式: 对特定字符做相应的转义,如果是富文本,就白名单。

CSRF

全称 cross-site request forgery
,名为跨站请求伪造,顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作。注意,获取cookie是XSS做的事,CSRF的作用是借用cookie,并不能获取cookie。

CSRF攻击原理

![在这里插入图片描述](https://img-
blog.csdnimg.cn/img_convert/bbb8c4f033cab742a0bc917b51325f2b.png)

用户是网站A的注册用户,且登录进去,于是网站A就给用户下发cookie。

从上图可以看出,要完成一次CSRF攻击,受害者必须满足两个必要的条件:

  1. 登录受信任网站A,并在本地生成Cookie。(如果用户没有登录网站A,那么网站B在诱导的时候,请求网站A的api接口时,会提示你登录)

  2. 在不登出A的情况下,访问危险网站B(其实是利用了网站A的漏洞)。

我们在讲CSRF时,一定要把上面的两点说清楚。

温馨提示一下,cookie保证了用户可以处于登录状态,但网站B其实拿不到 cookie。

常见攻击情景

用户A经常访问博客网站B,用户C发现网站B存在CSRF漏洞,想尽了各种办法勾引用户A访问了C写好的危险网站D,而此时用户A的cookie信息还没有失效,危险网站D中有向网站B求请求的非法操作,这样用户在不知情的情况下就被操控了。

这个时候就会有一个疑问,浏览器本身有同源策略啊,为什么在网站D还可以请求网站B的api,要记住浏览器对img、iframe和script的src是没有同源限制的!所以黑客完全可以利用动态添加这些标签的方法来实现跨站请求。

预防措施:
  • 判断请求的Referer是否正确:referer 指的是页面请求来源。意思是,只接受本站的请求,服务器才做响应;如果不是,就拦截。

  • 设置cookie的SameSite

SameSite有3个值:Strict, LaxNone

* `Strict`。浏览器会完全禁止第三方cookie。比如a.com的页面中访问 b.com 的资源,那么a.com中的cookie不会被发送到 b.com服务器,只有从b.com的站点去请求b.com的资源,才会带上这些Cookie
* `Lax`。相对宽松一些,在跨站点的情况下,从第三方站点链接打开和从第三方站点提交 Get方式的表单这两种方式都会携带Cookie。但如果在第三方站点中使用POST方法或者通过 img、Iframe等标签加载的URL,这些场景都不会携带Cookie。
* `None`。任何情况下都会发送 Cookie数据
  • Token 验证

token不是为了防止XSS的,而是为了防止CSRF的。CSRF攻击的原因是浏览器会自动带上cookie,而不会带上token。

1. 服务器发送给客户端一个token。
2. 客户端提交的表单中带着这个token,也可以把 token 隐藏在 http 的 header头中。
3. 如果这个 token 不合法,那么服务器拒绝这个请求。

攻击示例

* cookie:用户点击了链接,cookie未失效,导致发起请求后后端以为是用户正常操作,于是进行扣款操作;
* token:用户点击链接,由于浏览器不会自动带上token,所以即使发了请求,后端的token验证不会通过,所以不会进行扣款操作;

CSRF和XSS的区别

  1. CSRF需要登陆后操作,XSS不需要
  2. CSRF是请求页面api来实现非法操作,XSS是向当前页面植入js脚本来修改页面内容。

接下来我将给各位同学划分一张学习计划表!

学习计划

那么问题又来了,作为萌新小白,我应该先学什么,再学什么?
既然你都问的这么直白了,我就告诉你,零基础应该从什么开始学起:

阶段一:初级网络安全工程师

接下来我将给大家安排一个为期1个月的网络安全初级计划,当你学完后,你基本可以从事一份网络安全相关的工作,比如渗透测试、Web渗透、安全服务、安全分析等岗位;其中,如果你等保模块学的好,还可以从事等保工程师。

综合薪资区间6k~15k

1、网络安全理论知识(2天)
①了解行业相关背景,前景,确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。(非常重要)

2、渗透测试基础(1周)
①渗透测试的流程、分类、标准
②信息收集技术:主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理,利用方法、工具(MSF)、绕过IDS和反病毒侦察
④主机攻防演练:MS17-010、MS08-067、MS10-046、MS12-20等

3、操作系统基础(1周)
①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全(系统入侵排查/系统加固基础)

4、计算机网络基础(1周)
①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析(HTTP、TCP/IP、ARP等)
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御:主动/被动攻击、DDOS攻击、CVE漏洞复现

5、数据库基础操作(2天)
①数据库基础
②SQL语言基础
③数据库安全加固

6、Web渗透(1周)
①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具:Nmap、BurpSuite、SQLMap、其他(菜刀、漏扫等)

那么,到此为止,已经耗时1个月左右。你已经成功成为了一名“脚本小子”。那么你还想接着往下探索吗?

阶段二:中级or高级网络安全工程师(看自己能力)

综合薪资区间15k~30k

7、脚本编程学习(4周)
在网络安全领域。是否具备编程能力是“脚本小子”和真正网络安全工程师的本质区别。在实际的渗透测试过程中,面对复杂多变的网络环境,当常用工具不能满足实际需求的时候,往往需要对现有工具进行扩展,或者编写符合我们要求的工具、自动化脚本,这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中,想要高效地使用自制的脚本工具来实现各种目的,更是需要拥有编程能力。

零基础入门的同学,我建议选择脚本语言Python/PHP/Go/Java中的一种,对常用库进行编程学习
搭建开发环境和选择IDE,PHP环境推荐Wamp和XAMPP,IDE强烈推荐Sublime;

Python编程学习,学习内容包含:语法、正则、文件、 网络、多线程等常用库,推荐《Python核心编程》,没必要看完

用Python编写漏洞的exp,然后写一个简单的网络爬虫

PHP基本语法学习并书写一个简单的博客系统

熟悉MVC架构,并试着学习一个PHP框架或者Python框架 (可选)

了解Bootstrap的布局或者CSS。

阶段三:顶级网络安全工程师

如果你对网络安全入门感兴趣,那么你需要的话可以点击这里👉网络安全重磅福利:入门&进阶全套282G学习资源包免费分享!

学习资料分享

当然,只给予计划不给予学习资料的行为无异于耍流氓,这里给大家整理了一份【282G】的网络安全工程师从入门到精通的学习资料包,可点击下方二维码链接领取哦。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值