前言
如果我们需要执行用户写的代码,如和避免死循环?我们最近遇到了这个问题,因为写错代码很常见,所以我们进行了一下尝试。
首先我们需要使用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。
- @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
如愿以偿!撒花!
最后
这个方法不是完美的,不过满足了我们自己的需求。你可以根据需要进行一下调整。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]