前端 JS 安全对抗原理与实践

作者：vivo 互联网安全团队- Luo Bingsong

前端代码都是公开的，为了提高代码的破解成本、保证JS代码里的一些重要逻辑不被居心叵测的人利用，需要使用一些加密和混淆的防护手段。

一、概念解析

1.1 什么是接口加密

如今这个时代，数据已经变得越来越重要，网页和APP是主流的数据载体，如果获取数据的接口没有设置任何的保护措施的话，数据就会被轻易地窃取或篡改。

除了数据泄露外，一些重要功能的接口如果没有做好保护措施也会被恶意调用造成DDoS、条件竞争等攻击效果，比如如下几个场景：

图片

一些营销活动类的Web页面，领红包、领券、投票、抽奖等活动方式很常见。此类活动对于普通用户来说应该是“拼手气”，而对于非正常用户来说，可以通过直接刷活动API接口的这种“作弊”方式来提升“手气”。这样对普通用户来说就很不公平。

所以对重要接口都会采用加密验签的方式进行保护，而验签的加密逻辑大多数都通过JS代码实现，所以保护JS代码不被攻击者窃取尤为重要。

1.2 为什么要保护JS代码

  • JavaScript代码运行于客户端

  • JavaScript代码是公开透明的

由于这两个原因，致使JavaScript代码是不安全的，任何人都可以读、分析、复制、盗用甚至篡改。

1.3 应用场景

以下场景就通过特定的防护措施提高了攻击成本：

  • 某些网站会在页面中使用JavaScript对数据进行加密，以保护数据的安全性和隐私性，在爬取时需要通过解密JavaScript代码才能获取到数据。

  • 某些网站的URL会有某个参数带有一些看不太懂的长串加密参数，攻击者要爬取的话就必须要知道这些参数是怎么构造的，否则无法正确地访问该URL。

  • 翻看网站的JavaScript源代码，可以发现很多压缩了或者看不太懂的字符，比如JavaScript文件名被编码，JavaScript的文件内容都压缩成几行，JavaScript变量也被修改成单个字符或者一些十六进制的字符，所以我们不能轻易地根据JavaScript找出某些接口的加密逻辑。

1.4 涉及的技术

这些场景都是网站为了保护数据不被轻易抓取采取的措施，运用的技术主要有：

  • 接口加密技术

  • JavaScript压缩、混淆和加密技术

二、技术原理

2.1 接口加密技术

数据和功能一般是通过服务器提供的接口来实现，为了提升接口的安全性，客户端会和服务端约定一种接口检验方式，通常是各种加密和编码算法，如Base64、Hex、MD5、AES、DES、RSA等。

常用的数据接口都会携带一个sign参数用于权限管控：

① 客户端和服务端约定一种接口校验逻辑，客户端在每次请求服务端接口的时候附带一个sign参数。② sign参数的逻辑自定义，可以由当前时间戳信息、设备ID、日期、双方约定好的秘钥经过一些加密算法构造而成。③ 客户端根据约定的加密算法构造sign，每次请求服务器的时候附带上sign数。④ 服务端根据约定的加密算法和请求的数据对sign进行校验，如果检验通过，才返回数据，否则拒绝响应。

图片

这就是一个比较简单的接口参数加密的实现，如果有人想要调用这个接口的话，必须要破解sign的生成逻辑，否则是无法正常调用接口的。

当然上面的实现思路比较简单，还可以增加一些时间戳信息和访问频次来增加时效性判断，或使用非对称加密提高加密的复杂程度。

实现接口参数加密需要用到一些加密算法，客户端和服务器都有对应的SDK来实现这些加密算法，如JavaScript的crypto-js、Python的hashlib、Crypto等等。如果是网页且客户端的加密逻辑是用JavaScript来实现的话，其源代码对用户是完全可见的，所以我们需要用压缩、混淆、加密的方式来对JavaScript代码进行一定程度的保护。

2.2 什么是压缩

去除JavaScript代码中不必要的空格、换行等内容，使源码都压缩为几行内容，降低代码可读性，同时可提高网站的加载速度。

