安全攻防技能 30 讲
何为舟
前微博安全研发负责人
34681 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 41 讲
开篇词 (1讲)
安全攻防技能 30 讲
15
15
1.0x
00:00/00:00
登录|注册

加餐2 | 前端安全:如何打造一个可信的前端环境?

无限断点
域名锁定
使用更复杂的方法获取关键字符串
将关键字符串改成多个字符串拼接的形式
加入不会被执行的代码
加入无意义的代码
使用无意义的随机字符替代方法名和变量名
去除空格、换行、缩进
分析熟悉的语言和环境中的代码混淆方式
无法分析报错
影响性能
增加代码体积
反调试
固定字符动态化
简单逻辑复杂化
无序化代码
黑客复刻前端应用
黑客通过分析前端代码进行篡改
攻击事件:12306网站被篡改
思考题
混淆技术的负面影响
混淆技术
前端安全性
如何打造一个可信的前端环境?

该思维导图由 AI 生成,仅供参考

你好,我是何为舟,欢迎来到安全专栏的第二次加餐时间。
前端的安全性一直是我们在考虑安全问题时,没有办法绕过的关键问题。今天,我就来和你聊一聊如何保护前端的安全性。
我们先来看一个攻击事件。2017 年,12306 网站被曝出有“买下铺”的功能。我们都有过买票的经历,当我们在 12306 上买卧铺的时候,是没法选择上铺、中铺还是下铺的。但是,有人去分析了 12306 的前端代码,发现里面其实包含了选铺位的功能,只是默认为随机,没有展示出来。所以,有人通过篡改前端代码,就将这个功能开放出来了。
一旦黑客能够完全摸清楚应用的前端代码,就能够任意地篡改前端的逻辑,实现带有想要功能的前端应用了。
如果说 12306 的例子,还不足以让你对前端安全产生警惕的话,你可以想一想,我们在网上看到的各种所谓的“破解版”软件,其实都是人为修改了应用的前端认证功能,从而不需要认证就可以正常使用。
除了篡改前端代码,黑客还可以通过对前后端接口的调用过程进行分析,复刻出一个自己的前端应用。在黑客复刻的前端应用中,所有的接口认证和加密都合法,只是调用的顺序完全由黑客掌控。粉丝圈比较流行的各类明星应援工具,其实都是基于这个原理实现的:黑客通过分析微博客户端的接口,自己打包了一个前端应用,实现了一键关注、点赞等功能。因为这些接口都是合法的,所以后端人员很难分辨出这些请求是来自于正规的应用,还是黑客自己实现的应用。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了如何打造一个可信的前端环境,重点讨论了前端安全性的重要性以及保护前端安全的方法。通过实例说明了黑客通过篡改前端代码实现攻击的过程,强调了前端安全的重要性。随后详细介绍了混淆技术,包括清晰代码无序化、简单逻辑复杂化、固定字符动态化等方法,以及反调试技术,如域名锁定和无限断点。文章指出混淆技术虽然能增加黑客分析前端代码的难度,但也会给正常工作和应用的执行增加难度,带来负面影响,如增加代码体积、影响性能和无法分析报错。最后,鼓励读者在熟悉的语言和环境中分析代码混淆的方式,并留下思考和疑惑。整体而言,本文深入浅出,为读者提供了实用的技术指导,对前端开发人员和安全从业者具有一定的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《安全攻防技能 30 讲》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(11)

  • 最新
  • 精选
  • leslie
    个人觉得有一个还不错的方式不过仅仅用在最关键的地方或场合:写2套代码或本地测试环境留注释完整的源代码,线上环境把相关注释全部祛除。线上出现问题时,问题放到测试环境调试,毕竟线上代码的修改必须经过测试环境测试才能提交生产环境;测试系统有完整注释的源代码便于测试和解决问题就能解决问题。 这是个人学完今天课程的一点扩展的想法:唯一的代价就是稍微多花点时间;不过能真正解决问题不再乎那几分钟的删除注释的时间。谢谢老师的分享。

    作者回复: 测试流程通常要求的是测试环境和线上环境代码一致,不然容易出现因混淆或其他因素的代码改动,导致测试环境正常,线上环境却出BUG的情况。当然,如果线上BUG能够稳定复现的花,其实还是可以通过在本地原始代码调试,去进行DEBUG的。不过我也经常遇到,线上的偶发BUG,不知道崩溃的原因,导致无法排查的情况。

    2020-02-07
    2
  • 岑小白
    😂 前端 debug 本来就是史诗级难度,这样混淆之后基本上自绝于 debug 了。保密性要求没那么高的项目一般也就 ugly 一下了。这样看来,安全也是需要极大成本的啊。

    作者回复: 也不完全是,混淆之后只是报错信息不可用了。但是你自己埋入的日志还是可以看到的,所以想要debug的话,只能依靠自己埋入足够充分的错误判断和日志了。

    2020-01-31
    2
  • longsang
    看着老师说的无限debug,试了一下,可以通过如下的代码实现: <script> function tryDebugger() { try { if (('' + 0 / 0)) { debugger } } catch (err) {} } setInterval(tryDebugger, 4000) </script> 嗯,如果一打开控制台,就跳到debugger界面,想想还是很恶心的 但实际上,破解方法也非常简单: CTRL + F ’debugger' , 替换为 ‘’ 2333333

    作者回复: 加固做得好的js,都不支持下载运行,需要线上环境调试,改代码没那么简单~

    2020-07-06
    1
  • darktemple9
    webpack打包可以用uglify插件,问题是混淆强度怎么确定了,特别是业务看重体积和性能的情况下,这些策略怎么上呢?

    作者回复: 一般是先会定义一个标准,即应用的体积和性能最差能到什么程度,然后按照这个标准,去调整混淆的强度。大部分的混淆插件都能够去配置混淆的强度。

    2020-02-03
    1
  • iLeGeND
    混淆具体是怎么操作的呢 不会是手动吧

    作者回复: 网上有很多公开的平台和工具可以帮你作混淆,搜索一下,直接使用就好了。

    2020-01-31
  • LEON
    您好,如果浏览器前端不支持JS脚本怎么办?只有JS脚本可以进行前端混淆吗?还有什么技术可以进行前端混淆?谢谢。

    作者回复: 1、浏览器不支持JS脚本,那就只能是静态HTML页面了。这种页面里面没有逻辑,把注释和隐藏信息去掉就行了。 2、每个语言都有各自的混淆技术,所以这里没提。比如iOS自带反编译工具,安卓有各类加固平台可以使用。

    2020-01-31
    2
  • escray
    清晰代码无序化,似乎只是增加了程序员读懂代码的难度,如果让机器来读呢? 这几种混淆技术似乎都没有办法瞒过 github copilot 或者是 ChatGPT。 其实后端代码也可以混淆。 感觉比较成熟的方案还是使用硬件的加密狗。 个人感觉前端混淆的意义并不大,还是在后端增加一些措施比较有效。
    2023-03-09归属地:北京
  • Geek_145846
    混淆代码真的是杀敌100自损90的方法,有没有更好的方法呢
    2022-05-13
  • Bob
    代码自带混淆效果就不用这么麻烦了:P
    2021-11-25
  • 亚林
    iOS和Android混淆太难了
    2021-07-16
收起评论
显示
设置
留言
11
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部