web安全开发 | 青训营笔记

煕熈凞熙
76 阅读3分钟

WEB开发的安全之旅

这是我参与「第四届青训营 」笔记创作活动的第2天

XSS：跨站脚本攻击

概述

XSS就是攻击者通过各种方式将其恶意脚本注入我们的网页空间中，造成的后果有用户隐私泄露、客户端变矿机等几种形式， image.png

特点

image.png

XSS攻击的类型

  1. 存储型XSS攻击

image.png

这种类型的攻击会被存储到数据库中，危害最强，

  1. 反射型XSS攻击

从URL上进行攻击

image.png 举个例子：

image.png 我们总会需要在URL后面携带一些参数，如果攻击者把该字段恶意设置成攻击的script标签，用户在访问的时候就会命中这些攻击，

  1. 基于DOM的XSS攻击

image.png 看个例子：

image.png 这次的攻击是在浏览器中完成的，实际上也是通过写入恶意攻击的script标签进行攻击的，

反射型和基于DOM的XSS攻击最大的区别就是脚本注入的位置不同，

  1. 基于Mutation的XSS攻击

image.png 看个例子：

image.png 上图的第二部分是代码片段渲染到chorme上的结果，我们能看到结果是img标签被成功的渲染到了HTML骨架中，此时，因为img标签中src不正确，所以会触发oneror回调，此时就能够完成XSS恶意脚本注入了

CSRF： 跨站伪造请求

特点

image.png 看个例子：

image.png 上图的过程就是：用户并没有访问到银行官方的页面，而是访问了伪造的页面，而伪造的页面能够对银行页面中实现转账功能的接口进行请求，当用户输入隐私信息后，接口请求成功，攻击完成。

比较常见的是GET请求，但也不局限于GET请求

image.png

Injection（注入）

SQL注入

image.png 看个例子：

image.png

image.png

但是注入也不局限于SQL，

image.png

DOS

看过鱼皮直播的应该都知道dDOS（手动狗头）

image.png

插播：正则表达式--贪婪模式

image.png 大概意思就是第一个log会匹配所有的a，第二个log只会皮牌一个a，

reDOS

image.png

dDos

image.png

image.png

image.png

基于传输层的攻击方式

image.png 简单来说就是双面间谍，只不过他两边害罢了，

如何防御

XSS

圣经

image.png

现成工具防御

image.png 实际上react和vue都是会默认防御XSS攻击的，

对String进行转义

但是如果用户需求必须动态生成DOM呢？

image.png 没有好的办法，只能是尽量补救， 比如String->DOM，我们就需要调用DOMParser这个API，此时我们就需要对String进行转意。

扫描svg格式的文件

image.png 需要对svg文件进行扫描，因为svg图片格式的文件允许插入script标签，此时就容易被恶意攻击，所以需要检索是否有恶意script，

不要让用户有自定义跳转行为

image.png 因为自定义跳转链接是可以插入js代码的，就会容易被攻击，

额外留意能让用户自定义样式的地方

image.png

插播：浏览器同源策略

image.png

CSP

image.png

CSRF（跨站伪造请求）的防御

image.png

image.png

image.png

image.png

image.png 这种方式简单老说就是请求的数据不带Cookie，直接防止csrf攻击

image.png

image.png

image.png 一般是不会Case by case的防御CSRF攻击的，所以会采取从node层的角度，生成防御的中间件，保证整个webApp能够进行防御

注入的防御

image.png

image.png

image.png 写正则要避免写出贪婪匹配的方式，

image.png

image.png 直接搬出https，内置了TLS进行中间人防御

image.png

image.png

https的一些特性

image.png

数字签名

image.png

image.png

image.png

image.png

image.png 因为前端有很多静态资源被存放在CDN中，如果有攻击者恶意劫持或者篡改，此时我们就可以通过SRI进行防御，

image.png

avatar
文章
阅读
粉丝