Dealing with HTTP content in HTTPS pages

Question

We have a site which is accessed entirely over HTTPS  but sometimes display external content which is HTTP  images from RSS feeds  mainly    The vast majority of our users are also stuck on IE6   I would ideally like to do both of the following   Prevent the IE warning message about insecure content  so that I can show a less intrusive one  e g  by replacing the images with a default icon as below  Present something useful to users in place of the images that they can t otherwise see  if there was some JS I could run to figure out which images haven t been loaded and replace them with an image of ours instead that would be great    I suspect that the first aim is simply not possible  but the second may be sufficient   A worst case scenario is that I parse the RSS feeds when we import them  grab the images store them locally so that the users can access them that way  but it seems like a lot of pain for reasonably little gain

User · Answer

Regarding your second requirement - you might be able to utilise the onerror event, ie. <img onerror="some javascript;"...

Update:

You could also try iterating through document.images in the dom. There is a complete boolean property which you might be able to use. I don't know for sure whether this will be suitable, but might be worth investigating.

User · Answer

It would be best to just have the http content on https

User · Answer

Sometimes like in facebook apps we can not have non-secure contents in secure page  also we can not make local those contents  for example an app which will load in iFrame is not a simple content and we can not make it local  I think we should never load http contents in https  also we should not fallback https page to http version to prevent error dialog  the only way which will ensure user s security is to use https version of all contents  http   web archive org web 20120502131549 http   developers facebook com blog post 499

User · Answer

Your worst case scenario isn t as bad as you think   You are already parsing the RSS feed  so you already have the image URLs  Say you have an image URL like http   otherdomain com someimage jpg  You rewrite this URL as https   mydomain com imageserver url http   otherdomain com someimage jpg amp hash abcdeafad  This way  the browser always makes request over https  so you get rid of the problems   The next part - create a proxy page or servlet that does the following -    Read the url parameter from the query string  and verify the hash Download the image from the server  and proxy it back to the browser Optionally  cache the image on disk   This solution has some advantages  You don t have to download the image at the time of creating the html  You don t have to store the images locally  Also  you are stateless  the url contains all the information necessary to serve the image    Finally  the hash parameter is for security  you only want your servlet to serve images for urls you have constructed  So  when you create the url  compute md5 image url   secret key  and append it as the hash parameter  Before you serve the request  recompute the hash and compare it to what was passed to you  Since the secret key is only known to you  nobody else can construct valid urls   If you are developing in java  the Servlet is just a few lines of code  You should be able to port the code below on any other back-end 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  amp  amp  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 lt 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

User · Answer

Simply  DO NOT DO IT  Http Content within a HTTPS page is inherently insecure  Point  This is why IE shows a warning  Getting rid of the warning is a stupid hogwash approach   Instead  a HTTPS page should only have HTTPS content  Make sure the content can be loaded via HTTPS  too  and reference it via https if the page is loaded via https  For external content this will mean loading and caching the elements locally so that they are available via https - sure  No way around that  sadly   The warning is there for a good reason  Seriously  Spend 5 minutes thinking how you could take over a https shown page with custom content - you will be surprised

User · Answer

If you re looking for a quick solution to load images over HTTPS then the free reverse proxy service at https   images weserv nl  may interest you  It was exactly what I was looking for    If you re looking for a paid solution  I have previously used Cloudinary com which also works well but is too expensive solely for this task  in my opinion

User · Answer

I realise that this is an old thread but one option is just to remove the http  part from the image URL so that  http   some image jpg  becomes    some image jpg   This will also work with CDNs

User · Answer

Best way work for me    lt img src   path image png    gt    this work only online     or      lt img src        path image png    gt     this work both     or asign variable      lt  php       base url           if   SERVER  HTTP HOST       localhost                   base url    localpath                gt       lt img src   lt  php echo  base url   gt  path image png    gt

User · Answer

The accepted answer helped me update this both to PHP as well as CORS  so  I thought I would include the solution for others   pure PHP HTML    lt  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     gt   lt  -- this is the HTML image -- gt   lt img src   lt  php echo  imageURL   gt     gt    javascript jQuery    lt img id  theImage  src      gt   lt script gt      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    lt  script gt    imageserve php see http   stackoverflow com questions 8719276 cors-with-php-headers noredirect 1 amp lq 1 for more on CORS   lt  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

User · Answer

I don t know if this would fit what you are doing  but as a quick fix I would  wrap  the http content into an https script  For instance  on your page that is served through https i would introduce an iframe that would replace your rss feed and in the src attr of the iframe put a url of a script on your server that captures the feed and outputs the html  the script is reading the feed through http and outputs it through https  thus  wrapping    Just a thought

[http] Dealing with HTTP content in HTTPS pages

Examples related to http

Examples related to image

Examples related to https