最新【安全策略】前端 JS 安全对抗&amp；浏览器调试方法(2)，网络安全开发面经分享-CSDN博客

本文链接：https://blog.csdn.net/2401_84301227/article/details/138827869

写在最后

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源私我

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

为了提高数据安全，保护网页和APP的正常运行，我们需要重视接口安全问题，采取以下措施：
1️⃣ 设置合适的身份验证和权限控制，确保只有合法用户才能访问接口。
🔒 加密传输数据，防止数据在传输过程中被窃取或篡改。
🔑 使用API密钥或令牌进行接口访问授权，限制非法请求的发生。
⚡ 对接口进行监控和日志记录，及时发现异常行为并做出应对。
🛡️ 定期进行安全评估和漏洞扫描，修补潜在的漏洞。
🔐 更新接口和库文件，确保软件和组件的安全性。

只有在保护好数据接口的情况下，我们才能有效地防御数据泄露和各种攻击，保障用户和企业的利益。让我们一起行动起来，加强接口安全防护，构建更加安全可靠的网络环境！

在这里插入图片描述

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

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

1.2 为什么要保护JS代码

为什么要保护JS代码？这是我们在开发和维护网页时必须考虑的重要问题。毋庸置疑，JavaScript是一种运行于客户端的语言，这意味着它的代码将直接暴露给用户的浏览器。而且，JavaScript代码是公开透明的，任何人都可以轻松地读取、分析、复制、盗用甚至篡改这些代码。这使得JavaScript代码成为网络安全的一个薄弱环节。

😱 客户端运行：与其他编程语言不同，JavaScript代码是在用户的浏览器中运行的。这就意味着，用户可以直接访问和查看JavaScript代码。如果没有适当的保护措施，恶意用户甚至可以修改代码，对网页进行篡改或执行恶意操作。

🔑 公开透明：JavaScript代码是公开可见的，任何人都可以通过查看源代码来了解其实现细节和逻辑。这方便了开发者之间的学习和交流，但同时也给攻击者提供了可能性，他们可以分析代码并找到其中的漏洞或弱点，进而进行攻击。

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

1.3 应用场景

在保护JS代码的过程中，有许多特定的防护措施可以提高攻击成本，使攻击者难以获取敏感信息或篡改网页内容。

🔐 数据加密：一些网站会使用JavaScript对数据进行加密，确保数据的安全性和隐私性。在爬取网页时，攻击者需要解密JavaScript代码才能获取到数据。通过使用加密算法和密钥管理来实现数据加密，有效提高了攻击成本。

🚫 参数加密：某些网站的URL会包含一些长串的加密参数，攻击者必须了解这些参数是如何构造的才能正确访问URL。这样的防护措施增加了攻击者了解和窃取数据的难度，提高了攻击成本。

🔗 代码压缩：翻看网站的JavaScript源代码时，可能会遇到许多压缩或看不懂的字符。JavaScript文件名被编码，代码内容被压缩成几行，变量被修改为单个字符或十六进制字符等。这样的处理使得攻击者难以识别和理解其中的接口加密逻辑，进一步增加了攻击成本。

通过采取这些特定的防护措施，我们可以提高攻击者获取敏感信息、爬取数据或篡改网页内容所需的成本。这将更有效地保护网站和用户的安全。

1.4 涉及的技术

这些场景中所提到的保护措施都是网站为了防止数据被轻易抓取而采取的技术手段。下面是这些技术的详细解释：

1️⃣ 接口加密技术：通过接口加密，网站可以对传输的数据进行加密处理，确保数据在传输过程中不被窃取或篡改。常见的接口加密技术包括使用HTTPS协议来建立安全的通信通道，以及使用加密算法对数据进行加密和解密。

2️⃣ JavaScript压缩、混淆和加密技术：为了保护JavaScript代码不被轻易分析和篡改，网站常采用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代码中不必要的空格、换行等内容，使源码变得更加紧凑，从而降低代码的可读性，并且可以提高网站的加载速度。

一般而言，压缩JavaScript代码可以采用去除空格、换行和注释等方式来减小代码的体积。通过这种方式，源码可以被压缩成几行内容，从而减少了加载时需要下载和解析的数据量，加快了网页的加载速度。

然而，仅仅进行空格、换行的压缩对于防护作用很小。这种压缩方式只是降低了代码的直接可读性，使用IDE、在线工具或Chrome等工具，可以很容易地将代码还原成易读的形式。

因此，如果想要提高代码的防护效果，仅仅进行压缩是不够的。需要结合JavaScript混淆和加密技术来增加代码的复杂度和难以理解性，从而提高防护的效果。

总结起来，JavaScript压缩技术虽然能够减小代码体积和提升加载速度，但其防护作用并不强大，若要提高防护效果，还需要采用JavaScript混淆和加密技术。

2.3 什么是混淆

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

🔒 变量混淆：将变量名、方法名、常量名随机变为无意义的乱码字符串，降低代码可读性。例如，将变量名转换为单个字符或十六进制字符串，使其更难被理解和解析。

🔑 字符串混淆：将字符串集中放置，并进行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，一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行，下一步命令会忽略异步行为。

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