如何检测JavaScript中的死循环?
如果我们需要执行用户写的代码,如和避免死循环?我们最近遇到了这个问题,因为写错代码很常见,所以我们进行了一下尝试。
首先我们需要使用iframe
这主要是安全考虑,我们需要一个sandbox环境来执行JavaScript,避免影响到整体。iframe的sandbox属性可以用来禁止弹窗等等,非常有用。
地址可以选择Blob url,不过blob url会持有当前web page的origin,如果用户拷贝一些乱七八糟的代码不小心执行的话,会有安全问题。所以最终决定用data URI。
iframe的执行仍然在同一个thread
iframe中执行了代码,发生死循环的时候,浏览器还是死掉了,因为iframe和parent还是在同一个thread。也就是说,我们无法在parent中进行timeout检测,因为检测代码在死循环发生时永远不会被执行。
Web Worker可行但不支持DOM API
如果是纯粹的JavaScript代码,或许用web worker可以,但是我们需要DOM API,所以Web Worker也不在考虑范围之中。
看来只能修改用户代码了
假设大多数死循环都是由while/for
引起的,如果我们能插入一些代码并在每一次循环中进行检测,我们也许就可以根据某些条件提前终止循环。
比如这样的代码
function abc() {
while (true) {
console.log(Date.now())
}
}
如果我们插入一个 __detectInfiniteLoop()
方法,并在while loop里面调用的话,就可以在loop 10000次的时候报错终止执行。
let __count = 0
const __detectInfiniteLoop = () => {
if (__count > 10000) {
throw new Error('Infinite Loop detected')
}
__count += 1
}
function abc() {
while (true) {
console.log(Date.now())
__detectInfiniteLoop()
}
}
操作AST在合适位置插入代码
通过字符串匹配来编辑代码细节太复杂容易出错,我们可以用编辑AST的方式,实际上非常简单。
用到babel的3个package。
- @babel/parser - parse 代码为AST
- @babel/traverse - 搜索 for/while loop
- @babel/generator - 生成插入后的代码
首先 parse用户的代码为AST
import { parse } from '@babel/parser'
const ast = parse(code)
然后我们准备一下需要插入的代码。
代码有两部分,第一部分是function定义,实际上可以在头部插入,所以字符串就够了。第二部分是function的调用,这部分需要插入到AST中,所以也需要parse一下。
const prefix = `
let __count = 0
const __detectInfiniteLoop = () => {
if (__count > 10000) {
throw new Error('Infinite Loop detected')
}
__count += 1
}
`
const detector = parse(`__detectInfiniteLoop()`)
接下来就找到 while/for/do..while 的位置,然后插入detector的调用。
import traverse from '@babel/traverse'
traverse(ast, {
ForStatement: function (path) {
path.node.body.body.push(...detector.program.body)
},
WhileStatement: function (path) {
path.node.body.body.push(...detector.program.body)
},
DoWhileStatement: function (path) {
path.node.body.body.push(...detector.program.body)
}
})
AST修改好了,最后一步就是生成最终的代码,然后放到iframe中执行。
import generate from '@babel/generator'
const newCode = prefix + generate(ast).code
如愿以偿!撒花!
最后
这个方法不是完美的,不过满足了我们自己的需求。你可以根据需要进行一下调整。
如果有更好的办法,欢迎评论告诉我们。
希望本文能帮助到你,下次再见!
- [MyBatis]诡异的Invalid bound statement (not found)错误
- jfinal自定义freemarker标签
- Angrok 一个内网穿透服务
- Druid数据库连接池 实现数据库账号密码加密
- 【maven学习】划分模块
- 缓存策略优化
- Quartz框架应用(1)
- 6个编写优质干净代码的技巧
- 【Jfinal源码】第一章 com.jfinal.core.JFinalFilter(1)
- 【ehcache】 timeToLiveSeconds 和 timeToLiveSeconds 的区别
- 升级 CentOS7 、Redis 3.2.x 的问题
- AngularJS 中使用Swiper制作滚动图不能滑动
- JAVA服务端配置允许跨域请求
- CentOS mysql配置主从复制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- OpenAI Gym入门级导游 | 附PDF手册下载 | 山人刷强化 | 4th
- python中常见关于Excel表格读写操作
- 2行代码搞定一个定时器!
- python算法题练习---二分法
- 局部加权线性回归 | 冰水数据智能专题 | 3rd
- 一文探讨 RPC 框架中的服务线程隔离
- Python3与Python2的具体区别
- 分布式系统的概念都搞懂了吗?(上)
- Kafka-manager部署与使用简单介绍
- 面向对象的7种设计原则(5)-里氏代换原则
- CentOS7下利用Google Authenticator实现SSH登录的二次身份验证
- 满分室间质评之GATK Somatic SNV+Indel+CNV+SV(下)性能优化
- poiAndEasyExcel学习(六)
- C++ 模板沉思录(上)
- Python 为什么会有个奇怪的“...”对象?