Develop Reference

Finding out which keyboard generated a key event in javascript

Is there some way to determine which keyboard connected to a device sent a particular key event in JS? For example, a laptop with a USB keyboard will happily honour keypresses on both keyboards but I cannot seem to find a way for the browser to tell me which source a key event came from so I can filter based on that (e.g. for player 1/2 input filtering for a browser based game, keyboard vs. "virtual instrument" for a browser based composing tool, etc.)
I couldn't find anything in the key events specs on MDN that suggests this is possible, but I'll be more than happy to take on any creative hack that makes this work "despite" rather than "thanks to" the spec.
Someone did ask this question back in 2013, and while its answer suggests using the gamepad API as workaround, it's now 2018 and three years of changes to JS APIs means that this question is worth reasking, in order get an answer based on the current state of the browser.

I dont know if it is already possible, but if would try something like that, i would study the WebUSB Api:
https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web
https://wicg.github.io/webusb/
Not so easy, but seems possible

It's not possible at present.
WebUSB won't allow access to HID devices, and WebHID won't allow access to devices (including keyboards) that are already supported by high-level APIs.
I've started a topic at the WICG incubator: https://discourse.wicg.io/t/identify-which-of-multiple-keyboards-an-event-came-from/3416

Retrieve CTRL + F Keyword

I'm trying to understand how many users click CTRL+F with jquery script but I want to go deeper and understand which keyword they put into the browser box dialog (or which is highligthed in the web page).
I don't find anything right now.
Anyone can help me on which type of code I have to set up to bring this information? Is it possible or not?
Thanks!

You can't do that, or at least with client side JavaScript. That would be invading users privacy and possibly a security loop-hole in the browsers implementation and even if available it would be patched up very quickly.
Listening for keystrokes won't work as suggested in the comments because as soon as the user is typing into the find dialogue, the typing is happening outside of the pages focus.
Conculsion: There is no way to implement such functionality and interact with the browsers native functionality unless exposed by the browsers API.

Is there a correct/recommended way of detecting my UWP app I'm running on a Phone?

Trying out Windows Universal apps with JavaScript I noticed the WinJS.Utilities.isPhone property is no longer available, which makes sense since there would be no reason to ask for that at runtime.
I do want to know just for testing purposes if there is a proper way of detecting the device my app is running in.
EDIT: My question is NOT about detecting a mobile browser. I'm talking about about a brand new Universal Windows App for Window 10 that can run on phones, desktops, tablets, Xbox, HoloLEns, IoT devices et all. WinJS had a property that would tell me whether I was running on the phone or not. That property is now gone. Please don't close this question due to duplicate with "detecting mobile browser". That is NOT what I need.

Caveat: Any form of device detection is fragile due to the dynamic nature of hardware - a new device could come along tomorrow that breaks your app's logic. It is best to use these APIs only for telemetry / analytics rather than to trigger runtime behaviour.
More often than not, what you really want to know is some attribute of the device or the app that is not inherently tied to the device family (does this device support SystemTray API? Is there a keyboard attached? Is the window more than 500px wide? etc.).
That said, in Windows 10 you can query the DeviceFamily via AnalyticsInfo.VersionInfo.DeviceFamily and it will tell you things like "Mobile" or "Desktop" or "Xbox" etc. (where "Mobile" could be any class of device - phone, tablet, etc.). There is also a property DeviceForm that might be helpful, but again you can't really rely on it at runtime to deterministically say you're running on "a phone."
So basically the answer is "you can use these APIs for telemetry but don't hard-code any values into your app lest it break when a new device arrives on the market." At the very least, always make sure you handle the case where the returned value isn't one you know about a-priori.

You can also check out the following links
http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/
http://www.sitepoint.com/detect-mobile-devices-jquery/
and of course a similar post here on stackoverflow with a good answer
Detecting a mobile browser
And talking about Windows 10, extracting from Winjs Github repo, here is the answer.
https://github.com/winjs/winjs/issues/601#issuecomment-87137485

