Web應(yīng)用程序異步請(qǐng)求時(shí)序問(wèn)題檢測(cè)*

2018-01-16 01:43:09吉華斌

計(jì)算機(jī)與生活 2018年1期

吉華斌，尚穎，李征

北京化工大學(xué) 信息科學(xué)與技術(shù)學(xué)院，北京 100029

1 引言

Web應(yīng)用程序是指用戶可以通過(guò)Web瀏覽器訪問(wèn)的應(yīng)用程序，由完成特定任務(wù)的各種Web組件構(gòu)成，并通過(guò)Web頁(yè)面將結(jié)果展示給用戶[1]。隨著Web應(yīng)用程序的發(fā)展，異步請(qǐng)求過(guò)程在其中扮演越來(lái)越重要的角色。通過(guò)異步請(qǐng)求的工作方式，Web應(yīng)用程序結(jié)合JavaScript（JS）和對(duì)文檔對(duì)象模型（document object model，DOM）的操作，完成數(shù)據(jù)的修改與傳輸，實(shí)現(xiàn)高水平的用戶交互[2]。

DOM是處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口，它定義了HTML/XML的數(shù)據(jù)對(duì)象和屬性以及訪問(wèn)方法[3]。Web應(yīng)用程序的數(shù)據(jù)操作請(qǐng)求一般是通過(guò)JS對(duì)DOM的數(shù)據(jù)操作[4]，包括添加、移除、改變或重排頁(yè)面上的DOM項(xiàng)目，重構(gòu)HTML文檔。

AJAX（asynchronous JavaScript and XML）技術(shù)是異步請(qǐng)求中最為常見(jiàn)的一種交互技術(shù)。AJAX是指異步的JavaScript和XML結(jié)合，在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的特定部分進(jìn)行更新[5]。AJAX通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，從而大大提高了與用戶之間的交互速度[6]。

AJAX技術(shù)在提高Web應(yīng)用程序與用戶交互水平的同時(shí)，由于Web應(yīng)用程序設(shè)計(jì)不合理或網(wǎng)絡(luò)延遲等原因，可能導(dǎo)致服務(wù)端不能及時(shí)響應(yīng)客戶端請(qǐng)求，傳輸?shù)臄?shù)據(jù)發(fā)生錯(cuò)誤，影響用戶的使用[7]。這些錯(cuò)誤通常稱為異步請(qǐng)求錯(cuò)誤。

一些靜態(tài)分析方法被應(yīng)用于此類問(wèn)題的分析檢測(cè)。如Guha等人對(duì)JavaScript程序靜態(tài)控制流進(jìn)行分析，用于AJAX的錯(cuò)誤檢測(cè)[8]；Marchetto等人使用基于狀態(tài)的測(cè)試事件序列，用于測(cè)試AJAX特定的錯(cuò)誤，并通過(guò)使用啟發(fā)式搜索算法優(yōu)化生成AJAX事件序列，有效檢出AJAX錯(cuò)誤[9]；Zheng等人則通過(guò)使用邏輯數(shù)據(jù)語(yǔ)言實(shí)現(xiàn)對(duì)JavaScript進(jìn)行靜態(tài)分析，并實(shí)現(xiàn)從服務(wù)端抽取JavaScript并進(jìn)行重寫，用于檢測(cè)AJAX存在的原子沖突和數(shù)據(jù)不一致問(wèn)題[10]等。

當(dāng)異步請(qǐng)求的返回為靜態(tài)常量時(shí)，上述方法能很好地檢測(cè)其中的問(wèn)題，但是當(dāng)異步請(qǐng)求的返回為非靜態(tài)常量時(shí)，如對(duì)DOM的操作、變量操作、URL跳轉(zhuǎn)等，這些方法只能將其默認(rèn)為靜態(tài)常量[11]。這些返回?cái)?shù)據(jù)可以進(jìn)一步觸發(fā)事件，進(jìn)而引發(fā)異步請(qǐng)求錯(cuò)誤，但作為靜態(tài)常量處理后，這些錯(cuò)誤將不再可能被檢出。

