Why do browsers allow onmousedown JS to change href? - javascript

I've noticed for a very long time that when you try to copy a link location or open a link on Facebook, it modifies the link and passes it through l.php.
For example, I can be sent to
http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.google.com%2F&h=DKVUritNDJDJLDLVbldoDLFKBLOD5dlfDJY_-d3fgDUaA9b
even though my browser render the link preview as http://www.google.com/.
Today, I took a closer look using Firebug and found that Facebook puts onmousedown="UntrustedLink.bootstrap($(this)[...] in the <a> tag. The second I right clicked the link, I saw the href attribute change in Firebug.
This worries me.
The advice many of us have given to less tech-savvy people (check where the link is taking you before you click so that you don't become a victim of phishing) now seems to have become useless. Isn't this a security risk? Can't phishing websites misuse this?
Why don't browsers prevent this behavior either by disallowing onmousedown to change the href or by running the javascript before reading the href attribute, so that I am sent to the location I thought I going to, not the one change while I was clicking it?
Edit: I want to briefly emphasize that what bothers me more than the risk of phishing is that users are being misled and it simply feels wrong to me that this can happen, whether by a trusted source or not.

I agree that there is potential here for phishing. This was reported as a bug in FireFox quite a long time ago, but the problem is this:
<body onmousedown="document.getElementById('changeMe').href='www.somewhereelse.com'">
<a id="changeMe" href="www.google.com">google</a>
</body>
Events bubble up to their parent, you would need to detect if an onmousedown event was going to change the href of a child element. Sounds reasonable? Okay, how about this:
<script>
function switcher() {
window.location = "www.somewhereelse.com";
return false;
}
</script>
<body onmousedown="switcher()">
google
</body>
So we need to look out for window.location in functions triggered by onmousedown events as well. Still sound reasonable? How about if I have the onmousedown event remove the link altogether, replace it with a new element and then trigger the click on that. I can keep coming up with examples.
The point is, Javascript can be used to misdirect people using the status bar - you shouldn't trust it, you can only trust the URL.
To change this browsers would need to give the set href value on a link at the time of the click presidency over any other events that might happen, basically disable mouse events on anchor tags. I would venture to guess they probably won't do this, it would break too many applications that already exist.
Edit: Alternatively, I've seen people propose different methods of detecting and warning the user about possible link hijacking, but I've not seen any implemented yet.

The advice many of us have given to less tech-savvy people (check where the link is taking you before you click so that you don't become a victim of phishing) now seems to have become useless.
If by "check" you mean the link 'preview' browsers show at the bottom status bar then you are correct. That is not enough to check whether a link really goes where it claims to be going. For instance, running the jquery script below on a page will cause all link to go to google.com regardless of what the actual href target of the link is:
$('a').click(function(evt){evt.preventDefault();window.location.href="http://google.com"})

Can't phishing websites misuse this?
Not really, because facebook is where the said javascript would have to be called from. The user has to go an untrusted source in the first place who would embed the javascript in the tag.

Related

Is there a way to make a click event have the same behavior as after clicking a link?

When we click a link like A link, the current page will be redirected to the given URL. But we'll be led to a new tab if we cmd/ctrl+click it. I wonder that is there a browser interface(something like window.open()) in JS that can give the click event of a non-a tag the same behavior above? The solution I got from the Internet is all about detecting e.metaKey/ctrlKey to decide whether to add _blank to the window.open() or not. The solution is tricky and still has some differences from the expected behavior. Maybe we can just simply use the <a> tag directly to avoid this. But can this be the solution for all situations? And could you guys please give me the reason if there's indeed not a pure JS way to simulate the event? Cuz it's weird to me.

How does Google mask the real URLs of links on search results pages?

The following I tested on the latest versions of Chrome and Firefox, and IE11, and the results were the same.
If you do a Google search and then mouse over a link on the search results page, the link shown in the bottom-left corner of the browser window is not the same as the actual href of the a element.
In all three browsers I tested this on, if you inspect the link in the element inspector though, you can easily see the real link (which is to www.google.com), and while the inspector is open, if you mouse over the link again, then you'll see the real URL link in the bottom-left corner of the browser window.
I have two questions regarding this behavior?
While perhaps a bit naive to ask, why does Google do this?
How does Google do this? Because I saw this behavior in Chrome, Firefox and IE11, I'm thinking that this is some JavaScript-controlled behavior (as opposed to some browser-controlled behavior), but I've never heard of this being possible in JavaScript. If it is possible in JavaScript, how do you do it?
Thank you.
Look at the initial markup:
<a onmousedown="return rwt(this,'','','','3','AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw','35cXyZwuoZY8hBY1VfDr8Q','0CEAQFjAC','','',event)"
href="http://en.wikipedia.org/wiki/How_Do_You_Do_It%3F">
<em>How Do You Do It</em>? - Wikipedia, the free encyclopedia
</a>
Initially the href attribute shows the "real" URL. But when you click on the link, the rwt function changes the attribute value to
http://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&ved=0CEAQFjAC&url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHow_Do_You_Do_It%253F&ei=8nSMUqXtLKfe4QSzwIDADQ&usg=AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw&sig2=35cXyZwuoZY8hBY1VfDr8Q&bvm=bv.56643336,d.bGE
To answer your question: they use the onmousedown attribute to change the link's href attribute when you click on it. Barmar points out why they do it.
The link in the results page points to a redirect page on the Google server. They do this so they can track which links people click on. This is more reliable than using Javascript, since it doesn't require users to have Javascript enabled.
You can see the eventual target of the link in the url parameter of the URL.
When the user clicks the href,
the onmousedown event handler gets executed
before the default behaviour kicks in.
This time frame is used to change the href of the anchor tag.
Check out this simplified version of their code:
<a
href="https://www.google.com/"
data-href='https://www.yahoo.com/'
onmousedown="this.href = this.dataset.href"
>Link</a>

How can I stop google.com from pulling my cursor away from the URL with Greasemonkey (or Adblock)?

How can I stop google.com from pulling my cursor away from the URL and focusing it on the search box with Greasemonkey?
I use google as my home page and hit the home button to open a new tab, maybe not the best way to do it, but it is habit. I will start typing in a URL and when the page is done loading the Google search field pulls my cursor away when I'm half done typing.
I know a decent amount of javascript but I don't even know where to start when viewing Googles page source. If someone could write a script for this I would love you forever, and I'm sure many others would too!
EDIT:
Possibly the better question is how to do this with Adblock Plus?
EDIT#2:
Is it possible to run javascript before a specific page loads with a firefox plugin? Or, is it possible to block javascript on a page before it loads?
I am not looking for any "work arounds" I am looking for a fix. A fix to remove or disable "document.f.q.focus()".
Edit#3: What about a bookmarklet? Could it be possible with that?
See http://noscript.net/
It's a firefox plugin that disables javascript on sites. You could configure it to just run on google.com, I think (if you do not want it to interfere with other sites).
Noscript is more secure, but it can be a pain because it uses a whitelist approach.
Or you can use YesScript, which operates a blacklist instead.
Re: "I just want to blacklist a specific line of code on 1 site"...
There is no addon to do that. You can block all scripts from a site using NoScript or YesScript. Or you can block a specific JS file using Adblock.
You cannot selectively block bits of JS that are embedded in the main page, except in rare occasions GM can sometimes work around it.
This sounds like trying to use an anvil to smash an ant. Or some other, better, complex-tool-for-simple-job analogy. I would suggest either setting your home page to a blank page, or opening new tabs with a new tab button or Ctrl+T.
I do not believe it is possible, just looking around a bit. The focus actually comes from the onload attribute of the body element:
onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo27.png'"
As you can see, document.f.q.focus() is your issue. However, I can't get a GM script to run before that onload is executed. I'm not too experienced with that particular issue, though: any GM scripts I've written are novelties whose load order doesn't matter a great deal, so long as it's done after the page is loaded.
If you know how to make GM scripts run before an onload (on a very light webpage), then it's as simple as saying unsafeWindow.document.body.onload = null.
You cannot do this with Greasemonkey, because GM cannot manipulate chrome elements enough to set focus to the address bar.
You cannot do this with Adblock for the same reason, and because Adblock just stops external elements from loading.
None of the FF scripting add-ons could do this either, as far as I can tell.
You could write an extension/add-on to reset focus, but the real problem here is that the user is ignoring the tools in place for the job.
As Scott Cranfill said, use Ctrl T to open a new tab.
If a button is absolutely desired, Firefox already provides one. Do this:
In the Firefox menu, select View --> Toolbars --> Customize... .
Find the "New Tab" icon and drag it to your toolbar.
Click that icon, from now on, when you want a new blank tab.
Done!

Javascript: Alert user without using an alert box

I'm trying to find an elegant way to inform a user that s/he is about to be logged out and I know that most browsers will give you some indication that a hidden tab has an alert box open. I would like to duplicate this functionality without actually showing an alert box.
I have thought about forcing the tab/window to gain focus, but that is quite obtrusive and I hate it when websites do that to me, so I'm looking for something a little more subtle.
Any ideas?
Edit/Clarification: I already have a div that pops up if they are about to be logged out. My problem is that if they are on another tab, they won't be able to see that div, so I would like some way to notify the user that something important has happened on my tab so they go check it out and see the logout notice.
The favicon idea listed below is an excellent idea, any others?
Here's an interesting way that comes to mind. When its time to be logged out, change the website's favicon dynamically. Newer browsers should be ok with it.
Look here: Changing website favicon dynamically
Some techniques I've seen:
Some sort of sound that's played (I think it's done with Flash in the case I'm thinking of, but maybe it's possible with HTML5's audio tag)
Flashing/alternating favicon
Use JavaScript to change the page title tag every 2s or so
You could create a page that informs them they will be logged out in a certain amount of time with a button that would allow them to maintain their session. Or maybe you could use a lightbox modal popup window (example here).
Why not swap out a div styled how you want to change to let them know they will be logged out soon? Then, you can simply have it as a portion of your page with all the same style and formatting?
For example, your normal page has some sort of page element with visibility:block; and then before they will be logged out, you change that to visibility:none; and change your other element (in the same place) to have visibility:block;
Does this idea make sense? You have to be able to detect when this is happening with Javascript already to alert, so instead of altering you are just swapping out display elements.
I hope this is helpful,
-Brian J. Stinar-
it probably doesn't go with what you're after but a simple modal window is probably a good idea? i know it doesn't alert the user instantly, and they won't see it unless they switch back to that tab, but it's unobtrusive and i believe most users would prefer not to have something rammed in their face!
If this notification is to be triggered by a user clicking "log out" or the likes then they will see it and it won't be as intrusive as forcing them to stop what they are doing and close the alert box.
And if it's due to time out or something similar then the user isn't overly concedrned or they would still be on that tab.
I think that this serves the best purpose in terms of usability as people don't want to be hassled or have their workflow broken by an alert shoved at them! A perfect example is Microsoft TFS which would constantly throw alerts at you when you got signed out, which got really frustrating, really quickly
so my answer is think how the user would like to be notified in the least obtrusive way :-)

What percentage of followed hyperlinks might have their "onclick" JavaScript ignored?

As far as I know all popular web browsers execute the onclick attribute of an anchor link first, then follow the path specified by the href attribute.
The problem here is that the onclick attribute only gets called when clicking with the left mousebutton (without pressing ctrl or shift for a new tab or window) or when pressing enter on your keyboard while the tabIndex is set to the link you want to follow.
But there are many other ways of following a link than just those two.
Ctrl + click
shift + click
rightmousebutton + open
rightmousebutton + new tab
drag & drop link to address bar
and so on...
My client uses onclick for conversion statistics. Which seems heavily unreliable.
My question:
What percentage of hyperlinks are being followed without activating their onclick attribute?
All estimates are highly appreciated. I'm completely lost; I think it can be any number...
Aside from those of us who habitually middle-click/ctrl-click to open links in new tabs, there's another major cause of onClick failure: NoScript and similar plugins which allow javascript to run only when it comes from whitelisted sites. If your domain isn't on my whitelist, then your onClick won't run, no matter how I trigger the link.
If you want reliable stats on which pages people are visiting, there's only one bulletproof source for that: The web server logs.
The logs are probably also your best bet for tracking how people move throughout the site, but they're not entirely reliable, as some privacy-paranoid users will falsify their referer headers or just not send them at all, but I expect that to be far less common than disabling javascript.
It depends. If the audience is more technically inclined, I'd assume that using alternative ways of following a link would be more common. All in all, though, even a lot of technical people seem to be unaware of things like clicking the middle mouse button to open or close a tab. If that's the case with technical people, I wouldn't be surprised if almost no one in the general audience used it.
The links are all exit-links. I was thinking of a PHP script that does the counting of clicks.
Though this is not the subject of your question, you might want to have a look at Google Analytics then. They are The Master in tracking you. They track right-clicks (even when not actually selecting "open in new window" after that, which they obviously cannot know), which will yield Ajax calls to http://www.google.com/url.
To see Analytics in action: with Adblock and the like disabled, search something on google.com and open up Live HTTP Headers in Firefox (or your Firebug Net tab in Firefox, or WebKit's Resources pane in Safari or Chrome, sorted by time). Next, click, right-click, shift-click or control-click any search result (preferably a result that does not require a lot of HTTP traffic by itself, or is in your browser's cache).
the onclick attribute only gets called when clicking with the left
mousebutton (without pressing ctrl or shift for a new tab or window)
Not entirely true. I created a quick test at JS Bin, to show that modifier keys do not affect the onclick event. (For right-click, one should use the oncontextmenu event.)
What are you doing in your onclick handler that you are worried about not working? e.g. if you have a regular link to a page... and the onclick just opens that same page in a pre-sized popup for user convenience in a web application... then there's likely no issue (e.g. CTRL+Click) still opens the page, it just gets opened in a new tab)
If you are just trying to "log" every click in the site/application for tracking purposes then maybe you can hook into the onmousedown/up or focus/blur events instead/also.

Categories

Resources