前端安全学习笔记

Hello_Kitty
209 阅读5分钟

一、浏览器相关安全知识

1、XSS 攻击

定义：Cross-Site Scripting（跨站脚本攻击），是一种代码注入攻击。 本质：攻击代码和本地代码混合在一起，浏览器无法分辨，导致 cookie 等信息被截获。 分类：

  • 存储型：脏代码被存到了数据库中，如在评论中输入一个脚本，其他人查看此条评论，就会触发；
  • 反射型：通过构造特殊的 URL 携带了攻击代码，如网站搜索，跳转功能等；
  • DOM 型：脏代码写入了 DOM 中，由用户手动触发了；

防范手段：

  • 用户输入过滤（对于明确的输入类型，如URL，电话号码，邮箱），对于复杂类型输入，如果统一使用过滤可能会导致乱码；
  • 转义 HTML，用转义库来帮助转义，转义<、>，等特殊字符
  • 用 .innerHTML、document.write()，插入元素前要判断
  • Vue/React 技术栈，避免使用 v-html、dangerouslySetInnerHTML 等功能，在 render 方法中避免使用 innerHTML 等代码；
  • CSP 规则：
    • 禁止加载外域代码；
    • 禁止外域代码提交；
    • 禁止内联脚本执行；
  • cookie 操作：
    • HTTP-only 设置

2、CSRF

Cross-site request forgery 跨站请求伪造 本质：利用浏览器的 cookie 共享机制，同一个 domain 的请求会携带上公共的 cookie； 描述：

  • 用户登陆了银行 yinhang.com，银行的登录态没有过期；
  • 用户访问了钓鱼网站，网站上触发了发送到 yinhang.com 的转账请求；
  • 银行收到了转账请求，同时检测到携带了登录态；
  • 发生了转账；

防止的措施：

  • referer 校验，检测请求的来源地址，如果不是 yinghang.com，则自动拦截；
  • 表单提交的时候，在 http 头中存一个随机 token，登录后存在 session 当中，服务器校验此是否真实的请求；
  • cookie 的 same-site 机制
    • Strict：完全禁止第三方的 Cookie，跨站点时候，任何情况都不会发送 Cookie；
      • 这种比较严格，所有的跳转都携带不了认证消息；
    • Lax：大多数情况不发送第三方 Cookie，导航到目标网站的 Get 除外；
    • image.png
    • None：关闭；
  • 跨域请求携带 cookie，设置 withCredentials 可以携带

3、CORS

Cross-origin resource sharing（跨域资源共享） 定义：允许浏览器向跨源服务器发出 XHR 请求，克服只能同源请求 ajax 的缺点。 请求类型：

  • 简单请求
    • 直接发出去，携带 Origin 字段；
    • 如果这个 Origin 指定的域名在符合范围内，服务器就会多几个响应；
    • image.png
      • Access-Control-Allow-Origin：源
      • Access-Control-Allow-Credentials：是否允许 Cookie
      • Access-Control-Expose-Headers：请求头
  • 复杂请求
    • 定义：
      • 除了HEAD，GET，POST；
      • HTTP 有自定义属性，或 Content-Type 为 json;
    • 预检请求
      • 请求类型是 OPTIONS，意思是问询；
      • Access-Control-Max-Age：本次预检请求有效期

withCredentials 属性 CORS 请求默认不发送 Cookie 和 HTTP，配置此表单，可以携带。

二、防爬虫措施

1、常见策略：

  • UA + Referer 检测；
  • 验证码；
  • 风控系统 + 蜜罐

2、前端方法：

  • 关键字写入伪元素的 content 里面，爬取数据后，需要解析 css
    • image.png
  • 元素定位覆盖：
    • 正式的价格通过一定规则 “错位” 显示。
  • 图片剪切：
    • 把数字写到图片里面，雪碧图一样使用数字
  • 动态的 font 字体

三、开发中常见越权手段：

1、横向越权

a、初级场景：

问题描述

同级别的 A 用户获得了 B 用户的权限， Delete 58.com/{articalID}… 如果帖子 ID 是自增 ID 来用的，如422013，那么我们是不是可以控制422014，422012等的删除操作；

b、复杂场景

问题描述

Delete 58.com/{userID}/{a… 学明白了，接收一个 userId，校验该 articalId 是否属于此 userId； 因为 userId 大概率也是自增 ID，我们可以进行海量攻击，成功几率很高；

常见类型

userId 等关键 ID，放在 token 中，或者 http 的 body 中，或者 url 的 query 里面；

如何避免

  • 所有 ID 均做混淆处理，如雪花算法处理；
  • 能从 token 或者 sessionID 中得到的用户信息不允许重新在报文中再体现，包括 cookie 中；
  • 不可避免的请求头文件（如 saas 化的平台） 可以从 nginx 等服务器中添加；
  • 前后端完全分离项目，用 nginx 等做服务代理，隔绝了服务端地址，保障了服务安全；
  • 使用 https 协议；

2、纵向越权

问题描述

普通用户触发了管理员的操作，没有做好用户角色等级管理机制；

处理方案

  • 加入 RBAC 角色管理功能，使用动态路由机制；
  • 后端有专门的鉴权中心服务；

四、开发中常见的加密手段

1、常见加密算法知识

hash 算法是不是加密

hash算法，散列函数，把任意长度的输入，变成固定长度的输出； 常用地方：passport 插件，登录的时候，把密码处理一下，避免明文； hash 不可逆，所以不属于加密算法，md5 部分可逆是因为这个算法碰撞出来的； 如 MD5，SHA1，SHA2；

对称加密

同一个密钥可以进行加密和解密操作；如 AES，3DES；

非对称加密

加密密钥与解密密钥不一样； 如 ssh 服务器的公钥与私钥，CA 证书的公钥和私钥 RSA（2048），ECDSA(椭圆曲线加密，256)

2、开发中常见的案例

HTTPS 是如何做的加密策略

加入了 SSL/TLS 安全传输层这个概念； 对称算法用来进行加解密，非对称算法用来传输对称算法秘钥； image.png

支付宝如何做的加密

如支付宝用的就是 RSA 加密（2048位以上密钥）

3、国密算法简介

SM系列，1，2，3，4到9，后续会越来越普及，关键部门已经使用了。

密码分类国产商用密码国际商用密码
对称加密分组加密/块加密SM1/SCB2 SM4/SMS4 SM7DES 3DES AES
序列加密/流加密ZUC（祖冲之算法）RC4
非对称加密大数分解RSA DSA ECDSA
离散对数SM2 SM9DH DSA ECC
散列/杂凑SM3SHA-1 SHA-2 MD5

五、企业级监控操作

  • 水印，数字水印技术；
  • window 如果安装的企业镜像，有很高的权限，截屏或者录制视频都可以；
  • 网络监控，植入特定 CA 证书；

六、参考链接

www.ruanyifeng.com/blog/2019/0… blog.csdn.net/diaolanbeng… zhuanlan.zhihu.com/p/132352160

avatar
文章
阅读
粉丝