Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Best method to implement browser navigation #1

Open
gabrielpconceicao opened this issue Sep 22, 2014 · 7 comments
Open

Best method to implement browser navigation #1

gabrielpconceicao opened this issue Sep 22, 2014 · 7 comments

Comments

@gabrielpconceicao
Copy link

First idea of implementation

The first idea is to create an iframe. Node will serve a web server with contains in home page a socket.io client that will receive orders from the socket.io server + tests api.

But this form of implementation have a problem. The "Same Origin" security policy, to increase security in browsers when we try to access a domain or port in an iframe not equal to the domain or port we are using on browser, doesn't allow you to access directly to the iframe.

Possible solutions

We can use other solutions, like include an embed or object tag, instead of an iframe.

@cusspvz
@gabrielpconceicao gabrielpconceicao changed the title Best form to implement browser navigation Best method to implement browser navigation Sep 22, 2014
@gabrielpconceicao
Copy link
Author

The window.postMessage method seems to me the best option.
I create a simple test and it works very well.

The index.html file with an iframe:

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                var iframe = document.querySelector('iframe').contentWindow;

                    iframe.postMessage(
                        'New message',
                        'file://localhost/Users/[...]/Documents/crossOrigin/iframe.html'
                    );
            };

        </script>
    </head>
    <body>
        <iframe src="iframe.html" width="600px" height="600px" ></iframe>
    </body>
</html>

The iframe.html file with listener:

<html>
    <head>
        <script type="text/javascript">
            window.onload = function(){
                function onMessage( ev ){
                    document.querySelector('.message').innerHTML = ev.data;
                };

                window.addEventListener ? 
                    window.addEventListener( 'message', onMessage, false ) : 
                    window.attachEvent( 'onmessage', onMessage );
            };
        </script>
    </head>

    <body>
        <div class="message"></div>
    </body>
</html>

iframe.html receive an message from index.htmlby postMessage.

captura de tela 2014-09-22 as 16 00 45


I'm developing the other solutions to choose the best option and I will publish them.

@cusspvz
Copy link

cusspvz commented Sep 22, 2014

Could you please create a repo for PoC proposes where you place a code with those examples where they follow this steps:

  • Visit https://www.findhit.com
  • Once page is loaded, alert document.title of https://www.findhit.com

@gabrielpconceicao
Copy link
Author

Here is the repo Neck-PoC. I'm now programming the alert.

@gabrielpconceicao
Copy link
Author

We have a problem. postMessage alllows communication between windows and iframes, but need's a listener on the iframe and I can't change the src of ìframe because we lost the listener. This is good to make a document change, for example, on a external loaded iframe page, but for navigation it's impossible I think.

@gabrielpconceicao
Copy link
Author

For first option, Disable the "Same Origin" policy in all devices we can use on Mac osX this command

open /Applications/Google\ Chrome.app/ --args --disable-web-security

to run chrome without web security. It's working.

@cusspvz
Copy link

cusspvz commented Sep 22, 2014

We have to make it work without that arg, since we couldn't put that argument on iOS and Android heads.

@cusspvz
Copy link

cusspvz commented Oct 7, 2014

I would vote for users to setup their website CORS if they want to use Neck-Browser, and to cover all domain issues, to allow users to setup on Neck which document.domain should Neck-Browser run into.

It should be easy to play around this with DNS settings, but thats for later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cusspvz @gabrielpconceicao