AJAX - Modal Popup Not In Generated Source - How'd They Do That? - javascript

On the Bloomberg.com site, in the top right of the homepage there is a 'Sign In' link (next to their search textbox). Upon clicking the link a simple-looking modal popup appears into which one can enter one's sign-in credentials. Clean, elegant. With the popup still visible I did a generated source check and there's no evidence of the modal popup html anywhere in it. I'm wondering why the modal popup source is missing and, assuming it's coming from somewhere else, where it's coming from. Can someone please explain it?
More generally I assume that Bloomberg's login dialog is ultimately transmitting its user data on an encrypted basis. The home page itself is rendering as a standard http. Is there some hidden - and secure, presumably https - means by which this site, and others I'm sure, is accomplishing its modal information gathering and posting, securely and distinct from the base homepage? Any clarifications on how this is happening and the best practices for coding it would be appreciated. Thanks!
-- Rick

The popup is actually just presenting an iframe of this URL:
https://login.bloomberg.com/api/login?skin=&rt=http%3A%2F%2Fwww.bloomberg.com%2F&cc=0.13446950796060264
(And the iframe itself is presented over HTTPS, which covers the security issue you mentioned)

Related

Creating a link to another website and loading a modal

I have just seen a website that can create a link to any website and display a modal when the link is clicked on someone else website. I was just curious if anyone knows how this is done?
Here's the test link that does this:
https://twitter.com/workladuk/status/955752813333766144
Here's how this scheme works:
Notice that clicking on the link in the tweet mentioned in your comment (seen at https://twitter.com/workladuk/status/955752813333766144) doesn't actually take you to StackOverflow, even though it appears to point to this article.
It takes you to http://readr.me/vc-25, a totally different site. This is clear from the browser address bar.
By inspecting the HTML of that page using the browser developer tools, we can see that it actually is a totally different page containing an overlay with the signup form, and also an iframe containing the page the user was hoping to visit, giving the illusion that they're on the page and just need to close the popup to view it. Once they do close the popup, it actually makes a whole new HTTP request and redirects the user to the real page.
Interestingly, this was even more obvious given the example you used, because when going to the site with the signup form, the StackOverflow page displayed underneath it showed I was not signed in, even though I was signed in to SO in other tabs in the browser. This will be because running it in an iframe caused it to be run in a separate session, in which I was not signed in. This was a another big clue to show that I was not on the real Stackoverflow page.
So to be clear, it is absolutely not making a popup appear on another website, because that's impossible without hacking it. Instead it's actually creating another page containing the signup form, redirecting the user to that page and embedding the "real" page within that to create an illusion.

Forcing a user to authenticate using a pop-up

I have a page I want only authenticated users can come to. Also I want to authenticate them using a pop-up when they come to that page, say, twitter bootsrap or foundation. How can I do that if a user can just close it? It's unreliable, isn't it?
There is a risk that the user changes the css properties of your live page, to make it invisible pop-up. A simple tool like Firebug makes this possible. Authentications pages are safer in a page intended for this purpose.

Facebook 'Like' Dialog Appears and Immediately Disappears

I've been having an issue with the Facebook Like button for quite some time. I've looked all over for a solution but am quite stuck. The error occurs on my site www.MapYourVote.com. When you go to a poll page and click 'Like' the dialog appears and quickly disappears. At the same time, the counter also goes to 1 and quickly goes back to 0.
The problem is always solved for individual poll pages by using the Facebook Debug tool (http://developers.facebook.com/tools/debug). Once you use it on the url, the like button will work as expected. The issue is my website is dynamic and I can't use the Facebook Debug tool every time someone creates a new poll. The Facebook Debug tool does not reveal any problems (apart from og image size but I doubt that's the issue).
Here is an example of a page in which the Like button does not work. If you were to enter this url into the Facebook Debug tool, the Like button would work.
http://www.mapyourvote.com/Poll/Election-Result-Feelings/
Any help would be much appreciated!
I also had this problem. I was constructing a referrer url to give link-sharers a credit, so there was a different url for each user that wanted to share something. The referrer link would give the user credit and redirect to the login page of my site. With this configuration, the like dialog would appear for a moment and then disappear again, unless I went to facebook's debug tool.
What fixed the problem for me was to change from a redirect to rendering the page directly from my referral link. In fact, I changed the referral link to be a ?r=refid parameter on my root page URL. It appears to work correctly if facebook doesn't have to follow a redirect to get the og: data.
I had a similar problem and it turned out I had too restrictive cookie policy set in my browser - I only allowed Facebook to use 1st party cookies. When I allowed Facebook to use other cookies, the problem was solved. It's hard to debug when no error appears other than the immediate pop-up closeup.
I had the same problem. It was caused by url value in data-href attribute. I had there url pointing to my localhost.
When I changed the url to existing one, problem was solved.
Hope it helps
For me, the problem (Like popup disappearing after a second) was happening when the Like button URL redirected to another URL.
The fix was to add og:type, og:url, and og:title (required per https://developers.facebook.com/docs/reference/opengraph/object-type/website), then running the URL through the Facebook debugger to clear the cache (https://developers.facebook.com/tools/debug).
More at https://stackoverflow.com/a/16597060/2391566

Facebook FB.login() Popup Won't Close in IE8

I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!
Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved
You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.
By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().

Is an overlay more susceptible to phishing?

Working on a web development project, functionality requires a user to navigate through the website then login and perform a very sensitive function. The login and subsequent functionality is hosted on a different site (sorry I can'be be more specific due to sensitivity)
Choices considered for the UI are:
A javascript overlay
A popup
Load in the full page
The current development and prototype user testing has been on an overlay with no problems. There is concern that an overlay does not show the address bar and the SSL certificate therefore is more susceptible to phishing.
A popup or a full page would be better in this respect but I have read studies that show users do not pay attention to passive indicators:
http://www.usablesecurity.org/emperor/
Popups also have the problem with popup blockers, the overlay looks the best and provides the least disruptive user experience, i.e. user feels they have not left the original site
So what is the best option considering security, usability and design?
Related question: is there any problems with loading an iframe within an overlay? e.g. scrollbars etc?
Edit: The question is more how to present the secure login page on an overlay, a popup or redirect to load the login in the full page. I'll edit the question to make this clear
Edit: Any links to research or studies showing increased phishing if an overlay is used would be very useful for making the case
Just redirect the user to login on the secure login page and customize its look. Make sure the secure login pages url are the same every time. You might wanna have a look at how Stack Overflow (a big website for programmers) handle logins with OpenIDs.

Categories