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

jqpycs
84 阅读3分钟

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

一、本堂课重点内容:

从攻击、防御两个视角，简要介绍前端范畴内常见的安全问题，包括 XSS、CSRF、SQL 注入、DOS 等。

二、详细知识点介绍:

2.1 web攻击

分为XSS、CSRF和SQL lnjection

2.1.1 XSS

XSS的全称为：（Cross-Site Scripting）一般指跨站脚本攻击。

image.png XSS主要利用了

image.png

XSS的一些特点

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

demo：

public async submit( ctx) {
const { content, id } = ctx.request.body;/没有对content过滤
await db.save({
content,
id
});
}

public async render( ctx) {
const { content } =await db.query({id: ctx.query.id
});
//没有对content 讨滤
ctx.body =<div>${content}</div>}

Stored XSS

  • 恶意脚本被存在数据库中
  • 访问页面→读数据—被攻击
  • 危害最大，对全部用户可见

Reflected XSS

Reflectee

  • 不涉及数据库
  • 从URL上攻击

demo

image.png

public async render( ctx) {
const { param }= ctx.query;
ctx.status = 200:
ctx.body =`<div>${param}</div>`;
}

DOM-based XSS

  • 不需要服务器的参与
  • 恶意攻击的发起＋执行，全在浏览器完成

demo

image.png

const content = new URL ( location.href ).searchParams.get( "param" );
const div = document.createElement( "div" ) ;
//恶意脚本注入
div.innerHTML = content;
document.body.append(div);

image.png

Mutation-bsed xss

  • 利用了浏览器渲染DOM的特性（独特优化)
  • 不同浏览器，会有区别(按浏览器进行攻击)

image.png

2.1.2 CSRF

简称：Cross-site request forgery

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

demo

image.png

CSRF--GET

image.png

CSRF—beyond GET

<form action="https://bank/transfer_tons_of_money" method="POST"
    <input name="amount" value="1000000000000"itype="hidden"
    <input name="to" value=" hacker" type="hidden" />
</form>

2.1.3 SQL lnjection

image.png

demo1

读取请求字段

直接以字符串的形式拼接sQL语句
public async renderForm( ctx) {
    const { username, form_id } = ctx.query;
    const result = await sql.query(`
      SELECT a, b, c FROM table
      WHERE username = ${username}
      AND form_id = ${form_id}
      `);
    ctx. body = renderForm( result);
}

image.png

injection不至于SQL

  • CLl
  • OS command
  • Server-Side Request Forgery( SSRF)，服务端伪造请求
  • 严格而言，SSRF不是injection,但是原理类似

SSRF demo

  • 请求【用户自定义】的callback URL
  • web server 通常有内网访问权限
public async webhook( ctx) {
  // callback 可能是内网url
  // e.g http: //secret.com/get_employ_payrolls
  ctx. body = await fetch( ctx.query.callback );
}
访问callback ===暴露内网信息

2.1.4 DOS(Denial of Service)

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

ReDos:基于正则表达式的DoS

原理是利用了正则表达式的贪婪获取，重复去验证某段信息。主要影响服务器速度，降低吞吐量。

Logical Dos

  • 耗时的同步操作
  • 数据库写入
  • SQL join
  • 文件备份循环执行逻辑

image.png

Distributed Dos(DDoS)

短时间内，来自大量僵尸设备的请求流量，服务器不能及时完成全部请求，导致请求堆积，进而雪崩效应，无法响应新请求

攻击特点

  • 直接访问IP
  • 任意API
  • 消耗大量带宽(耗尽)

image.png

中间人攻击

  • 明文传输
  • 信息篡改不可知
  • 对方身份未验证

image.png

2.2 web防御

XSS防御

  • 永远不信任用户提交的内容
  • 不要将用户提供的内容转换成DOM

image.png

XSS现成工具

前端

  • 主流框架默认防御XSS
  • google-closure-library

服务端(Node)

  • DOMPurify

CSRF 防御

image.png

image.png

SQL注入防御

  • 最小权限原则
  • 建立允许名单 + 过滤
  • 对URL参数进行协议，域名，ip等的限制

DDOS防御

  • 流量治理

  • 负载均衡

  • API网关

  • CDN 快速自动扩容

  • 非核心服务降级

三、引用参考：

  • 青训营ppt
avatar
文章
阅读
粉丝