Facebook JavaScript SDK, Putting Popups in Divs or IFrames - javascript

Basically I want to take the login page popup that is standard to the Facebook JavaScript SDK and put them in a div or iframe so I can load it in-page. Facebook provides a method to do this (here). The problem is that in the built-in method FB.Login(), all the FB.ui calls pass in "popup" instead of "iframe" and I cannot change the code without copying and pasting it all and editing it (not to mention its obfuscated).
Is there a method to intercept pop-up calls? Is there another method to do this that I am not thinking of?

According to this Facebook blog post, "A popup dialog is always required for the initial authorization and permission prompt." For additional permissions that you may need later, you may be able to use an iframe, but even that ability has been recently restricted as noted in that same post. So attempts to intercept the popup call probably won't work, and if you find an exploit, your app runs the risk of being in violation of Facebook's terms.

Related

iframe or JS to embed Rails in 3rd party sites?

I want to create embedable widgets for a Rails app, that would allow users to interact with the app from external websites.
I was all set to try using iframes to achieve this. But then I found a couple of forum responses that seemed to suggested iframes are not the best way to achieve this, and instead to use JS to embed HTML elements. This surprised me - I thought iframes would be a clear winner simply because of the isolation of CSS and scripts.
So, what is the best way to embed (limited) app functionality in a third party website. This interaction will be limited to login and a single simple form. Is iframes of JS embed the best way to go? And as a side question, are there security issues to be aware of with either approach?
I think using iframes suck hard. It's just not the feeling of a whole website, it's like a website inside another, mostly the styles won't match, or you have a scrollbar or the responsive layout is not applying right. So here's a little pro/con list:
iframe PRO:
requests are not cross site origin (most likely more secure)
"sandbox" javascript (no conflicts)
iframe CON:
style guides
history not changing (e.g. if you do a submit a form with GET you cannot paste the URL and send it to a friend)
js PRO:
Full control about the navigation (you can override link clicks with $.load etc).
Ability of changing the browser history (history API, see MDN)
smooth handling of html components
style's are automatically inherited
js CON:
CORS see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Handle (override) events like link clicking, form submitting. (see Sending multipart/formdata with jQuery.ajax)
Sessions/cookies
I wrote a little rails plugin which allows you to embed your rails app as a js frame inside another (it's still really really beta): https://github.com/Elektron1c97/better_frame. The plugin handles most of the js problems like the link/form events and write to the browser history.
So.. If you need to run an app which should be really embed in a site like a store on another website I would use js embedding.
If you create a custom item to share like the soundcloud player you may want to use an iframe.
If you want third party sites to react to interactions with your widgets then you should absolutely use javascript. Although it is possible to pass messages between different domains through an iframe it is not the most convenient to use. See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
As for using javascript, you can simply ask your users to embed a javascript file that will render your widget. To bypass any CORS issues, your widget should interact with an API that supports JSONP responses.

Improving the Bookmarklet Experience - Though Hacking?

So I have a site specific bookmarklet that create a page with a toolbar (using localstorage to set/get variables) and then creates an iframe for a destination site, say www.example.com. [Idea heavily borrowed from the wonderful RWD Bookmarklet (http://responsive.victorcoulon.fr/) ]. It works great, but I wanted to provide that a clickable link to that bookmarklet (because it is a pain to add a bookmarklet in an Ipad) but unfortunately that results in the obvious XSS cross-site problems since the link does not reside within www.example.com.
To improve this experience I was wondering if it would be possible to do have a popup (like twitter's) which would exploit an existing generic loadScript function currently present on www.example.com. From within the javascript console on www.example.com I currently can invoke a supervar.loadScript("http://dl.dropboxusercontent.com/s/blah/thefile.js") and it works. Which means I do not need to append or cross load the js into the iframe but I would need the iframe itself to invoke the supervar.loadScript call.
It is possible to invoke the supervar.loadScript on say a window.onload/document.ready type scenario or would the context of the popup code be pointing to about:blank/notexample.com in which case the supervar would not exist. Could window.postMessage be of any use?
UPDATE: Clarification
I am trying to have a button which would contain javascript code that in turn would open a new window/tab to a site but would be able to invoke a command on a variable that will be present when the DOM is ready.
Again, I'm quite new to XSS so I'm not sure if this is a security problem on the site. I'm not trying to access variables from one site to the next, just a means to load a userscript on a site without having to use a bookmarklet.
For a real test:
Visit: firsttaste.kraftcanada.com.
Open the javascript console and then enter: nitroWidget.loadScript("https://dl.dropboxusercontent.com/s/fcfbpfdmzrxywh9/mwolfe_alert.js")
This will execute the mwolfe_alert.js which merely contains an alert message.
Is there a way that I could create a clickable link on a site outside of *.kraftcanada.com which would create a popup/new tab that upon the {document,window,$}.onload/read would invoke the nitroWidget.loadScript?

Facebook Feed Dialog simplified?

I'm trying to add a share button or "feed dialog" as Facebook now seem to be pushing, to posts on my website. I'm basically looking for a way to simply allow users to click the button and be sent to the share preview page to post to their timeline or a friend's timeline etc.
The problem is that I don't really need an app (or at least I don't see the need in an app) and I'd like to avoid using their deprecated sharer url method.
What are my options? Can I use the feed dialog method without creating an app? I've tried going through their documentation but it just confuses me.
I'm not fussed whether it's JavaScript that opens a popup or if it redirects to a separate page (provided a redirect url can be provided to return users to the original page on my website).
you definitely need an app for the FB.ui feed dialog, but the user does not have to be logged in. Without an app, you can either use the sharer.php in a javascript popup, or you can use a like and/or send button. Just make sure to include Open Graph metadata in your page.
https://developers.facebook.com/docs/reference/plugins/send/
Be aware that you should also use an app (id) with the like or send button.

Facebook Javascript SDK inside a Spotify App, possible?

I guess the title is clear enough.
I would like to import the Javascript SDK of Facebook inside a Spotify App. Mainly to use the Dialog feature.
Does someone know if it is possible?
possible answer/workaround. https://developer.spotify.com/technologies/apps/docs/beta/09321954e7.html
the API has a showAuthenticationDialog, but what it actually does is that it shows a popup that closes when the url parameter is loaded inside that popup. if the authenticatewith facebook isn't enough for you then this might be a possible solution to use, you can use it with facebooks page too. if you just open a link regularly it will open up outside Spotify.
you still might be able to use the facebook js sdk though, but if it uses popups you'll need to use this in it instead.
You don't need the JS SDK to use the Dialog feature. All dialogs have a plain old URL you can send users to (within a popup, or the main window).
For example, the Feed dialog:
https://www.facebook.com/dialog/feed?app_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI

Loading js for Facebook Connect on demand

Our site uses Facebook Connect to allow users to post updates to their Facebook. The javascript that allows this has to be loaded directly through Facebook's Feature loader, and we had been loading it on every page where a user might want to connect to Facebook. Unfortunately, because some users have Facebook blocked at their workplace, this is causing our site to hang for those users.
Ideally, what we'd like to do is to load the js through the feature loader only just before it is actually needed. However, we do not know whether the feature will be needed until after the page on which it will be used is already loaded. Specifically, a user will open up a dialog box and check "publish to facebook" before submitting a form by AJAX (but NOT leaving the page). It is at this point that we'd like both to load the Facebook js, and immediately execute the code to bring up their dialog box. Is there a reasonable way to do this?
Essentially what you want to do is load the js on demand after the page has already been loaded. This is certainly doable; there is a decent article that summarizes how you might accomplish it here:
http://ajaxpatterns.org/On-Demand_Javascript
I also like the following little functions from phpjs.org:
http://phpjs.org/functions/require_once:503
http://phpjs.org/functions/include_once:434
http://phpjs.org/functions/include:433

Categories