I’ve been spending some time writing a client-side JavaScript library (more on this in a later post) that does a fair amount of DOM manipulation and has had its share of cross-browser, erm, idiosyncrasies. The foundation of the library depends rather heavily on jQuery for traversal, DOM insertion and removal, and the likes. It’s also fully unit-tested and therefore it’s relatively trivial to wire-in another browser, run up the unit tests, and see what works (or doesn’t). Unsurprisingly, every browser except most flavors of MSIE have worked without issues, but many of the MSIE issues I encountered have relied on minor workarounds for missing features or misbehavior that’s more noisome than frustrating.
That is to say until I discovered it’s possible to crash MSIE7 using a mix of traversal, detaching, and cloning. Needless to say, the unit tests barely finished, and I was left surprised. I’ve since fixed the problem, but it’s nevertheless been a curio in need of a simplified test case.
First, I want to point out that I suspect this may be tangentially related to this bug, although I’m reluctant to call it a jQuery “bug” considering that it works fine in every other version of MSIE (including 6 and ever other browser I’ve tested). Furthermore, since the release of jQuery 2.x drops support for MSIE 6, 7, and 8, the importance of addressing this “bug” is largely moot. Most applications, particularly single-page client-side applications that perform a great deal of work directly on the DOM, target newer browsers anyway. Only those with a large or predominantly non-technical audience ought to worry, and many of those sites likely don’t make use of much JavaScript outside advertising and analytics.
The bug manifests itself whenever the user manipulates the .data() method on an element and subsequently detaches that element and clones it. Actually, that’s a lie: Detaching and .data() manipulation can occur in any sequence. The important bit to take from this is that any manipulation of .data() on an element that has been or will be detached and further cloned will duplicate this behavior. Here’s a short example.
Given the HTML:
<div class="crash-me">Loop over this node's data, detach it, and clone it
to crash MSIE7.</div> |
<div class="crash-me">Loop over this node's data, detach it, and clone it
to crash MSIE7.</div>
And the JavaScript (using jQuery):
var $element = $(".crash-me");
// Looping over data elements. The crash will occur even if they're empty.
$.each($($element[0]).data(), function(key, value){
$("#values").append(key+": "+value+"<br>");
});
// Now to detach.
$element.detach();
// Crash.
for (var i = 0; i < 5; i++) {
// You won't see the clones in MSIE7 'cause it's dead.
// Technically, you only need the $element.clone() call.
$("#nodes").append($element.clone());
} |
var $element = $(".crash-me");
// Looping over data elements. The crash will occur even if they're empty.
$.each($($element[0]).data(), function(key, value){
$("#values").append(key+": "+value+"<br>");
});
// Now to detach.
$element.detach();
// Crash.
for (var i = 0; i < 5; i++) {
// You won't see the clones in MSIE7 'cause it's dead.
// Technically, you only need the $element.clone() call.
$("#nodes").append($element.clone());
}
You can also replace the $.each with a for-loop to the same effect:
var attributes = $element[0].attributes;
$($element[0]).data("test", 1);
for (var i = 0; i < attributes.length; i++) {
// You only need to access nodeName or nodeValue to do this horrible deed.
if (attributes[i].nodeName) {
$("#values").append(attributes[i].nodeName+": "+attributes[i].nodeValue+"<br>");
}
} |
var attributes = $element[0].attributes;
$($element[0]).data("test", 1);
for (var i = 0; i < attributes.length; i++) {
// You only need to access nodeName or nodeValue to do this horrible deed.
if (attributes[i].nodeName) {
$("#values").append(attributes[i].nodeName+": "+attributes[i].nodeValue+"<br>");
}
}
The difference, however, is that the $.each loop will trigger the crash whether or not the inner function does anything (since the nodes’ attributes have already been accessed); the for-loop requires that you do something with attributes, such as fetching the nodeName or nodeValue. This is essentially what $.each does anyway, so the two methods accomplish roughly the same thing.
The workaround for this is to simply avoid touching .data() on any node that is (or will be) detached from the DOM and operate only on the clones. In my case, I have a traverse() method that traverses over all DOM elements, looking for data-* attributes, and then examines their children for more data-* elements. To avoid this bug, I have a flag for the attribute handlers that indicates whether or not it detaches its children; if it does, traverse() simply ignores it and carries on with its business. It’s up to the handler to call traverse() on the clones of its detached children, never operating directly on the original children themselves. Since each handler that relies on traversal uses the same traverse() method for DOM manipulation, it’s easy to manage the fix in a single location.
Of course, if you have little choice but to examine the data attributes of a detached node before cloning them, you’re be out of luck. Fortunately, MSIE7 usage is declining, and if you’re outside the financial sector or government, you should be safe! My condolences otherwise.