如果仅仅是去除空格换行这样的压缩方式，几乎没有任何防护作用，这种压缩方式仅仅是降低了代码的直接可读性，可以用IDE、在线工具或Chrome轻松将JavaScript代码变得易读。

所以JavaScript压缩技术只能在很小的程度上起到防护作用，想提高防护的效果还得依靠JavaScript混淆和加密技术。

2.3 什么是混淆

使用变量混淆、字符串混淆、属性加密、控制流平坦化、调试保护、多态变异等手段，使代码变得难以阅读和分析，同时不影响代码原有功能，是一种理想且实用的JS保护方案。

  • 变量混淆：将变量名、方法名、常量名随机变为无意义的乱码字符串，降低代码可读性，如转成单个字符或十六进制字符串。

  • 字符串混淆：将字符串阵列化集中放置，并进行MD5或Base64编码存储，使代码中不出现明文字符串，可以避免使用全局搜索字符串的方式定位到入口点。

  • 属性加密：针对JavaScript对象的属性进行加密转化，隐藏代码之间的调用关系，把key-value的映射关系混淆掉。

  • 控制流平坦化：打乱函数原有代码执行流程及函数调用关系，使代码逻辑变得混乱无序。

  • 调试保护：基于调试器特性，加入一些强制调试debug语句，无限debug、定时debug、debug关键字，使其在调试模式下难以顺利执行JavaScript代码。

  • 多态变异：JavaScript代码每次被调用时，代码自身立刻自动发生变异，变化为与之前完全不同的代码，避免代码被动态分析调试。

2.4 什么是加密

JavaScript加密是对JavaScript混淆技术防护的进一步升级，基本思路是将一些核心逻辑用C/C++语言来编写，并通过JavaScript调用执行，从而起到二进制级别的防护作用，加密的方式主要有Emscripten和WebAssembly等。

1. Emscripten

Emscripten编译器可以将C/C++代码编译成asm.js的JavaScript变体，再由JavaScript调用执行，因此某些JavaScript的核心功能可以使用C/C++语言实现。

2.WebAssembly

WebAssembly也能将C/C++代码转成JavaScript引擎可以运行的代码，但转出来的代码是二进制字节码，而asm.js是文本，因此运行速度更快、体积更小，得到的字节码具有和JavaScript相同的功能，在语法上完全脱离JavaScript，同时具有沙盒化的执行环境，利用WebAssembly技术，可以将一些核心的功能用C/C++语言实现，形成浏览器字节码的形式，然后在JavaScript中通过类似如下的方式调用：

图片

这种加密方式更加安全，想要逆向或破解需要逆向WebAssembly，难度极大。

2.5 工具介绍

2.5.1 压缩混淆工具

  • Uglifyjs（开源）：

用NodeJS编写的JavaScript压缩工具，是目前最流行的JS压缩工具，JQuery就是使用此工具压缩，UglifyJS压缩率高，压缩选项多，并且具有优化代码，格式化代码功能。

  • jshaman：

jshaman是一个商业级工具，看了很多社区的评论，这个目前是最好的，可以在线免费使用，也可以购买商业版。

  • jsfuck：

开源的js混淆工具，原理比较简单，通过特定的字符串加上下标定位字符，再由这些字符替换源代码，从而实现混淆。

  • YUI Compressor：

业界巨头yahoo提供的一个前端压缩工具，通过java库编译css或js文件进行压缩

2.5.2 反混淆工具

  • jsbeautifier：

jsbeautifier是一个为前端开发人员制作的Chrome扩展，能够直接查看经过压缩的Javascript代码。

  • UnuglifyJS：

压缩工具uglify对应的解混淆工具。

  • jspacker：

用PHP编写的压缩工具，可以混淆代码保护知识产权，产生的代码兼容IE、FireFox等常用浏览器，国内大部分在线工具网站都采用这种算法压缩。

三、前端安全对抗

3.1 前端调试手法

3.1.1 Elements

Elements 面板会显示目前网页中的 DOM、CSS 状态，且可以修改页面上的 DOM 和 CSS，即时看到结果，省去了在编辑器修改、储存、浏览器查看结果的流程。

