加餐2 | 前端安全：如何打造一个可信的前端环境？
该思维导图由 AI 生成，仅供参考
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何打造一个可信的前端环境，重点讨论了前端安全性的重要性以及保护前端安全的方法。通过实例说明了黑客通过篡改前端代码实现攻击的过程，强调了前端安全的重要性。随后详细介绍了混淆技术，包括清晰代码无序化、简单逻辑复杂化、固定字符动态化等方法，以及反调试技术，如域名锁定和无限断点。文章指出混淆技术虽然能增加黑客分析前端代码的难度，但也会给正常工作和应用的执行增加难度，带来负面影响，如增加代码体积、影响性能和无法分析报错。最后，鼓励读者在熟悉的语言和环境中分析代码混淆的方式，并留下思考和疑惑。整体而言，本文深入浅出，为读者提供了实用的技术指导，对前端开发人员和安全从业者具有一定的参考价值。
《安全攻防技能 30 讲》，新⼈⾸单¥59
全部留言(11)
- 最新
- 精选
leslie个人觉得有一个还不错的方式不过仅仅用在最关键的地方或场合：写2套代码或本地测试环境留注释完整的源代码，线上环境把相关注释全部祛除。线上出现问题时，问题放到测试环境调试，毕竟线上代码的修改必须经过测试环境测试才能提交生产环境；测试系统有完整注释的源代码便于测试和解决问题就能解决问题。 这是个人学完今天课程的一点扩展的想法：唯一的代价就是稍微多花点时间；不过能真正解决问题不再乎那几分钟的删除注释的时间。谢谢老师的分享。作者回复: 测试流程通常要求的是测试环境和线上环境代码一致，不然容易出现因混淆或其他因素的代码改动，导致测试环境正常，线上环境却出BUG的情况。当然，如果线上BUG能够稳定复现的花，其实还是可以通过在本地原始代码调试，去进行DEBUG的。不过我也经常遇到，线上的偶发BUG，不知道崩溃的原因，导致无法排查的情况。
2020-02-072
岑小白😂 前端 debug 本来就是史诗级难度，这样混淆之后基本上自绝于 debug 了。保密性要求没那么高的项目一般也就 ugly 一下了。这样看来，安全也是需要极大成本的啊。作者回复: 也不完全是，混淆之后只是报错信息不可用了。但是你自己埋入的日志还是可以看到的，所以想要debug的话，只能依靠自己埋入足够充分的错误判断和日志了。
2020-01-312
longsang看着老师说的无限debug，试了一下，可以通过如下的代码实现： <script> function tryDebugger() { try { if (('' + 0 / 0)) { debugger } } catch (err) {} } setInterval(tryDebugger, 4000) </script> 嗯，如果一打开控制台，就跳到debugger界面，想想还是很恶心的 但实际上，破解方法也非常简单： CTRL + F ’debugger' ， 替换为 ‘’ 2333333作者回复: 加固做得好的js，都不支持下载运行，需要线上环境调试，改代码没那么简单～
2020-07-061
darktemple9webpack打包可以用uglify插件，问题是混淆强度怎么确定了，特别是业务看重体积和性能的情况下，这些策略怎么上呢？作者回复: 一般是先会定义一个标准，即应用的体积和性能最差能到什么程度，然后按照这个标准，去调整混淆的强度。大部分的混淆插件都能够去配置混淆的强度。
2020-02-031
iLeGeND混淆具体是怎么操作的呢 不会是手动吧作者回复: 网上有很多公开的平台和工具可以帮你作混淆，搜索一下，直接使用就好了。
2020-01-31
LEON您好，如果浏览器前端不支持JS脚本怎么办？只有JS脚本可以进行前端混淆吗？还有什么技术可以进行前端混淆？谢谢。作者回复: 1、浏览器不支持JS脚本，那就只能是静态HTML页面了。这种页面里面没有逻辑，把注释和隐藏信息去掉就行了。 2、每个语言都有各自的混淆技术，所以这里没提。比如iOS自带反编译工具，安卓有各类加固平台可以使用。
2020-01-312
escray
清晰代码无序化，似乎只是增加了程序员读懂代码的难度，如果让机器来读呢？ 这几种混淆技术似乎都没有办法瞒过 github copilot 或者是 ChatGPT。 其实后端代码也可以混淆。 感觉比较成熟的方案还是使用硬件的加密狗。 个人感觉前端混淆的意义并不大，还是在后端增加一些措施比较有效。2023-03-09归属地：北京- Geek_145846混淆代码真的是杀敌100自损90的方法，有没有更好的方法呢2022-05-13
Bob代码自带混淆效果就不用这么麻烦了:P2021-11-25
亚林iOS和Android混淆太难了2021-07-16
