那些我所知的前端的web安全知识

前端77

于 2024-08-08 16:55:46 发布

阅读量815

点赞数 13

文章标签：前端 web安全安全

本文链接：https://blog.csdn.net/gaotlantis/article/details/141031274

版权

本文列举了目前整个前端在研发过程中可能遇到的安全问题，待补充完善中...

你了解哪些前端安全相关的知识

与浏览器相关的安全问题：

XSS
CSRF
HTTPS（提升安全性... 这个大多数研发都了解）
CSP (内容安全策略，可以禁止加载外域的代码，禁止外域的提交) 服务器添加content-secruity-policy响应头来指定规则设置指令： key是资源，值是none，self(自身)，eval，url(允许的域名)，inline(内联)等
HSTS (强制客户端使用HTTPS与服务端建立连接)
X-Frame-Options (针对当前，控制当前页面是否可以被嵌入到iframe中)
SRI (subresource intergrity 子资源的完整性策略)(防止子资源被恶意篡改注入攻击脚本)
1. jervis-xxx-123124es213.js 注入到index.html,并且上传到cdn
2. 用户在请求的时候，根据 jervis-xxx-123124es213.js 去请求，而这个文件可能被篡改.
3. SRI 作用是：打包的时候根据js内容生成一个hash值，并且把hash值作为intergrity属性注入到script上。只要哈希不一样，就能认为不一样或者不完整
Referer-Policy(控制 http请求头 referrer 的携带策略)：用于通源检测，阻止第三方域名的访问

Node(服务端)相关的：

本地文件操作相关，(有可能让不怀好意的攻击者动你的ssh私钥或者host污染你DNS列表)
ReDos (正则Dos攻击)
时序攻击
ip origin referrer / request header.(各个网站爬虫防范点)

其他补充：

SQL注入
- 前端页面需要校验用户的输入数据（限制用户输入的类型、范围、格式、长度），不能只靠后端去校验用户数据。一来可以提高后端处理的效率，二来可以提高后端数据的安全。
ARP欺骗：
- 伪造成网关，让受害者的数据经过攻击者的电脑，从而抓去别人的用户信息
XFF
- payload：X-Forwarded-For: 协议头伪造ip注入攻击
- HTTP X-Forwarded-For
DoS/DDoS
- DoS/DDoS 常见的比如 SYN 攻击：服务器端的资源分配是在二次握手时分配的，而客户端的资源是在完成三次握手时分配的，所以服务器容易受到SYN洪泛攻击。SYN攻击就是Client在短时间内伪造大量不存在的IP地址，并向Server不断地发送SYN包，Server则回复确认包，并等待Client确认，由于源地址不存在，因此Server需要不断重发直至超时，这些伪造的SYN包将长时间占用未连接队列，导致正常的SYN请求因为队列满而被丢弃，从而引起网络拥塞甚至系统瘫痪。SYN 攻击是一种典型的 DoS/DDoS 攻击。
- 检测 SYN 攻击非常的方便，当你在服务器上看到大量的半连接状态时，特别是源IP地址是随机的，基本上可以断定这是一次SYN攻击。在 Linux/Unix 上可以使用系统自带的 netstats 命令来检测 SYN 攻击。
- 防御 SYN攻击的防御：缩短超时（SYN Timeout）时间增加最大半连接数过滤网关防护SYN cookies技术，直接用 https

其实DDos 可以展开一下，这里就不过多说明...

能稍微详细的聊一下 XSS 吗？

概念

Cross-site scripting, 跨站脚本攻击
攻击者想尽一切办法把可执行代码注入到你的网页中.

外在表现上，都有哪些攻击场景呢？

评论区植入js代码(即可输入的地方)
url 上拼接js代码

攻击类型: 技术角度上，有哪些类型的 XSS 攻击？

储存型 Server

论坛发帖，商品评价，用户私信等等这些用户保存数据的网站.

攻击步骤：
- 攻击者将恶意代码提交到目标网站的数据库中
- 用户打开目标网站的时候，服务端将评论(其实是恶意代码)从数据库中取出，拼接到html返回给浏览器。(这种场景一般是SSR项目出现)
- 用户浏览器收到html后，混在其中的恶意代码就会被执行。
- 窃取用户数据，发送到攻击者网站。
反射型 Server (说白了就是钓鱼链接) 攻击者结合各种手段，诱导用户点击恶意url. 通过URL传参数的功能，比如网站的搜索或者跳转等。
- 攻击步骤：
  1. 攻击者构建出自己恶意的url
  2. 直接执行可执行的恶意代码,
Dom 型 Browser (demo: index.html / type-dom.js / remote.js)

取出和执行恶意代码的操作，由浏览器完成.