There are numerous JS libs to detect which platform/device is used.
I personally love using this lib: https://github.com/kaimallea/isMobile
You will then be able to detect mobile device in such a way:
isMobile.apple.tablet
isMobile.android.phone
and so on.
In case you have an idea to implement such lib yourself, keep in mind that it takes some efforts to keep it up-to-date, because ways of detecting mobile device may change over time.
In general, common way of detecting user device is checking query headers.
Keep in mind, though, that you can't absolutely rely on this information - headers may be easily modified. Google for User Agent for more info.
So "omitting auth process for users with phones" is extremely bad idea

Protect against browser extension injected Javascript code

Browsers allow extensions to inject code, manipulate the DOM, etc.
Over the years, I have noticed lots and various uncaught errors (using window.onerror) on a website (app) I am watching, generated by unknown browser extensions on Firefox, Chrome and Internet Explorer (all versions).
These errors didn't seem to be interrupting anything. Now I want to increase the security of this website, because it will start processing credit cards. I have seen with my own eyes malware/spyware infecting browsers with modified browser extensions (innocent browser extension, modified to report to attackers/script kiddies) working as keyloggers (using trivial onkey* event handlers, or just input.value checks).
Is there a way (meta tag, etc.) to inform a browser to disallow code injection or reading the DOM, standard or non-standard? The webpage is already SSL, yet this doesn't seem to matter (as in give a hint to the browser to activate stricter security for extensions).
.
Possible workarounds (kind of a stretch vs. a simple meta tag) suggested by others or off the top of my head:
Virtual keyboard for entering numbers + non textual inputs (aka img for digits)
remote desktop using Flash (someone suggested HTML5, yet that doesn't solve the browser extension listening on keyboard events; only Flash, Java, etc. can).
Very complex Javascript based protection (removes non white listed event listeners, in-memory input values along with inputs protected with actual asterix characters, etc.) (not feasible, unless it already exists)
Browser extension with the role of an antivirus or which could somehow protect a specific webpage (this is not feasible, maybe not even possible without creating a huge array of problems)
Edit: Google Chrome disables extensions in Incognito Mode, however, there is no standard way to detect or automatically enable Incognito Mode and so a permanent warning must be displayed.

Being able to disable someone's browser extension usually implies taking over the browser. I don't think it's possible. It would be a huge security risk. Your purpose maybe legit, but consider the scenario of webmasters programatically disabling addblockers for users in order to get them to view the advertisments.
In the end it's the user's responsability to make sure they have a clean OS when making online banking transactions. It's not the website's fault that the user is compromised
UPDATE
We should wrap things up.
Something like:
<meta name="disable-extension-feature" content="read-dom" />
or
<script type="text/javascript">
Browser.MakeExtension.MallwareLogger.to.not.read.that.user.types(true);
</script>
doesn't exist and i'm sure there won't be implemented in the near future.
Use any means necessary to best use the current up to date existing technologies and design your app as best as you can security wise. Don't waste your energy trying to cover for users who souldn't be making payments over the internet in the first place

UPDATE (2019-10-16): This isn't a "real" solution - meaning you should not rely on this as a security policy. Truth is, there is no "real" solution because malicious addons can hijack/spoof JavaScript in a way which in not detectable. The technique below was more of an exercise for me to figure out how to prevent simple key logging. You could expand on this technique to make it more difficult for hackers... but Vlad Balmos said it best in his answer below - Don't waste your energy trying to cover for users who souldn't be making payments over the internet in the first place.
You can get around the key logging by using a javascript prompt. I wrote a little test case (which ended up getting a little out of hand). This test case does the following:
Uses a prompt() to ask for the credit card number on focus.
Provides a failsafe when users check "prevent additional dialogs" or if the user is somehow able to type in the CC field
Periodically checks to make sure event handlers haven't been removed or spoofed and rebinds/ warns the user when necessary.
http://jsfiddle.net/ryanwheale/wQTtf/
prompt('Please enter your credit card number');
Tested in IE7+, Chrome, FF 3.6+, Android 2.3.5, iPad 2 (iOS 6.0)

Your question is interesting, and thoughtful (+1'd), however unfortunately the proposed security does not provide real security, thus no browser will ever implement it.
One of the core principle on browser/web/network security is to resist from the desire of implementing a bogus security feature. Web will be less secure with the feature than without!
Hear me out:
Everything execute on the client-side can be manipulated. Browsers are just another HTTP clients that talks to server; server should never ever trust the computation result, or checks done in front-end Javascript. If someone can simply bypass your "security" check code executed in a browser with a extension, they can surely fire the HTTP request directly to your server with curl to do that. At least, in a browser, skilled users can turn to Firebug or Web Inspector and bypass your script, just like what you do when you debug your website.
The <meta> tag stopping extensions from injection does make the website more robust, but not more secure. There are a thousand ways to write robust JavaScript than praying for not having an evil extension. Hide your global functions/objects being one of them, and perform environment sanity check being another. GMail checks for Firebug, for example. Many websites detects Ad block.
The <meta> tag does make sense in terms of privacy (again, not security). There should be a way to tell the browser that the information currently present in the DOM is sensitive (e.g. my bank balance) and should not be exposed to third parties. Yet, if an user uses OS from vender A, browser from vender B, extension from vender C without reading through it's source code to know exactly what they do, the user have already stated his trust to these venders. Your website will not be at fault here. Users who really cares about privacy will turn to their trusted OS and browser, and use another profile or private mode of the browser to check their sensitive information.
Conclusion: If you do all the input checks on sever-side (again), your website is secure enough that no <meta> tag can make it more secure. Well done!

I saw something similar being done many times, although the protection was directed in the other way: quite a few sites, when they offer sensitive information in a form of text would use a Flash widget to display the text (for example, e-mail addresses, which would be otherwise found by bots and spammed).
Flash applet may be configured to reject any code that comes from the HTML page, actually, unless you specifically expect this to be possible, it will not work out of the box. Flash also doesn't re-dispatch events to the browser, so if the keylogger works on the browser level, it won't be able to log the keys pressed. Certainly, Flash has its own disadvantages, but given all other options this seems the most feasible one. So, you don't need remote desktop via Flash, simple embedded applet will be just as good. Also, Flash alone can't be used to make a fully-functional remote desktop client, you'd be looking into NaCl or JavaFX, which would make this only usable by corporate users and only eventually by private users.
Other things to consider: write your own extension. Making Firefox extension is really easy + you could reuse a lot of your JavaScript code since it can also use JavaScript. I never wrote a Google Chrome or MSIE extension, but I would imagine it's not much more difficult. But you don't need to turn it into an antivirus extension. With the tools available, you could make it so no other extension can eavesdrop on what's going on inside your own extension. I'm not sure how friendly your audience will greet that, but if you are targeting corporate sector, then that audience is, in a way, a very good one, as they don't get to choose their tools... so you can just obligate them to use the extension.
Any more ideas? - well, this one is very straight-forward and efficient: have users open a pop-up window / separate tab and disable JavaScript in it :) I mean, you could decline to accept a credit card info if the JavaScript is enabled in the browser - obviously, it is very easy to check. This would require some mental effort from the users to find the setting, where they can disable it + they will be raging over a pop-up window... but almost certainly this will disable all code injection :)

