如何检测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死循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javaScript如何跳出多重循环break、continue

    先来说说break和continue之间的区别 摘自JavaScript高级程序设计 for(var i=0;i<10;i++){ if(i>5){ break; } } console.log(i); ---6 •当i=5和10的时候,会执行到break,并退出循环 for(var i=1;i<10;i++){ if(i>5){ continue; } num++; } console.log(num); ---4 var num=0; for(var i=1;i<10;i

  • 详解Struts2中json 相互引用死循环解决办法

    方法1 :利用Struts 2的支持的可配置结果,可以达到过滤器的效果.Action的处理结果配置支持正则表达式. 但是如果返回的对象是一个数组格式的Json数据.比如peson Bean中有对象persion1-person9,而我只要person1的json数据, 则可以用如下的正则表达式. <struts> <constant name="struts.objectFactory" value="spring"/> <includ

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

  • js 数组的for循环到底应该怎么写？

    js 数组的for循环到底应该怎么写？

    然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

  • js for终止循环 跳出多层循环

    今天我们小编写带代码的时候遇到一段代码,需要终止运行for,通过遍历json数据实现判断 <script> var Tid="55555"; var jb51cp = [ {id:66666,Cpurl:"https://baidu.com"}, {id:55555,Cpurl:"https://www.jb51.net"} ]; for(var i = 0; i < jb51cp.length; i++){ if(jb51cp

  • js和jquery中循环的退出和继续下一个循环

    作为水货,就是学会了1+1=3也要记录一下!错了,是2 学习记录: js中的 for(var i=1;i<5;i++){ if(i==3){ break; // 使用break,弹出2次提示分别为1,2:如果使用continue,则会弹出3次,分别是1,2,4 } alert(i); } 循环,退出循环,使用break:退出当前循环继续下一个循环,使用continue jquery中的each()方法中要实现break,使用return false:continue,使用return true

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • JavaScript中循环遍历Array与Map的方法小结

    js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET

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

    前言 如果我们需要执行用户写的代码,如和避免死循环?我们最近遇到了这个问题,因为写错代码很常见,所以我们进行了一下尝试. 首先我们需要使用iframe 这主要是安全考虑,我们需要一个sandbox环境来执行JavaScript,避免影响到整体.iframe的sandbox属性可以用来禁止弹窗等等,非常有用. 地址可以选择Blob url,不过blob url会持有当前web page的origin,如果用户拷贝一些乱七八糟的代码不小心执行的话,会有安全问题.所以最终决定用data URI. if

  • JavaScript中的FileReader示例详解

    JavaScript中的FileReader示例详解

    目录 前言: input:file FileReader 补充:一个比较全面的例子 总结 前言: FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <input type="file" id="file"> input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况

  • 常用JavaScript正则表达式汇编与示例详解

    1.1 前言 目前收集整理了21个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IP地址. 十六进制颜色. 日期. 微信号.车牌号.中文正则等.表单验证处理必备,赶紧收藏吧! 还会陆续加入新的正则进来,大家多提宝贵意见! 2.1 用户名正则 2.1.1 基本用户名正则 在做用户注册时,都会用到用户名正则校验. 定义基本用户名命名规则如下: 最短4位,最长16位 {4,16} 可以包含小写大母 [a-z]

  • JavaScript中 ES6 generator数据类型详解

    1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

  • javascript 中的继承实例详解

    javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现. 下面介绍几种js的继承: 原型链继承 原型链继承实现的本质是重写原型对象,代之以一个新类型的实例.代码如下: function SuperType() { this.pr

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • JavaScript中深拷贝与浅拷贝详解

    目录 1 浅拷贝概念 2 深拷贝概念 3 浅拷贝的实现方式 3.1 Object.assign() 3.2 Array.prototype.concat() 3.3 Array.prototype.slice() 3.4 直接赋值 4 深拷贝的实现方式 4.1 JSON.parse(JSON.stringify()) 4.2 函数库lodash 总结 1 浅拷贝概念 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的. 浅拷贝是创建一个新对象,该对象有着原始对象属性值的一份精确拷

  • JavaScript函数封装的示例详解

    JavaScript函数封装的示例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

随机推荐