73

I'm in the in the process of developing an application for a client, which will have an SSL certificate and be served under https. However, to integrate with their existing site they want to provide their navigation inside an iframe.

I can see this causing trouble, as I'd expect the browser to complain about the mix of secure and insecure content on the page. I've had a look at similar questions on here and they all seem to refer to this the other way round (secure content in the iframe).

What I'd like to know, then, is: will it cause issues to have insecure content included inside an iframe, placed on a secure page , and if so what sort of problems would they be?

Ideally if it's not a good idea (and I have a strong feeling that it isn't) I need to be able to explain this to the client.

TylerH
  • 20,799
  • 66
  • 75
  • 101
moogal
  • 1,599
  • 2
  • 11
  • 12
  • Are you talking of using your main page in plain HTTP and embedding an iframe that uses HTTPS? – Bruno Feb 14 '12 at 16:51
  • 6
    No, the opposite - the main page is HTTPS, the iframe is plain HTTP. I've edited the question to make this clearer. – moogal Feb 14 '12 at 16:53
  • 1
    There are a [number of questions](http://stackoverflow.com/search?q=https+iframe) about this already. In sort, it's a bad idea, because users won't be able to know which part of the page is secure and which isn't. – Bruno Jun 13 '12 at 19:37
  • 1
    Some answers can be found here: http://stackoverflow.com/questions/18327314/how-to-allow-http-content-within-an-iframe-on-a-https-site/25189561#25189561 – Matthew Peters Aug 07 '14 at 18:46

3 Answers3

49

If your page is http then it allows iframe with https content.

But if your page is https then it does not allow http content.

Lets put down following possibilities.

page - iframe - status

http - http  - allowed
http - https - allowed
https- http  - not allowed
https- https - allowed
richard
  • 12,263
  • 23
  • 95
  • 151
Amol Ghotankar
  • 2,008
  • 5
  • 28
  • 42
  • 4
    https - https - insecure scripts - not allowed – coderek Jul 30 '14 at 21:19
  • 3
    https - https - inscure images - allowed – coderek Jul 30 '14 at 21:20
  • 1
    Simply because we show user that you are on a secure page but do transactions insecurely. As users may not be technical to understand iframes so its browsers and developers job! – Amol Ghotankar Aug 08 '14 at 16:57
  • https - https - inscure images - allowed but the browser will warn – Cagatay Gurturk Nov 19 '14 at 19:12
  • Embedding a secure site inside another (different) site can lead to click jacking attacks which is why PCI guidelines suggest frame busting to prevent this practice. So although allowed, use with caution! Embedding a secure site specifically inside an insecure site opens the door to attack wider. – Danger Aug 03 '15 at 16:25
32

If your page is being accessed using https://www.example.com/main/index.jsp (SSL) then your browser will complain with "This page contains both secure and insecure items" if there are any resources in the HTML code that are referenced with http:// (non-SSL). This includes iframes.

If your navigation page is hosted on the same server then you can prevent the "insecure content" message by using a relative URL like this...

<iframe src="/app/navigation.jsp" />

From your question it sounds like your navigation page is being served from a separate host and you're being forced to use something like this

<iframe src="http://otherserver.example.com/app/navigation.jsp" />

which will of course cause the "insecure content" message in your browser.

Your only solutions are to either

  1. implement SSL on the server holding your navigation page so you can use https:// for your iframe reference, or

  2. move the navigation application to the same server so you can use a relative URL.

Personally I can't see why your navigation would be on a different host because then you're going to get JavaScript cross-domain scripting issues (unless some funky JSONP is involved).

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
Brad
  • 15,186
  • 11
  • 60
  • 74
  • 20
    Integrating with a third party, where you cannot run their code, is a good example of when you'd need a better option than this. – freyley Nov 19 '13 at 21:55
  • 4
    Doesn't the `src="/app/navigation.jsp"` approach require that the contents of the iframe be available under HTTPS? However according to the OP, the iframe is in plain HTTP. – KajMagnus Dec 07 '13 at 00:03
  • another example is if you want to allow users to iframe arbitrary URL's . For example on a website design site. – Thayne Dec 15 '14 at 14:57
  • KajMagnus is 100% right, if you are using a relative URL from a main page loaded in https, then all relative URLs will use the https protocol too. – Ben A. Hilleli Jun 13 '16 at 17:29
-3

Try removing the http: characters in the src attribute's value as so: 

<iframe src="//example.com/thefile.htm"></iframe>

This is of course a workaround, security is important so don't bypass blithely, but anyway this once got me past a similar problem.

Erik
  • 83
  • 2
  • 18
    this doesn't solve the problem. it just tells the browser "go ahead and use whatever protocol you used to access this page". in this case, it's equivalent to "https://example.com..." which doesn't solve the problem of example.com only being available via http – Robert Levy Feb 15 '16 at 16:50
  • 2
    Using this technique solved my problem every time on every browser when this kind of workaround is needed temporarilly – bastien Jul 17 '16 at 08:59
  • 1
    As @RobertLevy pointed out, this doesn't "solve" the problem. It is actually good practice and the best way to just use whatever protocol the parent is using. This of course only works, if the relevant resource also supports `https` and `http` – nuts May 03 '17 at 10:10