IE7 : This page contains both secure and nonsecure items
I just spent about 4 hours trying to solve this really annoying error which only exists in Internet Explorer 7 (IE7) over a Secure (SSL) page. I just stumbled upon the solution and it was just so damn obscure I felt I had better write it down or it will be forever lost in the bit-bucket that I call my brain.
Although my issue was related to using MIT’s Simile Timeline control it is not limited to that in any way (here is the URL to the defect).
So here is the error in question:
When prompted with this, as a veteran in the web world, I first turn to standard proxy tools, like Fiddler. I look for the big gotchas where a HTTP request simple doesn’t go over HTTPS. Another is if any requests are throwing back a 404 (document not found). When that does help, next I common the IIS Log files, and see if anything is not going over port 443. Simply fix anything that behaves badly and re-test.
When that does not fix the issue, what’s next? Well next you need to dig into iframes. If you have any iframes in your output (dynamic via Javascript/DOM or static on the page) be sure to specify the src attribute, and not just any src attribute will do. Options include “#”, or “javascript:void(0);” or even "javascript:'<html></html>';". Play with these and other which Google will turn up and decide which is your best option.
My next inclination was to do a deep dive into the Javascript world and start debugging the crap out of things. This really did not bear much fruit at all. It was actually quite frustrating. –Try to avoid this as much as possible, but if you do make use of both the alert(‘’); and debugger; calls.
Now when that does not bear any fruit it’s time to really dig deep. I found out that when you are manipulating a DOM element (lets say creating a DIV tag), and are setting its style.background property to a incomplete url, for example:
div.style.background="url(/images/message-top-left.png) ";
It seems that IE7 (and only IE7) will make this request over 443, but treat the data as one of these pesky “nonsecure items”.
So, the work-around which I implemented was to specify the FULL url like:
div.style.background="url(“+prefix+“/images/message-top-left.png) ";
Where “prefix” is something along the lines of:
prefix = document.location.protocol + "//" + document.location.hostname;
Finally, if that is a dead end as well, consider the idea of cutting the feature out of the next release!
References, more help:
http://friedcellcollective.net/outbreak/2006/06/09/this-page-contains-both-secure-and-nonsecure-items/
http://support.microsoft.com/kb/925014