5

I programmatically create a html report, split into two frames. If the user then clicks on a hyperlink on the right hand frame the frame is replaced with the contents of the page.

This worked fine but now when i try to link to any Discogs release page such as this one it doesn't load it

Ive noticed Discogs have moved to secure http, I wonder if this is the issue. Although I can go to other https page such as this Acoustid one without a problem.

If I open the first link in a new tab using target="_blank" it then works okay but that is not what I want.

Paul Taylor
  • 13,411
  • 42
  • 184
  • 351

3 Answers3

5

You can see root cause of this problem by opening Developer Tools in Chrome. If I got your problem right, I reproduced it in simple HTML page:

<html>
<body>
    <iframe src="https://www.discogs.com/release/1000"></iframe>
</body>
</html>

enter image description here

It's not a problem of HTTPs. The message says:

Refused to display 'https://www.discogs.com/release/1000' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

It means that Discogs blocks showing their content in frames in other origins than discogs.com. You cannot do anything with it.

Maciej Walkowiak
  • 12,372
  • 59
  • 63
  • Totally agreed!!The issue is the given link restricts frame usage for other domains,while the acoustic link works perfectly fine here!! – Shivam Aggarwal Nov 14 '16 at 06:20
  • So to clarify there is nothing I can do about this, and the answer from SkyWalker although interesting would not actually solve the issue ? – Paul Taylor Nov 14 '16 at 10:48
  • Unless you want to create some crazy workarounds and struggle later with maintaining them, there is no reasonable solution that I am aware of. But in your case, have you tried to consume their API? It looks like consuming their data through API is good solution for your problem: https://www.discogs.com/developers/ – Maciej Walkowiak Nov 14 '16 at 21:42
  • I do use their api in my application. But here I just wanted to create a link to allow users to open the appropriate page in their browser within my report. – Paul Taylor Nov 16 '16 at 08:08
4

UPDATE#1

The foundation of the browser's security model is the same-origin policy, which protects web sites from one another. A full details example is given step by step in this tutorial: Security in Depth: Local Web Pages

In short,

If a web page comes from your local file system rather than from the Internet? Consider the following hypothetical attack if your browser did not limit the power of local pages:

  1. You receive an email message from an attacker containing a web page as an attachment, which you download.
  2. You open the now-local web page in your browser.
  3. The local web page creates an <iframe> whose source is https://mail.google.com/mail/.
  4. Because you are logged in to Gmail, the frame loads the messages in your inbox.
  5. The local web page reads the contents of the frame by using JavaScript to access frames[0].document.documentElement.innerHTML. (An Internet web page would not be able to perform this step because it would come from a non-Gmail origin; the same-origin policy would cause the read to fail.)
  6. The local web page places the contents of your inbox into a <textarea> and submits the data via a form POST to the attacker's web server. Now the attacker has your inbox, which may be useful for spamming or identify theft.

There is nothing Gmail can do to defend itself from this attack. Accordingly, browsers prevent it by making various steps in the above scenario difficult or impossible.

LocalLinks Addon uses NEW TAB to open iframe local file:

Allows opening file:// links on pages loaded by http(s):// scheme

The security model of Chrome prevents/blocks the user from being able to open file:// links when the user selects (left clicks) the link, or selects to open them in a new window (middle click). Loading this extension will allow you follow file:// links when you explicitly select them (left click/middle click). The HTML elements it will follow are ones like <a href="file://server/share/file.txt"> or <a href="file://c:/localdiskfile.txt">.

NOTE: It can't load images (like <img src="file://..." />)!

To open a link in the same tab, use the left mouse button.

To open a link in a new background tab, use the middle mouse button.

This extension is modeled after the LocalLink add-on for Firefox.

Read http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

CHANGES in this version: + Respect target = "_blank" attribute on left click

Full changelog see on http://code.google.com/p/locallinks/wiki/CHANGELOG

There is also another 2 types of security problem.

  • to call an iframe with https from your http server.
  • to call an iframe with http from your https server.

Mozilla Foundation has given a great details here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Same Origin policy from

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.

Definition of an origin

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages. The following table gives examples of origin comparisons to the URL http://store.company.com/dir/page.html:

--------------------------------------------------------------------------------
                   URL                           | Outcome |    Reason         |
