How to display non-SSL images on HTTPS connection?

Question

On my https web site, how can I display images from a web site without a certificate?

I own the example domain of:
- http://www.example.com
- http://static.example.com (used for my CDN)

I own a certificate for WWW.example.com but not STATIC.example.com.

On my www.example.com domain, you can register for the service over SSL using http*s*://www.example.com

On the registration form (www.), I want to display images from my CDN which is on http://STATIC.example.com but don't own a certificate for that subdomain.

On the https://www.example.com registration form - I'm using AJAX to dynamically pull over the image from http://static.example.com. It seems that the web browser does not display non-SSL images at all when using AJAX. However, IF that image were located on the httpS://www.example.com domain (the same as the registration form), the image will display via AJAX.

For architecture & design reasons, I would like to keep those images on my CDN (static.example.com) without having to purchase a certificate.

Does anyone know how I can display these images via AJAX from my non-SSL submain on my http*s*://www.example domain?

Thanks in advance.

Answer 1

Just like you would include an https image:

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

Some browsers might complain to the user, though, that you're loading insecure resources for a secure page. Nothing you can do about that.

Answer 2

There is no way to do this without a certificate for static.example.com that will not trigger a security warning or prompt in some browsers (particularly Internet Explorer).

GoDaddy sells SSL certificates for $30ish. I'd say spring for the little bit of cash.

Answer 3

To extend @Jaka Jančar's answer, do you NEED to download the images via AJAX? You can replace the AJAX call with this: add an IMG element dynamically.

function load_image_instead_of_ajax_call(dom_parent_element,image_url) {
    var img = document.createElement('img');
    img.onload = your_success_callback_function;
    img.onerror = your_error_callback_function;
    img.src = image_url;
    dom_parent_element.appendChild(img);
}

This way, your image resource gets loaded, with a proper callback on success/error.

Some browsers may complain that your page contains both http and https content, but it is not very common (this seems to be off by default in most browsers).