HTTPS Bug in IE

During my development with HTTPS I came across a very weird issue that caused IE to raise a message about mixed content (HTTP + HTTPS).

The problem occurs while using a very simple scenario:

  1. The page has a DIV element with an INLINE background style (style="background-image: URL(images/image.gif)")
  2. Inside the DIV you have an anchor that when clicked uses a script that removes the entire DIV from the dom using (removeChild method).

browsing the page with HTTPS you will see that you get the error message after clicking the anchor.

I can promise you that I have made all the necessary test to see that I am working with relative URLs and nothing else.

I have created a reproduce for this problem + movie that shows the problem and opened a ticker BUT I got a workaround / agreement that this is a bug only 10 days later.

The source of the problem is that when you are using a removeChild method on an element that has INLINE background image the image URL becomes about:blank which causes the message to popup.

In order to fix this problem (don't think that Microsoft will give you a workaround) you need to do one of the following:

  1. Don't use inline background style - Move the style to a CSS file -This fixes everything.
  2. Don't use removeChild - use element.outerHTML = "", apparently this causes the object to die (this was new to me).

You can download a zip file that contain:

  1. Readme file
  2. HTML the reproduce the problem
  3. WINK movie that shows the problem.

This bug is important if you are using AJAX because you have to make sure that things are working under HTTPS, If you are using ATLAS you don't have to worry because ATLAS replaces the innerHTML of the update panel (I wonder if they knew about the problem?!)

HTTPS Bug in IE HTTPS Bug in IE Reviewed by Ran Davidovitz on 2:03 AM Rating: 5

4 comments:

Anonymous said...

Hi Ran,

very good post... thank you.

Anonymous said...

One of my coleagues just spent most of the week fixing the same thing, but for him it was happening when he set style.background on an unattached div. For you it happens it exactly the point where you unattach the div. Looks like the same thing to me.

Good work!

Anonymous said...

You can use dynamically assigned URLs for background images in IE7, you just have to unset the property before removing the node from the DOM.

Best World of Warcraft Gold Guide said...

great post man :)

Powered by Blogger.