1
votes

I am trying to build a phonegap app, which acts as a mini browser for a clients website. The clients customers would open this app, it would have a list of favorites. They could click on one of these favorites and it'd open that favorite within the minibrowser.html page. The minibrowser.html, has a favorites button at the top, then it has an iframe that should act as the browser. I open the favorites by changing the iframes src. I can capture the title/url with this code

$iframe.on('load', () => {
  try { 
    console.log($iframe[0].contentDocument.title);
    currentUrl = $iframe[0].contentDocument.URL;
    console.log(currentUrl);
  } catch (e) {}
});

But the problem occurs when the webpage within the iframe trys to access window.top with this line

window.top.scrollTo(0,1);

That throws the error:

Uncaught SecurityError: Blocked a frame with origin "https://webapp.company.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

Is there anyway to spoof window.top for the iframe? Is there anyway of doing this without hosting the phonegap code on webapp.company.com. I do not have access to webapp.company.com

1

1 Answers

0
votes

Due to the nature of the HTTPS protocol, it's mandatory for the server to specify if it's accepting third-party frame distribution (something like what you're trying to do). This is done as it's a major flaw when it comes to security.

Imagine, a person may use a simple variant of this hack to show a part of the Facebook page, and capture your account details. This policy prevents that.

A simple workaround would be to use some sort of URL shortener, or a proxy forwarder.

For a quick example: http://codepen.io/nakshatra334/pen/OMgLLP and open up the console; you'll see the content security policy.

The header, X-Frame-Options is denying this as people may use this for illicit purposes.