This wont work, but i'll try something around document.createElement = function(){};
That should affect client side scripts (greasemonkey)
You can also try to submit the current DOM using an hidden input
myform.onsubmit=function(){myform.hiddeninput.value=document.body.innerHTML;} and check server side for unwanted DOM elements. I guess using a server side generated id/token on every element can help here (as injected DOM node will surely miss it)
=> page should look like
<html uniqueid="121234"> <body uniqueid="121234"><form uniqueid="121234"> ...
So finding un-tracked elements in the POST action should be easy (using xpath for example)
<?php
simplexml_load_string($_POST['currentdom'])->xpath("*:not(#uniqueid)") //style
Something around that for the DOM injection issue.
As for the keylogging part, i don't think you can do anything to prevent keylogger from a client side perspective (except using virtual keyboard & so), as there is no way to discern them from the browser internals. If you are paranoid, you should try a 100% canvas generated design (mimicking HTML element & interaction) as this might protect you (no DOM element to be bound to), but that would mean creating a browser in a browser.

And just that we all know we cannot explicitly block the extensions from our code,
one another way can be to find the list of event listeners attached to key fields like password, ssn and also events on body like keypress, keyup, keydown and verify whether the listener belongs to your code, if not just throw a flash message to disable addons.
And you can attach mutation events to your page and see if there are some new nodes being created / generated by a third party apart from your code.
ok its obvious that you will get into performance issues, but thats a trade off for your security.
any takers ?

