如果咱们须要执行用户写的代码，如和防止死循环？咱们最近遇到了这个问题，因为写错代码很常见，所以咱们进行了一下尝试。
首先咱们须要应用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 = 0const __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如愿以偿！撒花！
最初
这个办法不是完满的，不过满足了咱们本人的需要。你能够依据须要进行一下调整。
如果有更好的方法，欢送评论通知咱们。
心愿本文能帮忙到你，下次再见！