Case5
An external script makes parsing stop at unsafe point
Description
If browsers encounters external script loading, browsers wait downloading of the external script and pause parsing. Browsers accept user events while browsers download the files. Users can click button3 in line 25 of case5.html when browsers download dummy.js. The function button3Clicked in line 29 of case5.html has not been defined because dummy.js is not parsed yet and a concurrency bug occurs when users click button3.
Example
http://pswlab.kaist.ac.kr:81/case5.html
Reference
Race Detection for Web Applications (PLDI'12)
Source code
case5.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case5</title>
</head>
<body>
<iframe src="case5_i.html"></iframe>
<script>
function button1Clicked() {
document.getElementById("button3").disabled = false;
}
function button2Clicked() {
document.getElementById("outputButton2").innerHTML = "Button2 is clicked"
}
function image1Loaded() {
document.getElementById("button1").disabled = false;
}
</script>
<div id="outputButton2"></div>
<div id="outputButton3"></div>
<img src="image1.jpg" onload="image1Loaded()" height="80" witdth="80"><br>
<button id="button1" disabled="true" onclick="button1Clicked()" height="20" width="120" >Button 1</button><br>
<button id="button2" onclick="button2Clicked()" height="20" width="120" >Button 2</button><br>
<button id="button3" onclick="button3Clicked()" disabled="true" height="20" width="120" >Button 3</button>
<script src="dummy.js">
</script>
<script>
function button3Clicked() {
document.getElementById("outputButton3").innerHTML = "Button3 is clicked";
}
</script>
</body>
</html>
case5_i.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case5 iframe</title>
</head>
<body>
<script>
function image2Loaded() {
document.getElementById("outputImage2").innerHTML = "Image2 is loaded";
}
</script>
<div id="outputImage2"></div>
<img src="image2.jpg" height="100" witdth="100" onload="image2Loaded()" />
</body>
</html>
dummy.js
// dummy. works noting.
// dummy. works noting.
// dummy. works noting.
Execution Model
Operations and an Inital Test Case
There are 8 operations in this example.
- p1: parsing operation, parse line 1~25 of case5.html
- p2: parsing operation, parse dummy.js and line 26~34 of case5.html
- p3: parsing operation, parse case5_i.html
- n1: network operation, trigger onload event of image1.jpg
- n2: network operation, trigger onload event of image2.jpg
- u1: user event operation, trigger onclick event of button1
- u2: user event operation, trigger onclick event of button2
- u3: user event operation, trigger onclick event of button3
The inital test case: p1 - p2 - n1 - n2 - n3 - u1 - u2 - u3
Happens-before Relations
- For two parsing operations: (p1, p2), (p1, p3)
- For two user event operations: (u1, u2), (u2, u3)
- For a parsing operation and a user event operation: (p1, u1), (p1, u2), (p1, u3)
- For a network operation: (p1, n1), (p3, n2)
Generated Possible Test Cases
105 test cases are generated and 21 test cases of them are buggy because they contains (b3, p2).
