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.

Answer 1

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

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 4

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 5

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 6

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