Work with HTTP content on HTTPS pages

Question

We have a website that is accessed entirely via HTTPS, but sometimes external content is displayed, which is HTTP (images from RSS feeds, mainly). The vast majority of our users are also stuck on IE6.

Ideally, I would like to do both of the following

• Prevent IE warning about insecure content (so that I can show less intrusive, for example, replacing images with a default icon, as shown below)
• Imagine something useful for users instead of images that they don’t see otherwise; if there was some kind of JS, I could run to find out which images were not loaded and replace them with my image, which would be great.

I suspect that the first goal is simply impossible, but the second may be sufficient.

The worst case scenario is that I parse the RSS feeds when we import them, grab the images, saving them locally so that users can access them in this way, but it seems to be very painful for a reasonably small gain.

Answer 1

Your worst case scenario is not as bad as you think.

You are already parsing the RSS feed, so you already have the URLs of the images. Say you have an image URL, for example http://otherdomain.com/someimage.jpg . You rewrite this URL as https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad . Thus, the browser always makes a request via https, so you get rid of problems.

The next part is to create a proxy page or servlet that does the following:

• Read url parameter from query string and check hash
• Download the image from the server and the proxy server back to the browser
• If necessary, cache the image on disk

This solution has some advantages. You do not need to upload an image while creating html. You do not need to save images locally. In addition, you are stateless; The url contains all the information needed to serve the image.

Finally, the hash parameter is for security; You want your servlet to serve images for the URLs you created. So, having created the url, calculate md5(image_url + secret_key) and add it as a hash parameter. Before submitting a request, recalculate the hash and compare it with what was sent to you. Since secret_key is known only to you, no one can create valid URLs.

If you are developing in Java, Servlet is just a few lines of code. You should be able to port the code below to any other internal technology.

 /* targetURL is the url you get from RSS feeds request and response are wrt to the browser Assumes you have commons-io in your classpath */ protected void proxyResponse (String targetURL, HttpServletRequest request, HttpServletResponse response) throws IOException { GetMethod get = new GetMethod(targetURL); get.setFollowRedirects(true); /* * Proxy the request headers from the browser to the target server */ Enumeration headers = request.getHeaderNames(); while(headers!=null && headers.hasMoreElements()) { String headerName = (String)headers.nextElement(); String headerValue = request.getHeader(headerName); if(headerValue != null) { get.addRequestHeader(headerName, headerValue); } } /*Make a request to the target server*/ m_httpClient.executeMethod(get); /* * Set the status code */ response.setStatus(get.getStatusCode()); /* * proxy the response headers to the browser */ Header responseHeaders[] = get.getResponseHeaders(); for(int i=0; i<responseHeaders.length; i++) { String headerName = responseHeaders[i].getName(); String headerValue = responseHeaders[i].getValue(); if(headerValue != null) { response.addHeader(headerName, headerValue); } } /* * Proxy the response body to the browser */ InputStream in = get.getResponseBodyAsStream(); OutputStream out = response.getOutputStream(); /* * If the server sends a 204 not-modified response, the InputStream will be null. */ if (in !=null) { IOUtils.copy(in, out); } } 

Answer 2

If you are looking for a quick solution for downloading images via HTTPS, then you may be interested in a free reverse proxy service at https://images.weserv.nl/ . That was exactly what I was looking for.

If you are looking for a paid solution, I previously used Cloudinary.com, which also works well, but, in my opinion, is too expensive exclusively for this task.

Answer 3

I don’t know if it would correspond to what you are doing, but as a quick fix I would "wrap" the contents of http in an https script. For example, on your page, which is served via https, I would present an iframe that would replace your rss channel, and in src attr iframe put the script URL on your server, which captures the feed and displays html. The script reads the channel via http and outputs it via https (thus, "wrapping")

Just a thought

Answer 4

As for your second requirement - you can use the onerror event, i.e. <img onerror="some javascript;"...

Update:

You can also try iterating through document.images in dom. There is a complete boolean property that you may be able to use. I do not know for sure whether this will be suitable, but it may be worth exploring.

Answer 5

It would be best to have http content on https

Answer 6

Sometimes, as in facebook applications, we may not have protected content on a secure page. also we cannot do local content. for example, the application that will be loaded into the iFrame is not simple content, and we cannot make it local.

I think that we should never upload the HTTP content to https, nor should we drop the https page to the http version to prevent the error dialog.

the only way to ensure user safety is to use the https version of all content, http://developers.facebook.com/blog/post/499/

Answer 7

The accepted answer helped me update it for both PHP and CORS, so I decided to include a solution for others:

pure php / html:

 <?php // (the originating page, where you want to show the image) // set your image location in whatever manner you need $imageLocation = "http://example.com/exampleImage.png"; // set the location of your 'imageserve' program $imageserveLocation = "https://example.com/imageserve.php"; // we'll look at the imageLocation and if it is already https, don't do anything, but if it is http, then run it through imageserve.php $imageURL = (strstr("https://",$imageLocation)?"": $imageserveLocation . "?image=") . $imageLocation; ?> <!-- this is the HTML image --> <img src="<?php echo $imageURL ?>" /> 

JavaScript / jQuery:

 <img id="theImage" src="" /> <script> var imageLocation = "http://example.com/exampleImage.png"; var imageserveLocation = "https://example.com/imageserve.php"; var imageURL = ((imageLocation.indexOf("https://") !== -1) ? "" : imageserveLocation + "?image=") + imageLocation; // I'm using jQuery, but you can use just javascript... $("#theImage").prop('src',imageURL); </script> 

imageserve.php see http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 for more information on CORS

 <?php // set your secure site URL here (where you are showing the images) $mySecureSite = "https://example.com"; // here, you can set what kinds of images you will accept $supported_images = array('png','jpeg','jpg','gif','ico'); // this is an ultra-minimal CORS - sending trusted data to yourself header("Access-Control-Allow-Origin: $mySecureSite"); $parts = pathinfo($_GET['image']); $extension = $parts['extension']; if(in_array($extension,$supported_images)) { header("Content-Type: image/$extension"); $image = file_get_contents($_GET['image']); echo $image; } 

Answer 8

Simple: DON'T DO IT. Http content on an HTTPS page is inherently unsafe. Point. This is why IE shows a warning. Getting rid of the warning is a stupid approach to predation.

Instead, the HTTPS page should only contain HTTPS content. Make sure the content can also be downloaded via HTTPS, and link to it via https if the page is loaded via https. For external content, this will mean loading and caching items locally so that they are accessible via https-sure. Unfortunately not.

A warning exists for a good reason. Jokes aside. Spend 5 minutes on how you can take the page with the shown https using special content - you will be surprised.

Answer 9

I understand that this is an old stream, but one of them is simply to remove the http: part from the image URL so that http: //some/image.jpg 'becomes' // some / image.jpg'. This will also work with CDN

Answer 10

Best way to work for me

 <img src="/path/image.png" />// this work only online or <img src="../../path/image.png" /> // this work both or asign variable <?php $base_url = ''; if($_SERVER['HTTP_HOST'] == 'localhost') { $base_url = 'localpath'; } ?> <img src="<?php echo $base_url;?>/path/image.png" />