為了模擬異步請(qǐng)求過(guò)程，測(cè)試AJAX執(zhí)行過(guò)程中可能發(fā)生的問(wèn)題，一些開(kāi)源的工具如WebCollector（https://github.com/CrawlScript/WebCollector/）、OWASP AJAX Crawling Tool（https://code.google.com/archive/p/fuzzops-ng/）、CRAWLJAX[12]可以通過(guò)獲取AJAX動(dòng)態(tài)執(zhí)行結(jié)果，對(duì)AJAX建立狀態(tài)模型進(jìn)行測(cè)試[13]。Dong等人通過(guò)建立模型抓取詳細(xì)而精確的用戶交互之間的關(guān)聯(lián)和依賴，判斷其調(diào)用的實(shí)際方法在AJAX調(diào)用時(shí)是否被改寫，由此判斷數(shù)據(jù)傳輸是否符合預(yù)期，實(shí)現(xiàn)對(duì)異步請(qǐng)求的錯(cuò)誤診斷[14]等。這些動(dòng)態(tài)分析方法通過(guò)動(dòng)態(tài)執(zhí)行能夠呈現(xiàn)異步請(qǐng)求返回為非靜態(tài)常量的各種情況，但分析的核心是傳輸數(shù)據(jù)結(jié)果的準(zhǔn)確性，對(duì)異步請(qǐng)求返回中存在的事件操作之間或與原有的異步操作之間可能引發(fā)的異步請(qǐng)求問(wèn)題檢測(cè)較少。

本文在動(dòng)態(tài)分析技術(shù)的基礎(chǔ)上，對(duì)返回值為非靜態(tài)常量的異步請(qǐng)求操作，通過(guò)URL參數(shù)從服務(wù)器端獲取完整的返回?cái)?shù)據(jù)，并進(jìn)一步解析其中的事件操作，分析兩個(gè)事件操作之間或與原有的異步請(qǐng)求之間可能引發(fā)的問(wèn)題，將此類問(wèn)題定義為異步請(qǐng)求時(shí)序問(wèn)題，并將兩者一起構(gòu)成異步請(qǐng)求交錯(cuò)圖，通過(guò)圖的連通關(guān)系檢測(cè)可能發(fā)生的異步請(qǐng)求錯(cuò)誤。在實(shí)踐過(guò)程中，重點(diǎn)分析了異步請(qǐng)求可能發(fā)生的DOM未加載、DOM共用和變量沖突等錯(cuò)誤。最后通過(guò)動(dòng)態(tài)驗(yàn)證檢測(cè)結(jié)果的有效性。

本文的主要貢獻(xiàn)是：（1）提出了一種基于交錯(cuò)圖的異步請(qǐng)求時(shí)序問(wèn)題檢測(cè)方法，將能夠引發(fā)異步請(qǐng)求的事件和數(shù)據(jù)組成交錯(cuò)圖，對(duì)異步請(qǐng)求事件操作返回?cái)?shù)據(jù)為非靜態(tài)常量的可能引發(fā)的異步請(qǐng)求時(shí)序錯(cuò)誤進(jìn)行分析和檢測(cè)。（2）實(shí)現(xiàn)了一個(gè)完整的工具原型，用于自動(dòng)化檢測(cè)Web應(yīng)用程序中的異步請(qǐng)求時(shí)序問(wèn)題。（3）對(duì)現(xiàn)有5個(gè)開(kāi)源Web應(yīng)用程序和5個(gè)特定Web應(yīng)用程序，檢測(cè)其中的異步請(qǐng)求時(shí)序問(wèn)題，并通過(guò)控制網(wǎng)絡(luò)條件進(jìn)行驗(yàn)證，結(jié)果表明了本文提出的檢測(cè)方法的有效性。

2 異步請(qǐng)求時(shí)序問(wèn)題

2.1 異步請(qǐng)求過(guò)程

