iframe correctly loads a webpage in some browsers but not others (insecure content error)

user_2736294 0
Viewed 1442

I have an https website that is trying to display an external https webpage in an iframe.

On Chrome and Firefox for desktop, it loads fine.

On desktop/mobile Safari and mobile Chrome for iOS, it doesn't load anything.

In Safari I see the error:

The page at about:blank was not allowed to display insecure content from http://example.com

Although the webpage that the iframe loads is https, it looks like there is some content it is trying to load that is http, and blocks the iframe from loading anything.

I'm really stumped, because it works for some browsers, but not for others. Here are the browser tests I ran.

Desktop Chrome: Success
Desktop Firefox: Success
Desktop Safari: Fail
iOS Mobile Safari: Fail
iOS Mobile Chrome: Fail
Android Mobile Chrome: Success

Has anyone encountered this error before and knows how to get around it? Why does it work in some browsers but not others? I am striving for cross-browser compatibility with using iframe. Any suggestions for hacks or workarounds would be greatly appreciated.

Update: After looking into the network tab. I see that it's requesting an HTTPS url, but the location is a HTTP url. Some browsers are okay with this and show the content. Other browsers seem to block it. Even though the location url says http, the request url does in fact open an https website. network dev tools

content-security-policy https iframe
1 Answers

The problem is mixed content which is when you're loading HTTP and HTTPS content.

The first question you must ask yourself which most developers fail to do: is this worth doing?

Under the presumption that it is you're going to have to get creative. You'll basically have to have your iframe load a page from your own site and have it load non-HTTPS pages. That also implies having to scan for HTML/XML attributes such as src and reconstructing their URLs (don't forget about the base element) so that those images are served through your site.

<?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;
}
?>
user_6063710
Related