Monday, June 22, 2009

Making Safari 4 go "BOOM!" -- javascript style

So I've been busy working on a project for work, and totally missed the fact that Safari 4 was released. That was until I got a bug report that my application crashed Safari 4. It wasn't that hard to work around the crash, but javascript should NEVER cause the browser to crash. Hang? Maybe, and maybe even make it slow as hell, but crash? Never. Well, maybe it could cause it to run out of memory and crash, but I mean just straight up, kick the browser in the shins and make it fall over, crash.

Sure, we all know programs have bugs, and web browsers are programs, so bugs are bound to be there. I guess I'm lucky (or unlucky) to be the one that finds one.

So basically, this bug stems from trying to select() a text input that was orginally inside a hidden div, that was later exposed. Below is a very simple html/css/js example that demonstrates the flaw. I've also included a link to the same example, just in case you want to see it for your self. It uses jquery, but it could probably just as easily have been written with vanilla javascript, but I don't have the time to try and convert it (read, I tried quickly, and it didn't cause the crash, so I left it using jquery).

Without further ado, the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Make safari go boom!</title>
<style>
.hidden { display: none; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {

$('#input').bind('focus', function() {
$(this).select();
});

$('#boom').click( function() {
$('#container').toggleClass('hidden');
$('#input').focus();
});

$('#container').removeClass('hidden');
});
</script>
</head>
<body>
<div id="container" class="hidden" >
<input type="text" value="Some default text" id="input" />
</div>
<input type="submit" value="Go Boom" id="boom" />
</body>
</html>


And the example to make Safari 4 go boom!

UPDATE: This appears to be fixed now in safari 5.

2 comments:

S.G. Chipman said...

Wow - have you submitted a bug to webkit for this?

David McCormick said...

No, but I did send a crash report to Apple. To submit a bug, they request that I download and build the latest webkit nightly. If I had the time, I would love to, but since I don't, I make an open call to anyone that already delves in the world of webkit nightly's to test my page and submit a bug to webkit. Hopefully, whoever gets safari crash reports at apple will do so.