Why isn't "right click" more used in web applications?

More and more applications are moving to the cloud: Google Docs for productivity apps, Meebo for instant messaging, Gmail for e-mails, Salesforce for CRM, etc.
Yet, I've noticed that, unlike their desktop counterparts, very few of those web apps leverage the mouse's "right click". Most of the time, when right clicking in a web app, I get the standard browser right click menu.
I don't believe it has to do with technical implementation since modifying the right click menu is quite trivial in Javascript.
Is there an actual reason that I am missing?
EDIT: The most popular reason seems to be that it's not what user expect. Another mentioned reason was that some users disable Javascript - which is a valid answer -, but in our case, we can discard this possibility since we're talking about applications that require Javascript regardless of the right click option.
Now, let me expand my question a bit:
Do you think it should stay that way (do you really find the default browser right click menu useful) ?
Would you like to see more application-specific right click menus where they could improve the user interface ?

Most users expect the right-click menu to bring up the browser context menu, so doing it to bring up an app-specific menu is not something they would try.

Mac don't have a "right mouse button", likewise with a lot of touch screen phones etc.
Even on a windows application most normal users (not programmers or power users) don’t think to right clicking when they wish to do something, if they have not learned it off by heart to do the given task they wish to do.
(Also right clicking on most web pages brings up a menu that a normal user does not understand, so they don’t try it more then once.)
So you always have to provide another way of doing the operation anyway.

I believe a very valid approach to web applications is to still keep all the browser features enabled, such as back button, opening things in new tabs, bookmarking, changing font-sizes, and so on.
The browser's right-click context menu is something that I do not want to have taken away by an app.
Now, when you start moving the web app out of the browser into its own window (turning it into a dedicated application, such as Fluid does, and I believe Chrome OS will), without URL bar and back button, then we can talk about the context-menu.

It is not how people are used to work in their browser, you shouldn't change default behavior. Users aren't expecting something to happen when they rightclick.

Just for completeness: Opera has no oncontextmenu and no simple possibility to suppress the context menu on right click.

Giving javascript control over right-clicks gives you something like this: http://periodic.lanl.gov/elements/24.html. I really love this website, but its attempts to keep me from copying text or images (whatever it's trying to do) seriously interfere with my web usage patterns. I always open things in other tabs. I always the right click menu to access the "back" command.
It also irritates me to no end when some web site has a flash animation somewhere that steals my control key (so I can no longer Ctrl+Tab to flip to another tab.
My bottom line: web applications can't supersede the local computer's built in commands. If a web application starts taking over control keys, right clicks, etc., it has crossed the line between local and remote applications. That is a very important line to keep crystal clear.

As others have stated, this is due to history and what users are used to. But I guess this will be changing eventually, as web applications gain more and more importance; currently web apps are "web pages" in a "web browser" app, which is quite weird, when you think about it. It's not the web browser that's the interesting thing any more, it's the web app. Why should it run inside something called a "browser"? At least it shouldn't be that prominent to the user, even if it may make sense technically.
Actually we're seeing this with Google Chrome. It's definitely way more minimalistic than anything that came before. It's almost a "plain window to the Web".

Right click is an expert shortcut both in desktop apps and in the browser. Expert love it, while non-experts ignore it or use it only by rote for specific situations without really understanding it (they probably only use it at all because some expert user told them to). That’s okay. There's nothing wrong with providing something for experts only, either for a thick client or a web app. So, of course, web apps would be better if they included application-specific right click menus. They would also be better if they included accelerator keys for their commands, mnemonics for their pulldown menus, double-click for default actions, and drag and drop for selection, copying, and moving, while we’re on the subject of supporting experts.
Let’s be honest: The reason we don’t do these things for experts is because we don’t want to be bothered with the extra work, not out of some concern about confusing users with the unexpected. And that’s a valid point: a typical web app is used less than a desktop app. “Expert” web app users are thus rarer –few use the web app enough to discover and use the expert features. So why devote resources to something to benefit so few users?
Nonetheless, I want to encourage designers to have application-specific right click menus in their web apps. It is necessary if you want your app to be as usable as a desktop equivalent. If you do have application-specific right click menus, follow these rules:
All right-click menu commands should be available through a separate means, such as a sidebar menu. With right-click being an expert shortcut, you need to provide non-experts access to the same functionality in a way they’re used to. This rule is a standard (e.g., MS Windows), despite the fact that browsers (e.g., MS Internet Explorer) blatantly violate it. This rule also addresses the concern of users who disable Javascript.
Do not remove browser right-click commands that are still relevant. The user should still be able do things like save images on a page, copy a block of text, and open a link in a new tab. In fact, you should try to preserve the order of the browser commands as much as sensible. In general, follow the standards for menu item organization and order. This addresses the concern of the right-click menu being unexpected: As long as the same commands are there in pretty much the same order, it’s no cost to the user who is used to right-clicking for the browser commands.
Use right-click menus consistently. Everything that can have application-specific commands should have those commands available by right-click. If users have to start guessing what does and doesn’t have a right-click menu, they’re just going to give up on it. On the other hand, if they discover it for one item, it’ll encourage them to try it elsewhere, and you want to reward that.
Encourage right-clicking by showing it used for application specific commands in your advertisements, demos, and documentation. You may also want to explicitly show drop-down arrows on your pages (maybe just on mouse-over) wherever app-specific right-click is available. Some expert users will discover your application-specific commands anyway because they right-click for browser commands, but in many situations, the browser right-click commands are so unhelpful even experts don’t right click, so you may have to “push” it a bit.

It's not what users expect.
It's also not particularly "discoverable": like old-school Flash web sites where you had to roll your mouse over a graphic to get the site to do something, right-clicking is not necessarily intuitive.

You shouldn't fiddle with the right click because of a a little thing we call Best Practices! Don't take away my rights as a user to control my experience! I want my right click to do what right clicks do!
The best practice is to make this sort of thing optional to the user. If you want to modify this behavior, make it something users can control in their profile or in the application settings.
For example:
(click to enable)
[ ] Use super special awesome right-click menu

Also, because some people may not have a two-button mouse (I'm looking at you, Apple users).

It is due to a inconsistency between the concept of browsing (which is browser centric) and the use of a web-application (which is application centric, the browser being only the renderer). The right click button would make sense in the second case, but as the web is made for browsing resources, this introduces an ambiguity it will probably never be solved.
Kind of interesting, the fact that the most touted deficiency in macs is the single button mouse, and then the most used interface in the world, the web, is single-button centric.

Personally, the only time I would do it is if I wrote an app which ran inside a plug-in which emulated some sort of editor. Silverlight has this ability now, but I would use it sparingly.

As i read in your forst anwser this is true it would be in the context menu it might mess with some things but as i have madde a btoolbar thta floats for my site to do anything you can use keyboard shortcuts so i see a mild and doom future for right click at all i see toolbars everywhree on websites today

I see two reasons. First of all, people might have javascript turned off, today that might not be the biggest issue of all but it's been following developers since the dawn of web-dev. Which brings us to the second reason, it's not what the users expect.
If you were to talk to someone about usability on the web and you had "hidden" features which were only made visible on right-click(browser context menu popup), this would probably be counted as bad design just because most users aren't use to the idea that the web is evolving into something more than just links and left-clicks(navigation clicking).