保护JavaScript客户端APP的最有效方法

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介:


客户端技术,如 JavaScript,有很多有用的特性,正因为如此,它成为了世界上最流行的语言之一。它有很多优点,即时解析就是其一。即时解析有不少优点,比如可以在浏览器下载代码并立即执行。然而,自由度越高,责任越大。

我们会在这篇文章中深入 JavaScript 的安全隐患,不过范围仅限于浏览器中运行的前端代码。我们会关注一些将来产生的其它类型。

现在发挥你的想像,浏览器总是要执行代码的,它首先下载页面并进行解析。浏览器有着下载和解析同时进行的能力,所以它不会等待所有东西下载完成。那么,它遇到 JavaScript 的时候会发生什么事情?

JavaScript会阻塞渲染,这在它执行的时候是个巨大的优势。但这意味着浏览器将停止解析,直到执行完 JavaScript 后才会继续。这一特点给于这种编程语言极大的灵活性,它可以打开任意数量的代码。

但问题在于,这个特性会带来什么样的影响?


 
 
  1. <div id="hack-target"></div> 
  2. <button>Set Value</button>   
  3. <script> 
  4.   document.querySelector('button').addEventListener('click', setValue);   
  5.   function setValue() { 
  6.     var value = '2'
  7.     document.getElementById('hack-target').innerText = value; 
  8.   }</script> 

这段代码为 HTML 绑定事件,当你点击按钮的时候,触发回调。

对于客户端的 JavaScript,你可以在设置值的地方设置一个断点。这个断点会在事件触发的时候击中。var value = '2'; 用于设置值,而且可以修改。调试器会在这里暂停并允许篡改页面。这一功能非常有用,而且当它发生的时候,浏览器不会对它进行标记。

既然调试器暂停了执行代码,它同时也暂停了渲染。调试器本身是浏览器提供的工具之一,任何人都可以使用。这就是 Web Developer Tools(开发者工具)。

在 Code Pen 上可以看到这种技术的应用。下面是关于这个特性的截图:

这一特性对调试 JavaScript 十分有用,但是它的安全性如何呢?

这个特性意味着攻击者可以在运行时改变 JavaScript。攻击者可以通过断点暂时执行,然后修改 DOM 并在控制台输入任意 JavaScript 代码。这类功能可以利用客户端的漏洞,更改数据,支持会话并在页面内用 JavaScript 作出任意改动。

例如,打开开发者工具,进入控制台页面,并输入:


 
 
  1. document.querySelector('button'
  2.         .addEventListener('click'function () {  
  3.             alert('sacked'); 
  4.         });` 

下次这个事件再触发的时候,它会执行修改后的 JavaScript 代码。

为什么是 JavaScript?

你可能想问,这一切从何而来?Netscape 在1995年发布JavaScript的时候,这种新语言就成为了 Web 的 “胶水语言”。

Netscape 把 JavaScript 标准提交给Ecma国际组织之后,他们的版本就成为了标准,也就是大家所知的 ECMAScript。既然 ECMAScript 是一个标准,任何浏览器都被要求支持这个标准,这样在使用不同的浏览器时才会不发生冲突。也就是说,你可以为谷歌浏览器写一段代码,但它同时也能在 Opera、NetScape、Internet Explorer 和 Microsoft Edge 中运行。JavaScript 创建于灵活的环境,它有能力让你做你想做的事情。这些设计原则使用 JavaScript 自然具有了动态的天赋,也使它成为浏览器的语言。

这些都已经成为历史,但与 JavaScript 的安全性有什么关系?

客户端安全

为了防止恶意的 JavaScript 代码,最好的选择是添加运行时保护。运行时程序自我保护(Runtime Application Self-Protection,RASP)将在执行客户端代码的时候对它加以保护。随着 Web 灵活性和动态性的到来,攻击者通过客户端 JavaScript 进行攻击成为可能,运行时安全也成为必要。

RASP 是最为有效的客户端应用保护方式,总结起来如下所示:

运行时程序自我保护是一种安全技术,它创建或链接到应用程序或其运行环境,并控制应用程序执行,检测和防止实时攻击。

一旦JavaScript 在浏览器中执行,没有任何东西对其完全防护。RASP 会防范发生在运行时的高度和代码篡改攻击,包括在离线状态修改应用程序的攻击。一个好的 RASP 解决方案也会保护自身代码,使攻击者不能篡改解决方案本身,或者直接绕过它。这几层保护保证着开放网络的安全。

如果 RASP 不错,它会在攻击者尝试阻止代码的时候发出通知,以便用户知道并采取行动,比如取消用户会话。

Jscrambler提供了一个 RASP 解决方案来保证应用不受到运行时攻击。它会自我防御并检测篡改。它的自我防御能力会激活对 JavaScript 应用的保护。Jscrambler 使用反调试和反篡改技术——众所周知的应用程序保护概念——对 JavaScript 而言明确现实和局限。反调试功能检测调试工具(比如 DevTools, Firebug)的使用,并试图阻止逆向工程师使用它来调试应用。它包含一些预置的代码陷阱,使调试器停止工作,造成堆栈的增长,阻止用户探查应用的控制流。反篡改功能则会检查代码的变化,并做出反应。比如,你在自动防御所保护的一个函数中添加/删除一个分号,它会检测到变化,然后停止运行代码。两种技术与代码混淆结合会使得对应用程序的篡改寸步难行。

结论

实现 JavaScript 的安全性必须考虑在运行时会发生什么。它本质上来说是为 Web 的灵活性而生的动态语言。它是一柄双刃剑,使用的时候一定要注意到应尽的责任。


作者:佚名

来源:51CTO

相关文章
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
180 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
131 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
85 58
|
9天前
|
存储 JavaScript
(ERP系统查看DWG)MxCAD APP调用内部弹框的方法
MxCAD APP 二次开发提供了调用项目内部弹框的接口,以保持样式统一。用户需创建 `test_dialog` 文件夹并依次创建 `dialog.ts`、`dialog.vue` 和 `index.ts` 文件来注册、构建和渲染弹框。通过 `useDialogIsShow` 钩子函数控制弹框显示,并可在方法中直接调用 `dialog.showDialog()` 来控制弹框显隐。此外,还支持监听确认或取消事件获取数据,以及通过配置 `vite.config.ts` 解决样式冲突问题。最终在 `src/index.ts` 中引入相关文件即可实现弹框功能。
|
3天前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
1月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
181 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
101 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
56 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
170 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3天前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章