Web开发的安全之旅 ｜ 青训营笔记

autumnTop
130 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

Web开发的安全之旅 ｜ 青训营笔记

本堂课重点内容：

攻击篇

  1. XSS
  2. CSRF
  3. 注入
  4. DoS

防御篇

  1. XSS防御

攻击篇

1.XSS

XSS定义: Cross-Site Scripting，跨站脚本攻击。有三种类型：反射型，存储型，DOM型。
攻击手段： XSS利于了我们盲目相信用户提交的内容。用户提交了内容，我们没进行过滤，如果用户提交了JS代码，那么我们也执行了。
XSS的特点：

  • 通常难以从 UI上感知(暗地执行脚本)
  • 窃取用户信息 (cookie/token)
  • 绘制 UI(例如弹窗)，诱骗用户点击/填写表单

例子： 左边是用户提交的表单内容，右边是我们接收到的内容，如果我们拿右边的代码直接去执行那么就有危险了。 image.png

存储型

  • 脚本放在数据库
  • 访问页面->读取数据 === 被攻击
  • 危害最大，对所有用户可见

反射型

  • 不涉及数据库
  • 从URL上攻击
//地址：http://abc.com/host/path/?param=<script>alert('1,2,3')</script>
// 服务器
public async render (ctx) {
    const {param} = ctx.query
    ctx.status = 200
    ctx.body = `<div>${param}</div>` //直接渲染
}

DOM型

  • 不需要服务器的参与
  • 恶意攻击的发起+执行，全部在浏览器完成
//相同的地址：http://abc.com/host/path/?param=<script>alert('1,2,3')</script>
const content = new URL(location.href).searchParams.get('param')
const div = document.createElement('div)
div.innerHTML = content
document.body.append(div)

DOM型和反射型的区别
反射型在服务器进行注入，DOM是浏览器。 image.png

Mutation-based XSS

  • 利用浏览器渲染DOM的特性（独特优化）
  • 不同浏览器，有区别（不同的浏览器不同的攻击）
    谷歌浏览器 image.png

2.CSRF

定义:CSRF(Cross-site request forgery),跨站请求伪造。

  • 用户不知情的前提下
  • 利用用户权限(cookie)
  • 构造指定HTTP请求，窃取或者修改用户的敏感信息

例子1
这里发了一个恶意邮件给用户，用户点击邮件，然后跳转到一个恶意页面，攻击者在这个页面构造攻击请求：比如向银行发起转账，然后银行发现这个请求有用户的cookie，就执行转账，然后用户就丢钱了。 image.png

例子2
get请求
用一个a标签或者img标签都可以进行攻击，a标签需要点击，img标签图片一加载就开始攻击了 image.png

post请求
只要提交了表单，用户的钱直接给转走，而且还是我们设定了钱的值。 image.png

3.注入

1. SQL攻击注入 image.png

例子 image.png

  1. 读取请求字段
  2. 直接以字符串的形式拼接SQL语句

image.png

2. 其他方式 image.png 例子 image.png

image.png 这里的rm语句会将文件删除 image.png

image.png 如果攻击者能够将nginx代理的网站转换成他自己的网站，作用？：图片右下角，把我们的流量给到对面的网站，让它激增服务器下线，搞个大型流量网站换到竞争对手的网站，从而流量过多导致对手下线

4.DoS

通过某种方式(构造特定请求) ，导致服务器资源被显著消耗来不及响应更多请求，导致请求挤压，进而雪崩效应。

  • 下面来复习一下贪婪模式 image.png 例子 image.png 第三种字符串匹配，匹配不上，我们的浏览器就会每一次减少ab，看看能不能匹配上，每次都不行，一直重复匹配加大压力

  • Logical DoS Demo image.png image.png 主要是想要消耗带宽。 例子 image.png 这里攻击者拼命发起三次握手，但是每次收到ACK+SYN包后，都没有返回第三次ACK，很快我们的服务器达到最大连接次数，不能有新请求进来。

防御篇

1.XSS防御

image.png image.png

  • 需求：必须动态生成DOM
    安全方法：要将string变成DOM，那么我们要把string进行转译。
new DOMParser()
  • 上传SVG
    <svg>
        <script>alert('xss')</script>
    </svg>

在上传svg文件中，svg可以插入script标签，我们要进行扫描才行。

  • 自定义跳转链接 image.png 不要让用户进行自定义跳转，因为可以执行js代码

  • Blob动态生成script image.png

2.SOP同源策略

image.png

3.CSP

image.png image.png

4.CSRF防御

image.png image.png image.png

  • iframe攻击

image.png 服务器可以设置x-Frame-Options: DENY：不能被当作iframe加载，SAMEORIGIN必须是同源才能加载。 例子

image.png 在页面中我们的button设置了pointer-events：none，导致点击了button的事件穿越到了我们的页面中，然后我们的iframe导致点击触发了事件。

avatar
文章
阅读
粉丝