有时候一些dom节点会嵌套很深，导致我们很难利用Element面板html代码来找到对应的节点。inspect(dom元素)可以让我们快速跳转到对应的dom节点的html代码上。

图片

3.1.2 Console

Console对象提供了浏览器控制台调试的接口，Console是一个对象，上面有很多方便的方法。

  • console.log( )：最常用的语句，可以将变量输出到浏览器的控制台中，方便开发者调用JS代码

  • console.table( )：可用于打印obj/arr成表格

  • console.trace( )：可用于debugger堆栈调试，方便查看代码的执行逻辑，看一些库的源码

  • console.count( )：打印标签被执行了几次，预设值是default，可用在快速计数

  • console.countReset( )：用来重置，可用在计算单次行为的触发的计数

  • console.group( )/console.groupEnd( )：为了方便一眼看到自己的log，可以用console.group自定义message group标签，还可以多层嵌套，并用console.groupEnd来关闭Group。

3.1.3 JS断点调试

JS断点调试，即在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段进行分析与逻辑处理。

 Sources面板

① 普通断点（breakpoint）

给一段代码添加断点的流程是："F12（Ctrl + Shift + I）打开开发工具"->"点击Sources菜单"->"左侧树中找到相应文件"→"点击行号列"即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值。

图片

  • 恢复（Resume）： 恢复按钮(第一个按钮)，继续执行，快捷键 F8，继续执行，如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序。

  • 跨步（Step over）：运行下一条指令，但不会进入到一个函数中，快捷键 F10。

  • 步入（Step into）：快捷键 F11，和“下一步（Step）”类似，但在异步函数调用情况下表现不同，步入会进入到代码中并等待异步函数执行。

  • 步出（Step out）：继续执行到当前函数的末尾，快捷键 Shift+F11，继续执行代码并停止在当前函数的最后一行，当我们使用偶然地进入到一个嵌套调用，但是我们又对这个函数不感兴趣时，我们想要尽可能的继续执行到最后的时候是非常方便的。

  • 下一步（Step）：运行下一条语句，快捷键 F9，一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行，下一步命令会忽略异步行为。

启用/禁用所有的断点：这个按钮不会影响程序的执行。只是一个批量操作断点的开/关。

  • 察看（Watch）：显示任意表达式的当前值

  • 调用栈（Call Stack）：显示嵌套的调用链

  • 作用域（Scope）：显示当前的变量

  • Local：显示当前函数中的变量

  • Global：显示全局变量

② 条件断点（Conditional breakpoint）

给断点添加条件，只有符合条件时，才会触发断点，条件断点的颜色是橙色。

图片

③ 日志断点（logpoint）

当代码执行到这里时，会在控制台输出你的表达式，不会暂停代码执行，日志断点式粉红色。

图片

debugger命令

通过在代码中添加"debugger;"语句，当代码执行到该语句的时候就会自动断点，之后的操作和在Sources面板添加断点调试，唯一的区别在于调试完后需要删除该语句。

在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树中无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点，此时"debugger;"就发挥作用了。

3.2 反调试手段

3.2.1 禁用开发者工具

监听是否打开开发者工具，若打开，则直接调用JavaScript的window.close( )方法关闭网页

① 监听F12按键、监听Ctrl+Shift+I（Windows系统）组合键、监听右键菜单，监听Ctrl+s禁止保存至本地，避免被Overrides。

<script>
 
    //监听F12、Ctrl+Shift+i、Ctrl+s
    document.onkeydown = function (event) {
        if (event.key === "F12") {
            window.close();
            window.location = "about:blank";
        } else if (event.ctrlKey && event.shiftKey && event.key === "I") {//此处I必须大写
            window.close();
            window.location = "about:blank";
        } else if (event.ctrlKey && event.key === "s") {//此处s必须小写
            event.preventDefault();
            window.close();
            window.location = "about:blank";
        }
 
    };
 
    //监听右键菜单
    document.oncontextmenu = function () {
        window.close();
        window.location = "about:blank";
    };
