Internet Explorer: this page contains both secure and nonsecure items
Posted on April 23rd, 2009 by whinger. Filed under Tech, Web Development.
So the web is full of people asking about this symptom and I hit it myself. Seemingly randomly (but consistently) IE will complain about nonsecure items in the page, with this warning message:
Â
The error message from IE7
The usual response to this is that you’re loading images (or other media) from a non-SSL connection (hence “non-secure” items); there are also some mentions of IE not being happy about IFRAMEs without SRC= attributes (the browser assigns “about:blank” as a default SRC, which – being non-secure – flips the error); however none of these things applied in my case.
Â
I discovered that if I turned off javascript the error disappeared, which suggested my script was problematic, but I still couldn’t find anything in the scripts which was loading any non-secure items.
Â
In the end after much messing around it turns out that the offending script was setting object.style.background to a relative path, egÂ
myObj.style.background=”url(/images/mybackground.gif)”;
Even though this will correctly resolve to an https:// address (assuming the root of the document is https://) IE can’t figure this out and moans.
Â
Simply adding the full path to the background solved my problem.
Â
This doesn’t apply to CSS files setting backgrounds – you can happily have relative paths in these and all will be well.Â
Â
Of course I then wondered why I hadn’t found that on the web and figured you might be looking for it too – so here it is 🙂
August 11th, 2009 at 2:44 pm
Thank you very much for this post!
This helped me much as I didn’t find any other hint on this problem with the IE (which has so many “problems” even in the brand new version 8).
So many thanks!
September 6th, 2010 at 2:29 pm
Hi,
Thanks for the post! It helps.
However, those things you have to do via CSS nowadays, as it’s more efficient to maintain then.
myObj.className = ‘background’; solve the problem and produce less JS code. You can set a class definition in CSS file then.
September 6th, 2010 at 2:41 pm
Just because something looks like it’s easier to maintain doesn’t necessarily mean it’s the correct way to do it.
In my day job I build Javascript which, in order to be widely used, must be capable of being dropped onto a page and just work.
If your Javascript relies on the user including a bunch of extra CSS files just so that it works properly, that’s a Bad Thing. It means people are less likely to use it because it probably won’t work first time.
February 8th, 2011 at 7:27 pm
Thanks for this, definitely helped to solve the issue I was having.
September 21st, 2011 at 10:32 pm
[…] was going via https I was getting the non-secure data warning. Luckily I found an old article on The Weekly Whinge that explained the problem. It turns out that setting a background image in JavaScript is a problem […]