js中while死循环语句_如何检测JavaScript中的死循环？

素颜马尾好姑娘i 2022-11-05 00:48 249阅读 0赞

如果我们需要执行用户写的代码，如和避免死循环？我们最近遇到了这个问题，因为写错代码很常见，所以我们进行了一下尝试。

![0fc18355272e8abe80140e4cfae260f5.png][]

首先我们需要使用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。

首先 parse用户的代码为ASTimport \{ 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

![0fc18355272e8abe80140e4cfae260f5.png][]

如愿以偿！撒花！

最后

这个方法不是完美的，不过满足了我们自己的需求。你可以根据需要进行一下调整。

如果有更好的办法，欢迎评论告诉我们。

希望本文能帮助到你，下次再见！

[0fc18355272e8abe80140e4cfae260f5.png]: /images/20221023/ea49605839f143d6ad5305d29f4a10ee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关死循环while/for中new对象? 不怕 OOM 吗？

一、前言今天遇到一个又去的问题，在死循环中new对象，会造成 OOM 吗？把这问题发到技术群中，有说会，有说不会的，引起一片热论。我们还是来个demo模拟一下，

ゝ一纸荒年。/ 2023年02月22日 03:58/ 0 赞/ 8 阅读

相关死循环

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2023年02月20日 13:46/ 0 赞/ 23 阅读

相关 Java中的死循环

概述： > 适用所有的循环语句，循环语句的循环条件恒成立，循环语句停止不下来的语句就是死循环好处： > 解决一些特殊的场景应用，比如：无限登录服务器的运行

末蓝、/ 2022年12月27日 12:35/ 0 赞/ 146 阅读

相关 JavaScript （for，while）循环语句

for 循环 for 循环是 JS 中最常用的一个循环工具，经常用于数组的循环遍历。格式： for (初始化变量; 条件表达式; 迭代语句) {

布满荆棘的人生/ 2022年11月14日 13:25/ 0 赞/ 335 阅读

相关 JavaScript while 循环语句

循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立时终止。 while 循环语句 while 循环会在指定条件为 true 时

悠悠/ 2022年11月12日 09:51/ 0 赞/ 262 阅读

相关 js中while死循环语句_如何检测JavaScript中的死循环？

如果我们需要执行用户写的代码，如和避免死循环？我们最近遇到了这个问题，因为写错代码很常见，所以我们进行了一下尝试。 ![0fc18355272e8abe80140e4cfae

素颜马尾好姑娘i/ 2022年11月05日 00:48/ 0 赞/ 250 阅读

相关 js中的循环语句

我们在程序中最常见到的就是对数组元素的遍历了，就是我们常说的循环语句。在javascript权威指南中对循环语句的定义是程序路径的一个回路，可以让一部分代码重复执行。Javas

落日映苍穹つ/ 2022年07月13日 09:38/ 0 赞/ 256 阅读

相关 JS中的while循环

while语句是根据括号内的判断条件进行判断是否继续循环，如果括号里面的条件成立，意思这个循环会无限执行下去，一直到条件不成立时才结束。 while (条件){

以你之姓@/ 2022年06月05日 05:05/ 0 赞/ 278 阅读

相关 Java中的循环结构：while语句、do...while语句和for循环

有些程序在某些条件下重复执行多次，称之为循环结构程序。 1. while语句 while语句的语法如下： while(布尔表达式){ 循环体

Love The Way You Lie/ 2022年05月10日 10:03/ 0 赞/ 455 阅读

相关 While 循环语句和do while循环语句

While循环语句的格式 while（循环条件）\{ \} 如果循环条件的值为true，那么就执行大括号里面的内容，否则不执行大括号里面的内容（如果大括号外面还有内容

待我称王封你为后i/ 2022年04月22日 03:06/ 0 赞/ 463 阅读