前言前言前言如果我们需要执行用户写的代码，如和避免死循环？我们最近遇到了这个问题，因为写错代码很常见，所以我们进行了一下尝试。首先我们需要使用iframe首先我们需要使用iframe首先我们需要使用iframe这主要是安全考虑，我们需要一个sandbox环境来执行JavaScript，避免影响到整体。iframe的sandbox属性可以用来禁止弹窗等等，非常有用。地址可以选择Blob url，不过blob url会持有当前web page的origin，如果用户拷贝一些乱七八糟的代码不小心执行的话，会有安全问题。所以最终决定用data URI。iframe的执行仍然在同一个threadiframe的执行仍然在同一个threadiframe的执行仍然在同一个threadiframe中执行了代码，发生死循环的时候，浏览器还是死掉了，因为iframe和parent还是在同一个thread。也就是说，我们无法在parent中进行timeout检测，因为检测代码在死循环发生时永远不会被执行。Web Worker可行但不支持DOM APIWeb Worker可行但不支持DOM APIWeb Worker可行但不支持DOM API如果是纯粹的JavaScript代码，或许用web worker可以，但是我们需要DOM API，所以Web Worker也不在考虑范围之中。看来只能修改用户代码了看来只能修改用户代码了看来只能修改用户代码了假设大多数死循环都是由while/for引起的，如果我们能插入一些代码并在每一次循环中进行检测，我们也许就可以根据某些条件提前终止循环。比如这样的代码
function abc() {
while (true) {

console.log(Date.now())
}
}
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()
}
}
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在合适位置插入代码操作AST在合适位置插入代码通过字符串匹配来编辑代码细节太复杂容易出错，我们可以用编辑AST的方式，实际上非常简单。用到babel的3个package。

@babel/parser - parse 代码为AST

@babel/traverse - 搜索 for/while loop

@babel/generator - 生成插入后的代码


@babel/parser - parse 代码为AST@babel/traverse - 搜索 for/while loop@babel/generator - 生成插入后的代码

首先 parse用户的代码为AST
import { parse } from '@babel/parser'
const ast = parse(code)

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()`)


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)
}
})

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

import generate from '@babel/generator'
const newCode = prefix + generate(ast).code
如愿以偿！撒花！最后
最后
最后
这个方法不是完美的，不过满足了我们自己的需求。你可以根据需要进行一下调整。