攻击步骤：比如获取一个 url参数 * redirectUrl = javascript:alert(xxx)

如何去防范 XSS 攻击？

主旨：防止攻击者提交恶意代码，防止浏览器执行恶意代码。

对数据进行严格的输入编码. 比如 html 元素，js，css，url 少用 vue v-html 接收用户传入东西 react dangerouslyHtml 总之就是对输入严格控制
CSP Content Security Policy (这是个请求头，如果久版本不支持可以用 X-XSS-Protection 代替方案)

设置这个字段 default-src 'self' 所有加载的内容必须来自站点的同一个源你可以加可信域名 e.g. et*.jervis.com

输入验证 input type phone, Url, 电话号，邮箱
开启浏览器的 XSS 防御： Http Only Cookie
验证码

tips: xss 攻击模拟网站

能再稍微详细聊一下CSRF吗？

概念: Cross-site request forgery,跨站请求伪造 (现在很少见了，各大公司和浏览器已经有完善的应对策略) 攻击者诱导受害者进入恶意网站，在恶意网站里向攻击的网站发送恶意请求。

攻击步骤

受害者登录 a.com,并保留了登录凭证 cookie
攻击者诱导受害者访问 b.com
b.com 向 a.com 发送请求， a.com/xxx, 浏览器就会直接带上 a.com的cookie
a.com 收到请求了，忠实执行了对应操作
攻击者在受害者并不知情的情况下，冒充受害者让a.com执行了自己定义的操作

比如攻击者目标是 a.com/getCash/ 这个接口用到用户的cookie，那么通过上述的步骤就成功伪造的了这个行为。没有任何防御措施的情况下会出现这类的攻击

攻击类型

GET型：在页面中的某个img发起一个get请求 <img src='xxxxx'/>
POST型：自动提交表单到恶意网站

  <form methdo="POST">
    <input type="hidden" name="account" value="jervis"/>
  </form>
  <script>document.forms[0].submit()</script>

诱导用户点击链接 <a herf="xxx" />

如何防范 CSRF 攻击

CSRF一般都是发生在第三方域名，攻击者无法获取到cookie信息的。

阻止第三方域名的访问

同源检测 * request header 对下面两个字段的监测 origin referer referer 中也有不同的策略 * Referer-Policy 如果请求中没有referer相当于被安全策略Referer-Policy拦下了，所以可以不去访问这个请求
Cookie SameSite (用于控制 Cookie 策略的请求头字段)

Strict: 完全禁用第三方cookie

Lax: POST / img / iframe 不会携带 cookie
None: 不设置，默认

提交请求的时候附加额外信息

CSRF Token (最大特点是，攻击者拿不到这个Token) * 用户打开页面的时候，服务器利用加密算法生成一个 Token * 每次页面加载的时候，前端把获取到的Token,加到能够发送请求的Html元素上，比如form, a这样的参数 * 每次js 发起请求，也都携带Token * 服务器端每次接受请求时，就校验Token的有效性
双重Cookie (和上面类似) * 用户在访问网站的时候，服务器向浏览器注入一个额外的cookie. 内容随意 (e.g. csrfcookie=jervissxfasdfasdf) * 每次前端发起请求，都拼上一个参数 (e.g. csrfcookie=jervissxfasdfasdf) * 服务校验csrfcookie是否正确

**(它也是有问题的)**

服务器发给前端 cookie 让前端取那就肯定不是 http only,
  1. 如果前端域名和服务器域名不一致，比如: 前端 fe.a.com, 服务端rd.a.com, cookie只能种到 .a.com 一级域名，并且设置为非 http only
  2. a.com 下每个子域名都可以获取到这个cookie
  3. 一旦某个子域名遭到了XSS攻击，cookie很容易被窃取或者篡改

服务端：本地文件操作 demo:

比如我们提供一个静态服务，通过请求的参数url来返回给用户/前想要的资源. localhost:8080/?/../../../

防范措施：用下面这些库，对输入src做预处理

express.static
koa-static
resolve-path

ReDoS 正则表达式攻击 demo:

正则表达式会先去匹配第一种可能性

比如：ACCCD, 可以直接匹配发现成功，耗时很短

ACCCX, 没当一次匹配不成功，就会尝试回溯到上一个字符，看看能不有其他组合来匹配到这个字符串

CCC
CC + C
C + CC
C + C + C

会排列组合出非常多的组合

参考：一个正则的地狱回溯 ReDoS 攻击测试网站 regex.rip/?

node 时序攻击


function compareArray(realArray, userInputArray) {
    for( let i = 0; i < realArray.lenght; i++ ) {
        if(realArray[i] !== userInputArray[i]) {
            return false;
        }
    }

    return true;
}

比如 realArray= [2, 3, 6, 1]