</script>

② 监听窗口大小变化

<script>
 
    var h = window.innerHeight, w = window.innerWidth;
    window.onresize = function () {
        if (h !== window.innerHeight || w !== window.innerWidth) {
            window.close();
            window.location = "about:blank";
        }
    }
</script>

③ 利用Console.log

<script>
 
    //控制台打开的时候回调方法
    function consoleOpenCallback(){
        window.close();
        window.location = "about:blank";
        return "";
    }
 
    //立即运行函数，用来检测控制台是否打开
    !function () {
        // 创建一个对象
        let foo = /./;
        // 将其打印到控制台上，实际上是一个指针
        console.log(foo);
        // 要在第一次打印完之后再重写toString方法
        foo.toString = consoleOpenCallback;
    }()
</script>

3.2.2 无限debugger反调试

① constructor

<script>
 
    function consoleOpenCallback() {
        window.close();
        window.location = "about:blank";
    }
 
    setInterval(function () {
        const before = new Date();
        (function(){}).constructor("debugger")();
        // debugger;
        const after = new Date();
        const cost = after.getTime() - before.getTime();
        if (cost > 100) {
            consoleOpenCallback();
        }
    }, 1000);
</script>

② Function

<script>
    setInterval(function () {
        const before = new Date();
        (function (a) {
            return (function (a) {
                return (Function('Function(arguments[0]+"' + a + '")()'))
            })(a)
        })('bugger')('de');
 
        // Function('debugger')();
 
        // debugger;
        const after = new Date();
        const cost = after.getTime() - before.getTime();
        if (cost > 100) {
            consoleOpenCallback2();
        }
 
    }, 1000);
</script>

有大佬写了一个库专门用来判断是否打开了开发者工具，可供参考使用：点击查看>>

3.3 反反调试手段

3.3.1 禁用开发者工具

针对判断是否打开开发者工具的破解方式很简单，只需两步就可以搞定。

① 将开发者工具以独立窗口形式打开

② 打开开发者工具后再打开网址

3.3.2 无限debugger

针对无限debugger反调试，有以下破解方法

① 直接使用dubbger指令的，可以在Chrome找到对应行（格式化后），右键行号，选择Never pause here即可。

② 使用了constructor构造debugger的，只需在console中输入以下代码后，点击F8（Resume script execution）回复js代码执行即可（直接点击小的蓝色放行按钮即可）。

Function.prototype.constructor=function(){}

③ 使用了Function构造debugger的，只需在console中输入以下代码。

Function = function () {}

3.4 总结

JavaScript混淆加密使得代码更难以被反编译和分析，从而提高了代码的安全性，攻击者需要花费更多的时间和精力才能理解和分析代码，从而降低了攻击者入侵的成功率，但它并不能完全保护代码不被反编译和分析，如果攻击者有足够的时间和资源，他们仍然可以理解代码并找到其中的漏洞，道高一尺，魔高一丈，任何客户端加密混淆都会被破解，只要用心都能解决，我们能做的就是拖延被破解的时间，所以尽量避免在前端代码中嵌入敏感信息或业务逻辑。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/265519.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

三级安全教育二维码的应用

三级安全教育二维码的应用

三级安全教育是指公司、项目经理部、施工班组三个层次的安全教育&#xff0c;是工人进场上岗前必备的过程&#xff0c;属于施工现场实名制管理的重要一环&#xff0c;也是工地管理中的核心部分之一&#xff0c;目前很多公司已经逐步开始使用系统来进行管理&#xff0c;下面我们…
阅读更多...
pycharm git 版本回退

pycharm git 版本回退

参考 https://blog.csdn.net/qq_38175912/article/details/102860195 yoyoketang 悠悠课堂
阅读更多...
Redis可视化工具Redis Desktop Manager mac功能特色

Redis可视化工具Redis Desktop Manager mac功能特色

