Menu
I would like to build a simple web application and let partners embed it within their sites. I intend to let the partners embed it using an iframe, much like youtube:
The app would require login via third-party authentication providers (e.g. Google, Facebook, OpenID).
Will such an authentication method be a problem within the scope of an iframe?
760
Third-party embeds are typically loaded in <iframe> elements on the page. Third-party providers offer HTML snippets often consisting of an <iframe> that pulls in a page composed of markup, scripts, and stylesheets. Some providers also use a script snippet that dynamically injects an <iframe> to pull other content in.
using ajax, query your server (over SSL!) for the username and password that you'll need to submit to the other server. dynamically create your iframe, populated with a form that is basically identical to the login form on the other server, submitting with the same "method" to the same "action" as the other form.
This approach may be a little problematic but doable. Many of the authenticate provider that use OAUTH for example (Google, Facebook, OpenID) will redirect users to a set URL after they have logged in and authenticated the application. You'll have to figure out a way to get them back to the page they came from (the one with the iframe). I am guess you can figure out where your iframe is being hosted (window.top, window.parent, i.e) save that information in the SESSION or a COOKIE, then return the user back to the page once they are done authenticating.
143
An iframe is essentially just a smaller browser window. Since your question doesn't relate to transfering messages to and from the iframe, I'd say the difficulty is exactly the same as implementing those functionalities normally. Either way, you get the user to the auth provider, they log in, and somehow get back to what they were doing, whether it is a full browser window or in an iframe. However, if the iframe is very small, they should probably open a new window.
26
It could be a problem. Displaying authentication dialogs in an iframe is generally seen as a security risk, and many authentication providers explicitly send a X-Frame-Options: sameorigin header with their authentication pages, preventing compliant browsers (read: nearly all modern browsers) from rendering their authentication pages within an iframe. Looking around, it seems that at least Facebook, Twitter and Google all disallow authentication inside iframe (this list is certainly not exhaustive). This probably could be taken into consideration by popping up a new browser window for the actual authentication flow, but likely won't be possible inside the iframe itself.
Description of the clickjacking exploit that lead to this situation: http://javascript.info/tutorial/clickjacking
Reference documentation for the X-Frame-Options header: http://www.rfc-editor.org/rfc/rfc7034.txt
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
