关于javascript:如何检测JavaScript中的死循环

37次阅读

共计 1878 个字符,预计需要花费 5 分钟才能阅读完成。

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

首先咱们须要应用 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

如愿以偿!撒花!

最初

这个办法不是完满的,不过满足了咱们本人的需要。你能够依据须要进行一下调整。

如果有更好的方法,欢送评论通知咱们。

心愿本文能帮忙到你,下次再见!

正文完
 0