Redis Desktop Manager mac是一款非常实用的Redis可视化工具。RDM支持SSL / TLS加密&#xff0c;SSH隧道&#xff0c;基于SSH隧道的TLS&#xff0c;为您提供了一个易于使用的GUI&#xff0c;可以访问您的Redis数据库并执行一些基本操作&#xff1a;将键视为树&#xff0c;CRUD键…
阅读更多...
计算机毕业设计------JSP教务处学生成绩管理系统

计算机毕业设计------JSP教务处学生成绩管理系统

项目介绍 本项目包含管理员、教师、学生三种角色&#xff1b; 用户角色包含以下功能&#xff1a; 修改密码,查看自己的信息,查看自己的成绩,登录界面等功能。 管理员角色包含以下功能&#xff1a; 修改示例,增删改查学生信息,增删改查教师信息,增删改查课程信息,管理员修改…
阅读更多...
面试官95%会问的接口测试知识！

面试官95%会问的接口测试知识！

接口测试最近几年被炒的火热了&#xff0c;越来越多的测试同行意识到接口测试的重要性。接口测试为什么会如此重要呢&#xff1f; 主要是平常的功能点点点&#xff0c;大家水平都一样&#xff0c;是个人都能点&#xff0c;面试时候如果问你平常在公司怎么测试的&#xff0c;你除…
阅读更多...
【WPF.NET开发】创建模板

【WPF.NET开发】创建模板

本文内容 何时创建 ControlTemplate先决条件创建 ControlTemplate使用模板添加触发器使用 VisualState 使用 Windows Presentation Foundation (WPF)&#xff0c;可以使用自己的可重用模板自定义现有控件的可视结构和行为。 可以对应用程序、窗口和页面全局应用模板&#xff…
阅读更多...
编译opencv和opencv_contrib

编译opencv和opencv_contrib

1 下载源码 下载opencv源码https://github.com/opencv/opencv 下载opencv源码https://github.com/opencv/opencv_contrib 2 开始编译 构建需要下载ffmpeg的包&#xff0c;cmake构建时会自动下载&#xff0c;但是比较满&#xff0c;这里可以从下面链接直接下载 https://downloa…
阅读更多...
Linux-Keepalived（VRRP协议）高可用集群搭建

Linux-Keepalived（VRRP协议）高可用集群搭建

Linux-Keepalived&#xff08;VRRP协议&#xff09;高可用集群搭建 一、VRRP简介1.1 什么是VRRP&#xff1f;1.2 keepalived是什么&#xff1f;1.3 keepalived工作原理 二、实操配置过程2.1 试验模型2.2. Keepalived监控和维护VRRP集群的步骤2.2.1 安装keepalived2.2.2 配置kee…
阅读更多...
使用OpenCV DNN模块进行人脸检测

使用OpenCV DNN模块进行人脸检测

内容的一部分来源于贾志刚的《opencv4应用开发、入门、进阶与工程化实践》。这本书我大概看了一下&#xff0c;也就后面几章比较感兴趣&#xff0c;但是内容很少&#xff0c;并没有想像的那种充实。不过学习还是要学习的。 在实际工程项目中&#xff0c;并不是说我们将神经网络…
阅读更多...
Win10 使用 Nmap 扫描 Andorid 设备开放端口

Win10 使用 Nmap 扫描 Andorid 设备开放端口

Nmap Nmap 是 网络探测工具和安全/端口扫描器。 官网链接 Nmap参考指南(Man Page) 官网下载地址 Downloading Nmap Nmap 下载安装 到官网下载对应操作系统的安装包&#xff0c; 默认配置&#xff0c;一直下一步安装即可。安装过程中备份下安装路径&#xff0c;后续用到。…
阅读更多...
【优化】XXLJOB修改为使用虚拟线程

【优化】XXLJOB修改为使用虚拟线程

【优化】XXLJOB修改为使用虚拟线程 新建这几个目录 类&#xff0c; 去找项目对应的xxljob的源码 主要是将 new Thread 改为 虚拟线程 Thread.ofVirtual().name("VT").unstarted 以下代码是 xxljob 2.3.0版本 举一反三 去修改对应版本的代码 <!-- 定…
阅读更多...
C语言数据结构-----常用七种排序介绍、分类、实现及性能比较