--------------------------------------------------------------------------------
http://store.company.com/dir2/other.html         | Success |                   |
--------------------------------------------------------------------------------
http://store.company.com/dir/inner/another.html  | Success |                   |
--------------------------------------------------------------------------------
https://store.company.com/secure.html            | Failure | Different protocol|
--------------------------------------------------------------------------------
http://store.company.com:81/dir/etc.html         | Failure | Different port    |
--------------------------------------------------------------------------------
http://news.company.com/dir/other.html           | Failure | Different host    |
--------------------------------------------------------------------------------

Why you should not mix http and https when using iframes?

How it works?

  1. If the protocol of your page is http than use a http page inside the iframe.
  2. If the protocol of your page is https than use a https page inside the iframe.

But why should you not do this?

1. https with http iframe

Lets start with the one you should not do: Your page is https and your iframe page is http. This scenario is called "Mixed Active Content" and is blocked by more and more browsers.

I have found a nice description from the developer from Firefox about this topic: https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/

There you e.g find the following: Firefox and Internet Explorer consider frames Mixed Active Content, while Chrome considers frames Mixed Passive Content. This means that Firefox and Internet Explorer block iframes while Chrome does not (yet).

2. http with https iframe

The other way is including an iframe with a https page into a http page.

This is the way you can do but is not recommended (see below why)! If you really have no other way please try if it is working on all major browsers. I already had users with side effects when it comes to cookies or session handling!

The next section is from HTTP and HTTPS iframe:

It is generally bad practice to embed an iframe with content served over HTTPS within a page served over plain HTTP (or mix content). The reason for this is that there's no good way for the user to check they're using the HTTPS site they intend (unless the user really wants to check the source of the page).

An attacker could very well replace the content you serve like this:

<iframe src="https://your.legitimate.example/loginframe" width="300" height="150">

with:

<pre><iframe src="https://rogue.site.example/badloginframe"></iframe>

or even:

<iframe src="http://rogue.site.example/badloginframe"></iframe>

This is very hard to detect for the user, and defeats the security measure you're trying to put in place by enabling login via HTTPS.

So I hope you now don't mix content anymore ;).

IF YOU STILL REALLY WANT TO DO THIS: The external workaround is by default NOT working in this setup as the Javascript is than loaded from an http domain which is blocked! So to get this working you need to

  1. Enable "Use post message for communication" on the "External workaround" tab.
  2. Copy the generated ai_external.js to a https domain and include it from there! Remember to copy the ai_external.js each time you change something with the "save" icon in the administration.

For more, you can go through this link: https://stackoverflow.com/a/25189561/2293534

Community
  • 1
  • 1
SkyWalker
  • 28,384
  • 14
  • 74
  • 132
  • thankyou for your very detailed reply, but I don't fully understand it and I think I should describe my situation a bit more. A html report is created on users computer when run application, this does need to be https as it is serving html pages created locally on the users own computer, in fact there is no http server I'm just opening plain .html file directly with users default browser. But some pages do have links to pages on the web, and some of these are https and are not under my control. – Paul Taylor Nov 08 '16 at 12:29
  • @PaulTaylor In a single word, if you use simple tomcat application and just loading a html page, then this page is loading on http where port is 8080. If you write a https link in your simple html page, then it will make security error. If you make new tab using `target="_blank"`, then no error will be occur. – SkyWalker Nov 08 '16 at 14:21
  • @PaulTaylor 1. If you also check the table in simple case you are using http where port is 8080 and your iframe is calling https where port is 8443. So there will be failure for different protocol. 2. If you use iframe with http but port number is 81, then there will be error for different port. 3. If your domain is `store.company.com` and use iframe with http but another domain `news.company.com`, then there will be failure for different host. Hope it will clarify. – SkyWalker Nov 08 '16 at 14:27
  • Im not even using tomcat. I create the files on the filesystem then the html file is just opened from the browserusing fiel protocol i.e file:///C:/Users/Paul/AppData/Roaming/SongKong/Reports/FixSongsReport00261/FixSongsReport00261.html – Paul Taylor Nov 10 '16 at 10:28
  • The root cause is `The foundation of the browser's security model is the same-origin policy, which protects web sites from one another.` A detail description is given here: https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html . Please check and also check the UPDATE#1 position. – SkyWalker Nov 10 '16 at 17:17
  • Reading the other answer it seems like there is no way round this, or is there Im not really sure – Paul Taylor Nov 14 '16 at 10:49
  • browser has given this type of intelligence so that any user can not be harmed by this type of silly hacking way. @PaulTaylor – SkyWalker Nov 14 '16 at 15:43
0

you can use iframe sandbox to help test an solve your problem:

allow-same-origin

Link