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.
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:
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:
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: