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 for static.example.com.

On my www.example.com domain, you can register for the service over SSL using httpS://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 subdomain on my httpS://www.example domain?

Thanks in advance.

Answer 1

you can make your own ssl proxy.

Run all the images through this script. Just make a file and put this PHP code inside. Use curl or file_get_contents to echo out the content.

So if you want to call the secure image, you call it like this:

https://mysecureserver.com/path_to_this_script/?url=[base64 encoded image link]

<?php   
  $strFile = base64_decode(@$_GET['url']);
  $strFileExt = end(explode('.' , $strFile));
  if($strFileExt == 'jpg' or $strFileExt == 'jpeg'){
    header('Content-Type: image/jpeg');
  }elseif($strFileExt == 'png'){
    header('Content-Type: image/png');
  }elseif($strFileExt == 'gif'){
    header('Content-Type: image/gif');
  }else{
    die('not supported');
  }
  if($strFile != ''){
    $cache_ends = 60*60*24*365;
    header("Pragma: public");
    header("Cache-Control: maxage=". $cache_ends);
    header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $cache_ends).' GMT');

    //... [and get the content using curl or file_get_contents and echo it out ]

  }
  exit;
?>

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

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 4

You must serve all content that you link to or embed (directly or via AJAX) on a page served over HTTPS by using https:// references.

One way of going around the 3rd-party, plain-HTTP content problem is to serve that content via a reverse proxy that uses HTTPS, possibly on your site or a service for this. There might be legal implication in doing so, depending on whether it's considered as mere proxying or duplicating content (perhaps similarly to what Google cache does). In addition, by doing so, you're effectively vouching for the content you embed this way.

Answer 5

I know this is a really old question but thought I'd throw in my $.02 anyway.

I am assuming the subdomain of http://static.example.com is also a subdirectory/folder of http://www.example.com (I.E. http://www.example.com/static) as is the case with most hosting these days.

You can varify this but browsing to http://www.example.com/static and https://www.example.com/static … do you see the same page as you would if you browse to http://static.example.com

If that is true you can feed the image like this …

https://www.example.com/static/image.ext

One other possibility for those on typical shred hosting is using the shared cert many hosting provider provide. Check with the hosting companies support. They are usually something like this …

https://host.hostcoserver.com/~user/dir/image.ext

Hope you all find this useful!

Answer 6

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

Answer 7

I hit this problem for a local news aggregator that I run, I ended up using PHP's copy to pull the images over to my server and then serving them up SSL.

http://php.net/manual/en/function.copy.php