If you are using a page tab on facebook, you can connect other websites inside the iframe. I want to get the url of facebook within the facebook page. when I am trying to get window.location.url, it shows my website url, how to do it in facebook page to get facebook url
You can't. Your Facebook application exists within an iframe, which cannot access the parent window on facebook.com due to same-origin restrictions in all major browsers. It is effectively sandboxed.
However, the Facebook signed request will include the ID of the Facebook Page your tab is being accessed on.
I'm trying to handle reauthentication using a different Authorisation website, while within a Single Page Application (SPA) in my home website. Both websites are internal to a client site.
I can't use the standard "redirect" method as I'll lose my SPA JavaScript context.
I've investigated and had CORS setup on the Auth website so it's now returning Access-Control-Allow-Origin: https://www.mywebsite.com. When I try to load the Auth page into a JQuery UI dialog it fails as the scripts all try to load in the context of the Home website.
i.e.
From my website https://www.mywebsite.com/static/
I'm loading https://www.auth.com/login.html.
When loaded into a JQuery UI dialog it tries to load it's scripts as https://www.mywebsite.com/static/scripts/authscript.js
instead of
https://www.auth.com/scripts/authscript.js
I also tried loading the Auth page into an iframe by changing the src tag but it just reloaded the page.
Is there a way to change the Source directory in the context of the CORS web page I'm trying to show?
So I couldn't get the page to load correctly into a standard jQuery Modal dialog and I have no control over the Auth page I was connecting to. To solve this I investigated the problem I was having with the iframe and used an HTML5 feature sandbox to fix it.
The Auth page was using a "break out" script to reload the page if it was loaded into an iframe and obviously this broke my SPA context. HTML5 allows you to restrict the contents of an iframe.
<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>
allow-forms Allow form and submit
allow-scripts let it run JavaScript
allow-same-origin let it consider the Origin the same as the script (i.e. the Auth website), this was necessary to enable cookies
Of note is that I am not including allow-top-navigation which is what was allowing the reload of the page and loss of my JavaScript context
Voilà, auth page displayed inside a jQuery modal dialog (containing the iframe) with no need to pop up another window.
CORS was necessary to allow the redirect to the Auth website (which happens in the browser before JavaScript gets involved). You could also trap the "Access-control-allow-origin" exception instead.
The iframe with the Siteminder login was accessing a page from my site that set a value in localStorage once the user had logged in. The app just polled localStorage in the background to see if the user had logged in successfully.
Hope this is useful to someone.
I have a Google Chrome Extension that uses Fancybox (http://fancybox.net/) to show a login form.
After a user logs in or registers I would like to automatically close the lightbox. The Fancybox is hosted locally in the Chrome Extension while the login form is on our domain.
Is there a way for the iFrame (our domain) to call a function to close the Fancybox?
Yes. You'll have to use cross-window messaging and postMessage. This allows your extension to post a message, and your iframe to receive it. You'll need code on both ends (to send and receive the message).
Here's a good tutorial (not chrome extension specific): http://javascript.info/tutorial/cross-window-messaging-with-postmessage
I have an html page that is being accessed via a link that places an external page in the url - e.g.
http://www.mydomain.com/mypage?external-page=encodedURL
It is the responsibility of my page to scrape some data from the URL it is handed.
How can I access the passed-in page using javascript/jquery? I need to be able to pull out the content for certain classes and ids.
Is this a violation of same origin policy? If so, is there some other way to process an external page like this? Seems strange to me that I can hit the web page in a browser or a terminal command and receive the content, but not in a js file.
You can use a browser extension to scrape the external page, then send the data to your site, OR display it within the page, so that it can then be accessed by your page's javascript via the DOM.
You can use a proxy on your domain which fetches the external page and hands it to your javascript whose origin is on your domain, too.
You can use an API for the external page which is accessible.
You can ask,command, change the code of the external page (if you have access to it) to serve pages with Access-Control-Allow-Origin=*
I think this is all you can do.
EDIT: The "seems strange" is until you realize the intended difference between a user, and a process. The user is not thought to be malicious, but a process could be. A process could for example, grab data from a user's logged in gmail session if it had access to the external page, and transmit that data to a server. Since the user on the terminal is probably (but not always !) the one who logged in to that session, the user is not thought to be malicious. But a script whose origin is some website that user navigates to, should not be able to act with the same permissions as that user. Since that script is an agent as well, and can make actions, but it is not created or directed by the user. That's the strongest reason for the isolation of origin's and the same origin policy.
Example
Execution Context of Bookmarklets, and IFrames
If you are injecting JS into every page via a bookmarklet, then that injected code will behave as if it has the same origin as the rest of the page, or at least the "top frame" of that page. It will execute in the same context as the top frame. If there are nested iframes in the page then you will get an "unsafe attempt to access page x from " error if your bookmarklet tries to inject into there. This is because the bookmarklet has it's origin in the top page, and the top page can never access nested iframes on different domains anyway.
So if some part of the site you wish to scrape is in an iframe below the top frame, your bookmarklet will fail to get it.
Transmitting Data using a bookmarklet
If you want to take a url on one page, on your domain, then grab data from that url, on another domain, then display that data back on the same page, you need a way to get the data across. You could use a bookmarklet but the flow would still involve some "user help". It would go something like this:
Load your domain's page, D. User puts a url into an input box. Clicks submit.
Javascript on D opens a new tab/window pointing to the user provided url.
User clicks your scraping bookmarklet on that external page, which collects the desired data, X.
Desired data, X, is sent via Ajax to a "server", S, with session identifier I.
Page D, polls the server S, until it gets notified that some data with session identifier I has been grabbed, then it gets that data and displays it on D.
There is the need for a server. You can't use local storage to transmit the information since this is specific to a domain. There is an alterative that does not require a server. It requires making a browser extension.
Transmitting data using a browser extension The "background page" of the extension is basically the same as a local server for all the browser tabs, it permits transmitting of information across tabs targeted to different domains. The "clients" in this set up are the "content scripts", which are loaded to every page (just like a bookmarklet, except without the requirement for a user to actually click the bookmarklet to load it. It happens automatically). The flow would go like this:
Page D again. User inputs url in input box. Clicks submit -> which triggers some code in the extension.
The extension background page instructs a tab to open and targets it to the url.
A content script loads automatically into that tab, checks with the background what data it should get. It gets that data, and sends it, via a message (a json string) to the background page.
The background page pushes that notification and the data on to the original contents script on page D. Which displays the information.
Optionally, the background page also transmits the information to your server for saving into that user's datastore.
The language I use for the browser extension "background page" and "content script" is pretty much focussed on Google Chrome. The same concepts are available in Safari, Firefox as well. If you want to support IE you're going to have to work out something else. IE10 does not plan to even support extensions.
If the external page and your page is on the same domain, then you should be able to access that external page using JavaScript. Otherwise, the JavaScript won't be allowed to access the external site, browsers will prevent Cross-site scripting.
I would like a javascript bookmarklet that will "click" on the facebook "like" button on my web site. Its for an automated program so it can automatically have that user like the home page of my program.
Is this possible?
This is going to be impossible due to the Single Origin Policy that will not allow you to simulate a click in an iframe that does not belong to your domain (or make a cross-domain request to Facebook, for that matter).
And thank Goodness! What you are trying to do sounds like something Facebook (or any other provider of such buttons) would want to prevent.