Monday, June 29, 2015

How to allow http content within an iframe on a https site

I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error: [blocked] The page at {current_pagename} ran insecure content from {referenced_filename}
Is there anyway to turn this off or any way to get around it?
The iframe has no src attribute and the contents are set using:
frame.open();
frame.write(html);
frame.close();
   
shareimprove this question
   
stackoverflow.com/questions/9280665/… –  chiliNUT Aug 20 '13 at 5:30
   
made an edit. The src is not set as the content is written into the iframe –  georgephillips Aug 20 '13 at 9:36
   
Thanks for all the answers. Long story short is proxy the content. –  georgephillips Aug 17 '14 at 2:50

6 Answers

up vote33down voteaccepted
+100
The best solution I created is to simply use google as the ssl proxy...
https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky
Tested and works in firefox.
Other Methods:
  • Use a Third party such as embed.ly (but it it really only good for well known http APIs).
  • Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
    https://mysite.com That has a iframe linking to...
    https://mysite.com/utilities/redirect.html Which has a simple js redirect script like...
    document.location.href ="http://thenonsslsite.com";
  • Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
  • You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
shareimprove this answer
2 
Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally). –  georgephillips Sep 3 '14 at 1:52
   
To get the "I'm feeling lucky" forwarder method to work, see this related answer. It will lead you to the first Google result, so it obviously only works only when your intended target target page is in the Google index already, and you find a query that returns it on top. –  tanius Sep 6 '14 at 14:29 
1 
@Jude, what does that link tell us? –  Matthew Peters Sep 11 '14 at 14:51
1 
The redirect trick seems to work in Firefox only. Chrome still denies loading the insecure content. Are there any other known workarounds? –  Andreas Gohr Nov 25 '14 at 15:07
1 
This is not a solution because it only works in Firefox –  vrijdenker Dec 16 '14 at 13:11
up vote5down vote
Based on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:
  • Prepare your proxy server - install IIS, Apache
  • Get valid SSL certificate to avoid security errors (free from startssl.com for example)
  • Write a wrapper, which will download insecure content (how to below)
  • From your site/app get https://yourproxy.com/?page=http://insecurepage.com
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but Ï found workaround here: http://foundationphp.com/tutorials/image_proxy.php
shareimprove this answer
up vote2down vote
You will always get warnings of blocked content in most browser when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that is'nt behind ssl. You can turn the warnings or the blockings of in your browser but for other visitors its a problem.
One way to do it is load the content serverside and save the images and other things to your server and display them from https.
You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.
shareimprove this answer
   
if you scrape the content and show it on your site their is Always the risk of cross site scripting. So a god solution is to scrape the content on a separate url and present the data in an iframe from that url with https. In that way you prevent crosssite scripting on your mainsite and session hijacking. –  Addeladde May 13 '14 at 13:41
up vote1down vote
I know this is an old post, but another solution would be to use cURL, for example:
redirect.php:
<?php
if (isset($_GET['url'])) {
    $url = $_GET['url'];
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    echo $data;
}
then in your iframe tag, something like:
<iframe src="/redirect.php?url=http://www.example.com/"></iframe>
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
Cheers!
shareimprove this answer
up vote0down vote
You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:
scrapedcontent.php:
<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>
index.html:
<iframe src="scrapedcontent.php"></iframe>
shareimprove this answer
2 
How will you handle images, included JS and CSS files, hyperlinks, and AJAX requests? –  dotancohen May 11 '14 at 6:54 
   
@dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed. –  Grant Jun 10 '14 at 2:57
   
This works, but its effectively double loading the content and therefore loading time as your server scrapes and then re-serves the content... –  ChristoKiwi Jan 12 at 0:56
up vote0down vote
If it's about a few and rarely changing URLs to embed into the iframe, you could set up a SSL proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxy.
For example, I would look into ngrok and mitmproxy for this, since they are small and simple to configure (though usually meant for slightly different purposes).

http://stackoverflow.com/questions/18327314/how-to-allow-http-content-within-an-iframe-on-a-https-site
Posted by at
Labels: , , ,