首先介紹只有一個(gè)事件觸發(fā)的異步請(qǐng)求過(guò)程，其詳細(xì)過(guò)程如圖1所示，上面橢圓表示異步請(qǐng)求過(guò)程中的各個(gè)動(dòng)作，下面矩形表示頁(yè)面中的DOM元素跟隨動(dòng)作發(fā)生的變化。假定頁(yè)面包含DOM1、DOM2和DOM3共3組DOM元素，DOM1中包含一個(gè)能夠引發(fā)異步請(qǐng)求的事件A1。

步驟1用戶觸發(fā)了事件A1，異步請(qǐng)求的返回將會(huì)作用于DOM2，此時(shí)頁(yè)面中DOM2和DOM3保持不變。

步驟2瀏覽器發(fā)送請(qǐng)求給服務(wù)端，頁(yè)面中DOM2和DOM3保持不變。

步驟3服務(wù)端后端進(jìn)行處理，頁(yè)面中DOM2和DOM3保持不變。

步驟4瀏覽器獲取返回后開(kāi)始進(jìn)行加載，頁(yè)面中DOM2和DOM3保持不變。

步驟5瀏覽器加載完全，用戶看到DOM2更新為DOM2′，如圖1中的陰影部分，DOM3保持不變。

根據(jù)異步請(qǐng)求的異步特性，在異步請(qǐng)求進(jìn)行過(guò)程的5個(gè)步驟中，頁(yè)面中的DOM元素不會(huì)被鎖定，仍然可以繼續(xù)操作。下面考慮多個(gè)異步請(qǐng)求的情況。

Fig.1 Process of asynchronous request圖1 異步請(qǐng)求詳細(xì)過(guò)程

2.2 引例

下面給出了一組返回值為非靜態(tài)常量的異步請(qǐng)求代碼示例（如圖2所示），詳細(xì)了解兩個(gè)異步請(qǐng)求進(jìn)行過(guò)程中的關(guān)系。圖2（a）表示ID為tip的DOM綁定了一個(gè)click事件，并由此事件引發(fā)了一個(gè)AJAX請(qǐng)求，包含url、data、type等參數(shù)，成功后返回參數(shù)xhr，并操作了ID為content的DOM元素，將返回值嵌入到其中。此時(shí)的返回值xhr.data即為非靜態(tài)常量，具體體現(xiàn)在content中是一個(gè)標(biāo)簽，但是在異步請(qǐng)求執(zhí)行之前并不知道其具體的值。圖2（b）表示ID為choose的DOM綁定了一個(gè)click事件，返回值也是一個(gè)非靜態(tài)常量，最終也操作了ID為content的DOM元素，并將返回值嵌入到其中。圖2（c）表示content對(duì)應(yīng)的HTML代碼。

根據(jù)一個(gè)異步請(qǐng)求的過(guò)程圖（圖1），將tip綁定的Ajax事件記為tip.click，choose.click表示choose綁定的Ajax事件。如果連續(xù)觸發(fā)事件tip.click和choose.click，可以得到兩個(gè)異步請(qǐng)求的過(guò)程圖如圖3。

圖3表示tip.click和choose.click都會(huì)操作ID為content的DOM元素。由于在一個(gè)異步請(qǐng)求過(guò)程中，頁(yè)面不會(huì)被鎖定，即在圖3中choose.click可能發(fā)生在tip.click完成之前的任何一個(gè)過(guò)程中。tip.click觸發(fā)的異步請(qǐng)求返回將更新content，當(dāng)在tip.click觸發(fā)的請(qǐng)求沒(méi)有完成對(duì)content更新之前（即content更新為content′之前），用戶觸發(fā)了choose.click，choose.click觸發(fā)的請(qǐng)求也將更新content，即對(duì)于content的最終更新結(jié)果content″，不確定是tip.click觸發(fā)的異步請(qǐng)求更新的結(jié)果，還是choose.click觸發(fā)的異步請(qǐng)求更新的結(jié)果，進(jìn)而引發(fā)后續(xù)的操作錯(cuò)誤。