I was lucky to put together a set of JavaScript puzzle challenges for a BlueHat/BlackHat session. Each challenge explored a quirk or edge case in Internet Explorer that required creative thinking about the browser’s security model. After playing around for a while, these puzzles turned into a nice collection of corner cases.
Challenge 1: Return HACKED
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Return HACKED</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:200pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Return HACKED</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
We have a global variable called "goodJob" and its value is a strange one. We need to make sure that
it will always return the string "HACKED" regardless of its real value.
<br />
<ul>
<li>You can't change the behavior of alert, String, or undefined.</li>
<li>You can't use onerror/try/catch or any code that controls errors.</li>
<li>Don't use instructions that bypass the code execution below the allowed area.</li>
<li>Your code can be any length inside the allowed area. No changes outside of it.</li>
</ul>
<hr />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
var goodJob = /!/._//!//
alert(goodJob); // We should see an alert saying "HACKED".
</textarea>
</fieldset>
</div>
</body>
</html>The puzzle here was to make a bizarre regex-like expression always evaluate to the string “HACKED”. The trick lies in overriding RegExp prototype properties or exploiting how JavaScript coerces objects to strings.
Challenge 2: Restore Alert
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Restore Alert</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:200pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Restore Alert</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
We have disabled the alert method of the window object. Can you bring it back?
<br />
<ul>
<li>You can't use the alert of any other iFrame, window, createPopup, etc.</li>
<li>You can't use Object.freeze, Object.seal, or the delete operator.</li>
<li>Your code can be any length inside the allowed area. No changes outside of it.</li>
</ul>
<hr />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">window.alert = new Function();
/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
alert("Wow! I'm working again!");
</textarea>
</fieldset>
</div>
</body>
</html>This one explored how the browser’s prototype chain could be used to recover a clobbered built-in. window.alert had been replaced with an empty Function, but the original implementation was still accessible through less obvious paths.
Challenge 3: Change the Title
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:200pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Change the Title</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
We have set the title to "CHANGE_THE_TITLE". You have to change it for any other, making sure that document.title returns
the new value <strong>and</strong> the visible title in the TAB itself changes.
<br />
<ul>
<li>Your code can be any length inside the allowed area. No changes outside of it.</li>
</ul>
<hr />
<br />
The code below has already been executed. You can't change it.<br />
<textarea disabled id="taRunBefore" style="height:110pt;background-Color:#cccccc;color:#000000;">
document.title = "CHANGE_THE_TITLE";
Object.defineProperty(Document.prototype, "title", {set: function()
{
alert("Sorry! You can't set the title using document.title");
}});
Object.defineProperty = null;
</textarea>
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">
/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
alert(document.title); // We should see a value different than "CHANGE_THE_TITLE"
</textarea>
</fieldset>
</div>
<script>
eval(document.getElementById('taRunBefore').value);
</script>
</body>
</html>The document.title setter had been intercepted and Object.defineProperty nulled out, making re-definition impossible the usual way. The challenge was to find an alternate DOM path to update the visible tab title.
Challenge 4: Close the Tab
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Close the Tab</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:120pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Close the Tab</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
Objective: close a tab using script. You can't manually close the tab.
<br /><br />
<hr />
<br />
HTML Code of the link below: <span style="font-family:Monospace;color:blue;"><a href="http://www.bing.com" target="_BING">CLICK HERE</a></span><br /><br />
You need to first click on the link to open the new tab: <a href="http://www.bing.com" target="_BING">CLICK HERE</a> to open Bing in new tab.<br /><br />
Then, execute a script that will end up closing that tab. No limits! You can do anything you want except manually closing it.<br /><br />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">
/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
</textarea>
</fieldset>
</div>
</body>
</html>Challenge 5: Close the Tab II
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Close the Tab II</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:120pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Close the Tab II</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
Objective: close a tab using script. You can't manually close the tab and you can't change the URL of it, not even by the same one. The Bing
tab must be closed without without navigating at all.
<br /><br />
<hr />
<br />
HTML Code of the link below: <span style="font-family:Monospace;color:blue;"><a href="http://www.bing.com" target="_BLANK_">CLICK HERE</a></span><br /><br />
You need to first click on the link to open the new tab: <a href="http://www.bing.com" target="_BLANK_">CLICK HERE</a> to open Bing in new tab.<br /><br />
Then, execute a script that will end up closing that tab. You can do anything except manually closing it or changing its URL.<br /><br />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">
/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
</textarea>
</fieldset>
</div>
</body>
</html>Challenge 6: Close this Tab without Prompts
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Close this Tab without prompts</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:120pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Close this Tab without prompts</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
Objective: close <strong>this</strong> tab using script without prompting the user. It is important that this tab (the one that you have to close) is opened by clicking on the IE icon or the new tab button, <u>but not from links or scripting</u>. In other words, it has to be manually opened tab by the user, not from code.
<br /><br />
<hr />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">
/********** YOUR CODE SHOULD START BELOW THIS LINE **********/
/*********** YOUR CODE SHOULD END ABOVE THIS LINE ***********/
</textarea>
</fieldset>
</div>
</body>
</html>Challenge 7: Prevent iFrames from Changing Top Window Location
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Prevent iFrames from changing top window location</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:450pt;height:140pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
iframe {width:200pt;height:130pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Prevent iFrames from changing top window location</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
We want to have full control of the main page, disallowing iFrames to change the main URL. You are free to play with the code but you can't
edit anything from inside the iFrame DOM. In other words, you can change the iFrame name or properties but you can't change the link inside.
<br />
<ul>
<li>Try to create a code that will prevent the iFrame to change the main URL.</li>
<li>You can reload the iFrame content, but you can't change anything of its DOM.</li>
<li>You can change its attributes/properties but rendering it again is not allowed.</li>
</ul>
<hr />
<br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.
Then, go to the Bing link in the iFrame at the right and click on it just once. Preventing Bing to be loaded on the main page is a success!
<br /><br />
<textarea id="taCode">/***** YOUR CODE SHOULD START BELOW THIS LINE *****/
/****** YOUR CODE SHOULD END ABOVE THIS LINE ******/</textarea>
<iframe scrolling="no"></iframe>
</fieldset>
</div>
<script>
window.onload = function()
{
window[0].document.write('Click on the link below to try to open Bing in the top window.<br /><br /><h1><a href="http://www.bing.com" target="_top">Open Bing</a><h1>');
window[0].document.close();
}
</script>
</body>
</html>Challenge 8: Read Input Real Fake Path
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Read Input Real Fake Path</title>
<style type="text/css">
body {font-family:Tahoma, Arial;font-size:12pt;background-Color:#ffffff;color:#000000;}
h1 {text-align:center;font-size:18pt;color:#5050aa;margin-bottom:10pt;}
ul {color:blue;font-family:Monospace;font-size:14pt;}
fieldset {text-align: justify;padding:5pt;width:700pt;}
textarea {width:650pt;height:200pt;font-family:Monospace,Arial;font-size:12pt;margin-bottom:14pt;background-Color:#222222;color:#10ff10;}
legend {font-weight: bold;color:#0474BC;margin-bottom:2pt;padding-bottom:2pt;}
</style>
</head>
<body>
<div style="width:720pt;">
<h1>Read Input Real Fake Path</h1>
<fieldset align="center"><legend align="center"> Explanation </legend>
Objective: to read the <strong>real full path</strong> (not the fake) of a user selected file using the input-file dialog.
<br /><br />
<hr />
<br />
First click on browse and select any file from this PC.<br />
<input type="file" id="inputFile" style="width:280pt"/><br /><br />
Now, try to get and show the exact full path as shown in the input-file above. Of course it won't make sense to literally copy
the visible content of the input-file, you should try to access via scripting!<br /><br />
The ID of the input is <span style="font-family:Monospace">inputFile</span><br /><br />
<input type="button" value="Run" onclick="eval(document.getElementById('taCode').value)" /> Type your code in the textarea below and click Run to execute.<br /><br />
<textarea id="taCode">/********** DEMO CODE - Change it as much as you want **********/
alert(document.getElementById("inputFile").value);</textarea>
</fieldset>
</div>
</body>
</html>These challenges covered a range of browser behavior quirks: prototype chain manipulation, DOM property interception, cross-frame window management, and file input path exposure. Each one was designed to be solvable but required stepping outside the obvious approach. The puzzles were a fun way to share knowledge about how IE’s internals worked at the time.
Found during my years at Microsoft (2006–2014). These bugs were patched long ago — shared here as a historical record for learning purposes.
Read other posts