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:


This page contains both secure and nonsecure items. \n\nDo you want to display the nonsecure items?

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 to a relative path, eg”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 🙂

Tags: , , , ,

5 Responses to “Internet Explorer: this page contains both secure and nonsecure items”

  1. Benjamin Says:

    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!

  2. igor Says:


    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.

  3. whinger Says:

    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.

  4. Mark Says:

    Thanks for this, definitely helped to solve the issue I was having.

  5. Crisp's Blog » Securing Your Website – SSL a how-to guide Says:

    […] 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 […]

Trackback URI | Comments RSS

Leave a Reply