前言

如果我們需要執(zhí)行用戶(hù)寫(xiě)的代碼，如和避免死循環(huán)？我們最近遇到了這個(gè)問(wèn)題，因?yàn)閷?xiě)錯(cuò)代碼很常見(jiàn)，所以我們進(jìn)行了一下嘗試。

首先我們需要使用iframe

這主要是安全考慮，我們需要一個(gè)sandbox環(huán)境來(lái)執(zhí)行JavaScript，避免影響到整體。iframe的sandbox屬性可以用來(lái)禁止彈窗等等，非常有用。

地址可以選擇Blob url，不過(guò)blob url會(huì)持有當(dāng)前web page的origin，如果用戶(hù)拷貝一些亂七八糟的代碼不小心執(zhí)行的話，會(huì)有安全問(wèn)題。所以最終決定用data URI。

iframe的執(zhí)行仍然在同一個(gè)thread

iframe中執(zhí)行了代碼，發(fā)生死循環(huán)的時(shí)候，瀏覽器還是死掉了，因?yàn)閕frame和parent還是在同一個(gè)thread。也就是說(shuō)，我們無(wú)法在parent中進(jìn)行timeout檢測(cè)，因?yàn)闄z測(cè)代碼在死循環(huán)發(fā)生時(shí)永遠(yuǎn)不會(huì)被執(zhí)行。

Web Worker可行但不支持DOM API

如果是純粹的JavaScript代碼，或許用web worker可以，但是我們需要DOM API，所以Web Worker也不在考慮范圍之中。

看來(lái)只能修改用戶(hù)代碼了

假設(shè)大多數(shù)死循環(huán)都是由while/for引起的，如果我們能插入一些代碼并在每一次循環(huán)中進(jìn)行檢測(cè)，我們也許就可以根據(jù)某些條件提前終止循環(huán)。

比如這樣的代碼

function abc() {
 while (true) {
  console.log(Date.now())
 }
}

如果我們插入一個(gè) __detectInfiniteLoop() 方法，并在while loop里面調(diào)用的話，就可以在loop 10000次的時(shí)候報(bào)錯(cuò)終止執(zhí)行。

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在合適位置插入代碼

通過(guò)字符串匹配來(lái)編輯代碼細(xì)節(jié)太復(fù)雜容易出錯(cuò)，我們可以用編輯AST的方式，實(shí)際上非常簡(jiǎn)單。

用到babel的3個(gè)package。

1. @babel/parser - parse 代碼為AST
2. @babel/traverse - 搜索 for/while loop
3. @babel/generator - 生成插入后的代碼
   

首先 parse用戶(hù)的代碼為AST

import { parse } from '@babel/parser'
const ast = parse(code)

然后我們準(zhǔn)備一下需要插入的代碼。

代碼有兩部分，第一部分是function定義，實(shí)際上可以在頭部插入，所以字符串就夠了。第二部分是function的調(diào)用，這部分需要插入到AST中，所以也需要parse一下。

const prefix = `
 let __count = 0
 const __detectInfiniteLoop = () => {
  if (__count > 10000) {
   throw new Error('Infinite Loop detected')
  }
  __count += 1
 }
`

const detector = parse(`__detectInfiniteLoop()`)

接下來(lái)就找到 while/for/do..while 的位置，然后插入detector的調(diào)用。

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中執(zhí)行。

import generate from '@babel/generator'
const newCode = prefix + generate(ast).code

如愿以?xún)?！撒花?/p>

最后

這個(gè)方法不是完美的，不過(guò)滿(mǎn)足了我們自己的需求。你可以根據(jù)需要進(jìn)行一下調(diào)整。

到此這篇關(guān)于如何檢測(cè)JavaScript中的死循環(huán)的文章就介紹到這了,更多相關(guān)檢測(cè)JavaScript死循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論