Wednesday, November 29, 2006

IE7 Warning: "This page contains both secure and nonsecure items."

IE 7 come with much enhanced security features and tabbed viewing. But along with the enhancements, we (programmers) also see some new problems to work on. The one I will present below is especially hard, because it is not consistently repeatable.

Problem: serving page through HTTPS, IE7 shows the warning: "This page contains both secure and nonsecure items. Do you want to display the nonsecure items?".

According to past experience, there are 2 main reasons for this warning:
  1. There are content on the web page from non-secure source. You should remove any link to nonsecure content in order to get rid of this warning;
  2. An "IFrame" does not specify source, or specify "about:blank" as the source. IE consider this as nonsecure. You have to point the IFrame to "Javascript:false" to make IE happy;
But the one I am facing has a new twist: the warning does not show up consistently. If I refresh the page by pressing "F5", only 2 out of 10 times, I get the warning.

After some painful experiments, I found that the the source of the problem came from my use of YUI panel. I added a background image to the panel like this:
<div class="bd" style="background-image: url(images/back.gif);">
Guess what, this combined with JavaScript in YUI constitutes the new offense for IE7. According to MSDN Knowledge Base, Article 925014 , using "removeChild()" method to delete a DIV element that references a background image is considered "nonsecure itme". I suppose somewhere in YUI library my DIV is detached and wrapped into something else than attached to the HTML document again.

There are 2 workarounds recommended in MSDN KB 925014. The second method meets my need very well. I just moved the specification of background image to CSS. This seems to solve the problem.

It still puzzles me, as why this warning only appears 2 out of 10 times. Following "Workaround" in the article did fix the warning permanently.

Although I finally fixed the problem. I wish IE7 could have provided a little more hint in why it complains about the nonsecure content or the source of the nonsecure content. Better yet, IE7 should give developer's a way to see the rendered HTML content. As far as I know, the only thing I can do is to remove elements on my page one by one, until the warning is gone.

MSDN KB 925014

No comments: