百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

前端代码安全与混淆(前端代码和后端代码在一起吗)

off999 2024-11-08 12:47 13 浏览 0 评论

作者:京东零售 周明亮

一、友商网页分析

1.1 亚马逊

亚马逊商详地址:
https://www.amazon.com/OtterBox-Commuter-Case-iPhone-Packaging

  • 所有交互事件在页面初始化时,不进行下发,等待通过 js 请求后下发 具体点击事件js内容
  • 采用自执行方式,防止代码格式化。【无法调用 Chrome 自带的代码格式化工具】
  • 采用自研式框架,非传统 react / vue / angular。大量通过 data-xx 标签进行数据传递,导致标签结构较为复杂。

1.2 淘宝

主要配合接口进行加密,采用多字段干扰,模板化加载。下发大量的模版数据,之后通过客户端进行填充。

客户端代码为传统的普通加密模式

1.3 拼多多

  • 传统普通加密方式,使用 React 框架。【有明显的 React 语法糖】
  • 关键的商详数据,需要强制进行登录操作,可以对账号进行封禁。

二、攻击者角度

  1. [Web逆向] 数某风控JS算法分析 常规网页加密调式
  2. Crack App | 某 H5 App 反调试对抗 反调式 APP 内 Webview
  3. Puppeteer 融入调试流程,调试体验爽翻了! 可模拟用户实际点击流程,进行流程化操作,此类方式,比较难以区分
  4. Node.js 安全最佳实践 常见的 Node JS 官方发布的被攻击类型。
  • 参考:NodeJS 官网指导手册?
  1. 通过几行 JS 就可以读取电脑上的所有数据? 旁路攻击,通过内存响应速度获取用户密码信息
  2. ?Qwik JS 框架 JS代码的拆分从常见的「编译时」(比如webpack分块)、「运行时」(比如dynamic import),变为「交互时」只有用户操作时,才会进行注入加载。
  3. 实践:天猫汽车商详页的SSR改造实践 天猫汽车商详页,改造原理本质上是基于 Qwik JS 。
  4. 聊聊前端安全之CSRF?
  • 非代码泄漏类,常规类型Web 攻击,基于代码破解后
  • XSS攻击:跨站脚本攻击(Cross-Site Scripting),攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后,攻击者甚至可以假冒合法用户与网站进行交互。
  • CSRF(Cross-site request forgery)跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。
  • 网络劫持攻击,主要是通过一些代理服务器,或者wifi等有中间件的网络请求,进行劫持,不法分子通过这种方式获取到用户的信息。
  • 控制台注入代码,不法分子通过各种提示诱骗用户在控制台做一些操作,从而获取用户信息。
  • 钓鱼攻击,
  • 电子邮件钓鱼:群发邮件,欺骗用户点击恶意的链接或附件,获取有价值的信息
  • 网站钓鱼:在网站上伪造一个网站,通常是模仿合法的某个网站。为了欺骗用户点击这个网站还会采取些辅助技术,比如钓鱼邮件、短信、电话
  • 防钓鱼
  • SPF记录,SPF是为了防范垃圾邮件而提出来的一种DNS记录类型,它是一种TXT类型的记录,它用于登记某个域名拥有的用来外发邮件的所有IP地址。
  • SafeBrowsing API,谷歌的一个随时可以通过互联网访问的API,允许允许浏览器在渲染之前检测URL的正确性。
  • DDOS:分布式拒绝服务攻击(Distributed Denial of Service),简单说就是发送大量请求是使服务器瘫痪
  • SQL注入攻击,通过对web连接的数据库发送恶意的SQL语句而产生的攻击,从而产生安全隐患和对网站的威胁,可以造成逃过验证或者私密信息泄露等危害
  • 点击劫持,点击劫持是指在一个Web页面中隐藏了一个透明的iframe,用外层假页面诱导用户点击,实际上是在隐藏的frame上触发了点击事件进行一些用户不知情的操作。
  1. AI 介入解释代码,加速代码反编译进程
  • 比如将友商代码放入 chatgpt 进行释义

这个只是部分代码,如果将完整代码,一段一段进行分析,你就可以得到完整上下文,不需要靠人去一段一段读取代码。

目前还有 ai 代码调试如:
https://github.com/shobrook/adrenaline?


三、防御者角度

  1. JS 代码混淆
  • 应对:普通开发者或者不懂编程的普通用户。实例:大部分网页
  • 进行代码混淆/加密,减少语义化理解。
  • 通过代码调试,查找特定 DOM 结点,反复断点调试,即可了解相关执行逻辑
  1. JS 虚拟机
  • 应对:专业编程开发者。实例:暂无
  • 通过 AST 转换 代码为二进制码,再通过虚拟机运行二进制码。
  • 会导致网页执行性能变差,执行加载更多 JS 文件
  • 无法进行断点提示,但是会把解密流程对外暴露。
  • 直接调用 JS 虚拟机,执行最小化JS片段,从而了解整个虚拟机的加密规则。
  1. 强制下载 APP 通过 Webview 打开
  • 应对:中高级编程开发者。实例如:拼多多等
  • H5 代码只是对外展示数据,关键内容提示用户下载 APP,增加调试难度
  • 用户不愿意下载APP,就会导致用户流失。
  1. 接口校验/字段混淆
  • 应对:Python 爬虫类,实例如:淘宝、好词好句网等等
  • 通过接口生成混淆模版,多字段随机发送,配置相关JS 模版框架。
  • 接口内容传输 base64 / aes 加解密处理,但是会留下解密 JS 在客户端,依旧能够被破解。
  • Token 强制校验,发送三次错误,直接不在返回数据,需要用户强制登录,容易导致用户流失。
  1. 自定义框架
  • 应对:Python 爬虫类,中高级编程开发者。实例如:亚马逊/淘宝。【还需要继续挖掘】
  • 爬虫无法第一时间获取相关按钮的 API 请求接口,需要等待 JS 返回。
  • 客户端存在大量无关数据,导致 dom 结点整体看起来无规律
  • JS 通过 接口请求返回,配合相关的 Token 参数,可以达到随机性下发

四、结论

4.1 大部分攻击者共同点

1)自身不愿意登录,或者偷取正常用户信息后,用于攻击

  • 如一些外挂程序,免费提供给外部用户,用户贪图小利,以为可以通过外部程序加快抢利
  • 实则被记录用户名,给到攻击者使用。

2)如果是公司行为,很可能会被记录IP,有法务风险。

  • 可以分析电脑名称,IP 地址
  • 可能会进行 IP 服务器代理,采用虚拟 IP,虚拟定位
  • 使用云服务器,如:阿里云 / 京东云,进行攻击相应的网站,京东云到京东网站。

3)多次进行尝试修改 token ,伪装发送请求

  • 伪造 UA
  • 开启调试模式

4)分析 DOM 结构特征 / 使用 Console 打印全局存储变量

5)通过 cookies 分析特定的关键词,全局搜索

6)网络请求时,查看函数执行栈,逐级往下寻找核心请求函数。

4.2 应对普通开发者外挂程序

  • 主要采用 puppeteer 就可以完全模拟用户操作流程,可以进行等待某个节点出现,之后再进行操作,不再需要传统的代码调试操作。直接操作 DOM 结点点击响应
  • 基于此类需求,需要经常变更 DOM 结点位置。增加业务方成本,每次都需要发版。如果是随机生成结点特征,需要开发自研框架,成本较高

4.3 应对Pyhton爬虫

1)前端代码采用传统加密方式

  • https://github.com/mishoo/UglifyJS?
  • https://github.com/terser/terser?
  • ?https://github.com/javascript-obfuscator/javascript-obfuscator
  • 更多倾向于 接口 加密方式,加固加 Token

2)入口在 APP 内的 业务

  • 本身调试需要需要额外链接机器,提高调试复杂度。
  • 配合 APP 自身监控,特定API 可以做到更加安全
  • 也只有此类业务,可以采用 JS 虚拟机方式

3)对关键词进行混淆处理,减少特征搜索

  • 可采用下面方式,只是举例,可以有更多方式。比如数组组合,对象组合等等
  • const GLOBAL_SOCKET_NAME = 'c6on6ne6ct'.concat('S6o').concat('c6ke6t').replace(/6/g, '')
  • 常规代码混淆中,对完整字符串,不会进行处理,导致会直接暴露关键字。


任何客户端加密混淆都会被破解,只要用心都能解决,我们能做的就是拖延被破解的时间,而不是什么都不做,那样只会被破解更快!

其实很多我们自己公司对外的页面,都有很多外露风险,包括不规范的日志输出,直接对外暴露加密的防刷 token。 比如:

?大家都可以自查下~

相关推荐

Python开发管理神器--UV 使用教程:从安装到项目管理

UV是一个用Rust编写的高效Python包和项目管理工具,提供了比传统工具更快的速度和更强的功能。本文将指导你如何使用UV从安装到运行一个Python项目。重点:它可以独立安装,可...

python入门-Day 26: 优化与调试(python优化方法)

优化与调试,内容包括处理模型运行中的常见问题(内存、依赖)、调整参数(如最大生成长度),以及练习改进Day25的文本生成结果。我会设计一个结构化的任务,帮助你掌握优化和调试技巧,同时提升模型性能...

Python安装(python安装发生严重错误)

Windows系统1.安装python1.1下载Python安装包打开官方网站:https://www.python.org/downloads/点击"DownloadPython3.1...

UV 上手指南:Python 项目环境/包管理新选择

如果你是一位Python开发者,曾因pipinstall的安装速度而感到沮丧,或者希望Python的依赖管理能够像Node.js那样高效顺滑,那么UV可能正是你所需要的工具。UV...

uv——Python开发栈中的高效全能小工具

每天写Python代码的同学,肯定都离不开pip、virtualenv、Poetry等基础工具,但是对这些工具可能是又恨又离不开。那么有什么好的替代呢,虫虫今天就给大家介绍一个替代他们的小工具uv,一...

使用Refurb让你的Python代码更加优秀

还在担心你写的Python代码是否专业,是否符合规范吗?这里介绍一个Python代码优化库Refurb,使用它可以给你的代码提出更加专业的建议,让你的代码更加的可读,规范和专业。下面简单介绍这个库的使...

【ai】dify+python开发AI八字排盘插件

Dify插件是什么?你可以将Dify插件想象成赋予AI应用增强感知和执行能力的模块化组件。它们使得将外部服务、自定义功能以及专用工具以”即插即用”的简洁方式集成到基于Dify构建的AI...

零基础AI开发系列教程:Dify升级指南

Dify近期发布很是频繁,基本两三天一个版本。值得肯定的是优化和改进了很多问题,但是官方的升级文档有点分散,也有点乱。我这里整理了一个升级文档供大家参考,如果还没有升级到新版本的小伙伴,可以按照我的文...

升级到PyTorch 2.0的技巧总结(如何更新pytorch版本)

来源:DeepHubIMBA本文约6400字,建议阅读12分钟在本文将演示PyTorch2.0新功能的使用,以及介绍在使用它时可能遇到的一些问题。PyTorch2.0发布也有一段时间了,大家...

dify 1.6.0版本发布解读:引入MCP支持与多项核心优化升级指南详解

2025年7月10日,dify发布了1.6.0版本。这是一次功能深度升级与性能优化的综合性更新,标志着dify在技术规范支持、操作体验以及系统稳定性方面迈出了重要的一步。本文将从核心新特性、功能增强、...

Python教程(十四):列表(List)(python列表方法总结)

昨天,我们学习了变量作用域,理解了局部和全局变量的概念。今天,我们将开始探索Python的数据结构,从最常用的**列表(List)**开始。列表是Python中最灵活、最常用的数据结构,它可以存储不同...

Python列表操作(python列表有哪些基本操作)

Python添加列表4分钟阅读在Python操作列表有各种方法。例如–简单地将一个列表的元素附加到for循环中另一个列表的尾部,或使用+/*运算符、列表推导、extend()和i...

Python字符串变形术:replace替换+join连接,10分钟掌握核心操作

字符串替换魔法:replace()实战手册核心价值:一键更新文本内容,精准控制替换范围#基础替换:Python变Javas="hellopython"print(s.re...

python集合set() 数据增册改查统计序循常用方法和数学计算

概念特点定义和创建常用操作集合间的关系集合数学操作集合生成式遍历概念:可变、无序、不重复的序列数据容器特点:无序,不支持下标唯一性,可以删除重复数据可修改定义和创建赋值法:语法:s={x,....

Python列表方法append和extend的区别

在Python编程中,列表是一种非常常用的数据结构。而列表有两个方法append()和extend(),它们看起来有点相似,但实际上有着明显的区别。今天咱们就来好好唠唠这俩方法到底有啥不同。基本区别a...

取消回复欢迎 发表评论: