如何检测JavaScript中的死循环示例详解


Posted in Javascript onAugust 30, 2020

前言

如果我们需要执行用户写的代码,如和避免死循环?我们最近遇到了这个问题,因为写错代码很常见,所以我们进行了一下尝试。

如何检测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。

  1. @babel/parser - parse 代码为AST
  2. @babel/traverse - 搜索 for/while loop
  3. @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

如何检测JavaScript中的死循环示例详解

如愿以偿!撒花!

最后

这个方法不是完美的,不过满足了我们自己的需求。你可以根据需要进行一下调整。

到此这篇关于如何检测JavaScript中的死循环的文章就介绍到这了,更多相关检测JavaScript死循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
JavaScript中CreateTextFile函数
Aug 30 #Javascript
详解vue组件之间的通信
Aug 30 #Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 #Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 #Javascript
JS如何判断对象是否包含某个属性
Aug 29 #Javascript
JS获取当前时间戳方法解析
Aug 29 #Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 #Javascript
You might like
PHP中Session的概念
2006/10/09 PHP
php4的session功能评述(二)
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php截取字符串函数分享
2015/02/02 PHP
简单的自定义php模板引擎
2016/08/26 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
python绘制直方图和密度图的实例
2019/07/08 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
毕业生求职自荐书范文
2014/03/27 职场文书
终止合同协议书
2014/04/17 职场文书
无毒社区工作方案
2014/05/23 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL