Code Couch » HTML http://www.codecouch.com The ramblings of two code monkeys Thu, 19 Nov 2009 15:47:59 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Problems with anchors and alpha transparency filters in IE6 http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/ http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/#comments Tue, 21 Oct 2008 06:29:40 +0000 Jeff http://www.codecouch.com/?p=195 You can use alpha transparent PNGs in IE6 as described in How do I display alpha transparent PNGs across all browsers. There is a problem with implementing this solution – in Internet Explorer 6 links are no longer clickable when they are contained within an element with an alpha transparency filter applied.

The problem

Consider the following CSS and HTML code snippets that set up the problem with a link contained within a div that has an alpha transparency filter applied to it:

<style type="text/css">
.opaque { background: url(images/alphaTransparent.png) transparent no-repeat left top; }
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=images/alphaTransparent.png);
}
</style>
<![endif]-->
...
<div id="parent" class="opaque">
    <span id="child">Lorem <a href="http://www.codecouch.com">ipsum</a> dolor.</span>
</div>
...

The parent element has a class opaque applied to it which puts an image on the background of the element. In Internet Explorer 6 only, the background image is removed and the proprietary filter property is used. The link inside the child span is no longer clickable in Internet Explorer 6.

The solution

Make sure the parent element (the element with the filter applied to it) doesn’t have the position property set on it, and the child element (the element with the link in it) has to have relative position.

The following addition to the above code will make the link clickable:

<!--[if IE 6]>
<style type="text/css">
#child { position: relative; }
</style>
<![endif]-->

Since it only has to apply for Internet Explorer 6, the “fix” can be enclosed within the conditional comment that targets just that browser. This doesn’t require any javascript to work (unlike other solutions that have been posted) and degrades properly.

]]> http://www.codecouch.com/2008/10/problems-with-anchors-and-alpha-transparency-filters-in-ie6/feed/ 0 Enabling cross-site scripting XSS via an iframe http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes/ http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes/#comments Sun, 19 Oct 2008 12:24:41 +0000 Jeff http://www.codecouch.com/?p=173 The scenario is relatively common – you have a page that contains an iframe pointing to some content hosted on another domain. Nothing wrong with this – iframes were designed with this in mind! The following diagram shows the sort of setup we are talking about.

Diagram showing an iframe within a web page

Now you want to click a link within the iframe content and have that perform some action on the parent page (maybe you want to submit a form on the parent page, maybe you want to adjust the height of the iframe on the parent page). And you start getting frustrated because the browser won’t let you access all your javascript functions/properties on another domain.

Communication from an iframe that has content from a domain other than the one the iframe is contained within is a constant source of frustration – as browsers prevent this kind of activity due to built-in security policies. The solution is actually relatively painless requiring the addition of an iframe (see the following diagram).

Diagram showing page structure for XSS via an iframe

Real world example

You can see a working example of this over at Sky Movies where the iframe is resized as the content within the iframe changes. This is being controlled from within the iframe.

Why do we need to implement a solution like this in the first place?

Because whilst the main page at movies.sky.com can set the height of the iframe, it cannot get the height of the iframe content… and the iframe document can get it’s height but it can’t set the height of it’s enclosing iframe.

An explaination of each component of the solution

Using the following example pages, we can create a demonstration of this technique. Following is the source of the main page (marked as [1] in the figure above) which contains the iframe and the function that will be used to resize the iframe.

<html>
<head>
	<title>Page hosted on example.com</title>
	<script type="text/javascript">
	function resizeIframeHeight(nHeight) {
		var iframe = document.getElementById('mainIframe');
		iframe.setAttribute('height', nHeight);
	}
	</script>
</head>
 
<body>
	<h1>This page is hosted on the example.com domain</h1>
	<p>The iframe below is hosted on the example.org domain</p>
	<iframe id="mainIframe" width="400" height="200" src="http://example.org/iframedDocument.html">Iframes not supported.</iframe>
</body>
</html>

Following is the source of the iframe page (marked as [2] in the figure above) which contains the extra iframe and some javascript that allows this technique to work.

<html>
<head>
	<title>Page hosted on example.org</title>
	<script type="text/javascript">
	function updateIframeHeight() {
		var iframe = document.getElementById('hiddenIframe');
		var newHeight = parseInt(document.body.offsetHeight,10) + 10;
		iframe.src = 'http://example.com/xssEnabler.html?height=' + newHeight;
	}
	</script>
</head>
 
<body onload="updateIframeHeight()">
	<h1>This page is hosted on the example.org domain</h1>
	<p>The iframe below is hosted on the example.com domain (and be styled to be hidden)</p>
	<iframe id="hiddenIframe" width="100" height="100" src="http://example.com/xssEnabler.html">Iframes not supported.</iframe>
</body>
</html>

The final source file resides on the original domain (marked as [3] in the figure above) and contains some javascript to strip out the height parameter and then pass this on to the function on the main page that resizes the iframe. It is referred to in the code above, as the content of the file at http://example.org/xssEnabler.html – and whilst it is saved as a .html file, it contains just the code you see below.

<script type="text/javascript">
	function getFirstParamFromLocation() {
		var pair = window.location.search.substring(1);
		var parts = pair.split('=');
		return parts[1];
	}
	var nHeight = getFirstParamFromLocation();
	try {
		window.top.resizeIframeHeight(height);
	} catch(e) {};
</script>

Obviously you would not be using example.com and example.org for your solution, they are used merely to identify the different domains you would use for each file.

]]> http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes/feed/ 2 How to target specific IE browsers using just HTML? http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/ http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/#comments Wed, 18 Apr 2007 10:08:01 +0000 Jeff http://www.codecouch.com/?p=110 Many people were introduced to conditional comments with the introduction of IE7 and their grass-roots call to action to stop using “CSS Hacks” to target specific IE browser versions.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

The following code shows how a conditional comment can be used to match “all versions of IE less than version 7″ and include an extra css file and an extra div in the content of the page:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
<!––[if lt IE 7]>
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
<![endif]––>
</head>
<body>
  <h1>Testing</h1>
<!––[if lt IE 7]>
  <div>I’m an old IE running in Windows</div>
<![endif]––>
</body>
</html>

Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers.

The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
  <div>I'm an old IE running in Windows</div>
</body>
</html>

This is the code that is rendered in other browsers:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
</body>
</html>

You might choose to use this to set some variables on the page for javascript to use – without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers – only Windows):

<script type="text/javascript">
  var isIE=isIE5=isIE6=isIE7=false;
</script>
<!––[if IE]>
  <script type="text/javascript">
    isIE=true;
  </script>
<![endif]––>
<!––[if IE 7]>
  <script type="text/javascript">
    isIE7=true;
  </script>
<![endif]––>
<!––[if IE 6]>
  <script type="text/javascript">
    isIE6=true;
  </script>
<![endif]––>
<!––[if IE 5]>
  <script type="text/javascript">
    isIE5=true;
  </script>
<![endif]––>

Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN conditional comments page.

]]> http://www.codecouch.com/2007/04/how-to-target-specific-ie-browsers-using-just-html/feed/ 0