C语言数据结构-----常用七种排序介绍、分类、实现及性能比较

前言 ①排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 ②稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#…
阅读更多...
Spring中用到的设计模式

Spring中用到的设计模式

一、工厂模式 BeanFactory 1、简单工厂模型&#xff0c;是指由一个工厂对象决定创建哪一种产品类的实例&#xff0c;工厂类负责创建的对象较少&#xff0c;客户端只需要传入工厂类的参数&#xff0c;对于如何创建对象的逻辑不需要关心 优点&#xff1a; 只需传入一个正确的参数…
阅读更多...
第四部分 一阶逻辑基本概念

第四部分 一阶逻辑基本概念

目录 主要内容 一阶逻辑命题符号化 一阶逻辑公式及其解释 个体词——所研究对象中可以独立存在的具体或抽象的客体 谓词——表示个体词性质或相互之间关系的词 量词——表示数量的词 例1 用0元谓词将命题符号化 例2 在一阶逻辑中将下面命题符号化 例如 例如 例3 给定解释 I 如下…
阅读更多...
京东JDAPI：电商行业的得力助手

京东JDAPI：电商行业的得力助手

一、引言 在当今电商行业中&#xff0c;数据的获取与利用显得尤为重要。作为中国领先的电商平台&#xff0c;京东提供了丰富的API接口&#xff0c;其中JD商品详情API是关键之一&#xff0c;它允许第三方开发者获取京东平台上的商品详情信息。本文将深入探讨京东JD商品详情API在…
阅读更多...
欧洲版OpenAI疑似将在24年发布并开源GPT-4级别模型！

欧洲版OpenAI疑似将在24年发布并开源GPT-4级别模型！

大家好&#xff0c;我是二狗。 今天在推特上看到一条振奋人心的消息&#xff1a; “ 欧洲版OpenAI、法国初创公司 Mistral 首席执行官 Arthur Mensch 在法国国家广播电台宣布&#xff0c;Mistral 将在 2024 年发布开源 GPT-4 级别模型。” 这位老哥接着表示甚至可能是免费的&a…
阅读更多...
前端传输formDate格式的数据，后端不能用@RequestBody接收

前端传输formDate格式的数据，后端不能用@RequestBody接收

写了个接口&#xff0c;跟前端对接&#xff0c;前端说怎么一直415的报错 我寻思不对啊&#xff0c;我swagger都请求成功了&#xff0c;后来发现前端一直是以formdata格式提交的数据&#xff0c;这样我其实是可以不加RequestBody的&#xff1b; 知识点&#xff1a; RequestBody…
阅读更多...
TrustZone之与非安全虚拟化交互

TrustZone之与非安全虚拟化交互

到目前为止&#xff0c;我们在示例中忽略了非安全状态中可能存在的虚拟化程序。当存在虚拟化程序时&#xff0c;虚拟机与安全状态之间的许多通信将通过虚拟化程序进行。 例如&#xff0c;在虚拟化环境中&#xff0c;SMC用于访问固件功能和可信服务。固件功能包括诸如电源管理之…
阅读更多...
将遗留系统分解为微服务：第 2 部分

将遗留系统分解为微服务：第 2 部分

在当今不断发展的技术环境中&#xff0c;从整体架构向微服务的转变对于许多企业来说都是一项战略举措。这在报销计算系统领域尤其重要。正如我在上一篇文章第 1 部分应用 Strangler 模式将遗留系统分解为微服务-CSDN博客中提到的&#xff0c;让我们探讨如何有效管理这种转变。 …
阅读更多...
前端学习——指令

前端学习——指令

vue作为前端框架&#xff0c;为了简化或实现一些特定功能&#xff0c;提供了很多指令&#xff0c;那什么是指令呢&#xff1f; 所谓的指令就是能够完成特定功能的一些vue语法&#xff0c;比如属性绑定指令v-bind&#xff0c;事件绑定指令v-on&#xff0c;循环指令v-for等。在v…
阅读更多...
最新文章

Copyright @ 2022~2023