Difference between typing and pasteing in a field - javascript

If I use xss, what's the difference between typing in ALERT('DSSA');, or just paste it to a search textfield? In a site, typing works, and makes the alert, but if I just paste it, than it doesn't. To prevent the question, I don't want to hack any site, I'm just interested in network security.
thanks for the answer

This will be because the programmer who built the website is lazy and hasn't listened for the onpaste event.
Typing fires the onkeydown, onkeypress and onkeyup events, and are the standard events to consider when watching for user input.
It would seem those are the only events the programmer has listened for (which makes this irrelevant of network security).
If this is not the case, then he'll be using two different event handlers for the events; one which escapes the input, and in the other he's forgotten.

I may not have understood the question properly.
Typing triggers keyUp, keyDown and keyPress events on the element. If the codes are programmed to capture them only, then only those events will be captured.
Pasting can be done using keyboards, mouse and browser options. So this depends on which events you are listening too. There is a separate event called onpaste which will ease everything.
What I mean is, lets say my code is written to capture the pasting my pressing "Ctrl" + "v" only, but if mouse and browser options are used to paste on the
element, then it is configured to capture mouse events also, it cannot
be captured.

Related

javascript keydown event does not work when the focus is a gmail writing input

I'm trying to make a chrome extension with javascript which triggers an action on key presses when I'm typing an email in gmail.
I manage to make the extension, which performs a console log correctly when I press the keys on any page.
My problem comes when capturing the event when I am typing in a gmail email writing input, it doesn't capture the event.
The body text box is a contenteditable div, and the from and subject text boxes are inputs. I don't know if this helps
The JS code I inject is as follows:
document.addEventListener('keydown', function (e){
console.log('push')
});
The code works in the search input of the page but not in the write input of the email.
Does anyone know why?
Using document.addEventListener is probably not the right way to go when adding event listeners.
There's a 90% chance that the keydown event is being directly handled by the contenteditable div and the input elements which prevents it from being handled by the document itself. You may need to attach the event listener directly to the contenteditable div and the input elements (referencing them in some way or another - you can take a look at how MailTrack or some Gmail extension to see how they do it), rather than the document.
You can try opening up inspect element and seeing if the classes or IDs change, and make a decision on how to hook them up to your code using those; and attaching the appropriate event listener to them.
You can also try using event delegation to attach the appropriate event listener to a parent element of the input and contenteditable div; then check the event target to see if it is the element you are interested in - but I won't get into that since it's probably not the best approach to this type of situation.
It's entirely possible - since if another chrome extension can do it, yours can probably do it as well. It just comes down to information collection and the appropriate research.

What's the difference between keyup, keydown, keypress and input events?

I have been trying to understand JavaScript keypress, keydown, keyup and input events. But I found them quite confusing. Could someone please point out the exact differences? Also I would like to know do all of them get triggered when the user paste a piece of text.
According to jQuery docs:
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
The keyup event is sent to an element when the user releases a key on the keyboard.
The oninput event it's an event that triggers whenever the input changes.
However the input event is not supported in IE version below 9. In that case, you could use proprietary event onpropertychange, it does the same as oninput.
But in your case, you could use the paste and change event together. You should use change too because paste only happens on browsers that support it on an explicit paste.
Since this is being treated as the definitive JS answer (rather than just a jQuery answer) here's a current standard JavaScript answer with MDN references:
input event - fired when the content changes. This includes mouse pastes and non-keyboard input.
keyup event - fired when a key is released. This includes shift key, control key, and other keys that don't change the value of input elements.
Docs for all events

GWT chinese mouse select event

I have a problem with catching event when user selects chinese symbols from drop-down that appears below textbox using mouse. If I select it using numbers or using spacebar, the onKeyUp event is triggered. But when I select right symbols from dropdown, it doesn't trigger any event.
GWT surfaces events that the browser dispatches, it doesn't do anything fancy for keyboard events (this is too much of a mess; higher-level events could be possible, but definitely not trying to normalize browser behaviors by synthesizing or suppressing low-level events). That means that if you don't receive a KeyUpEvent here, that's because the browser doesn't dispatches one.
See http://www.w3.org/TR/uievents/#events-composition-event-key-events which says that:
During the composition session, all keydown and keyup events MAY be suppressed.
Unfortunately, GWT doesn't expose the more recent and higher-level input event: https://developer.mozilla.org/en-US/docs/Web/Events/input (note that it still wouldn't work in old IEs, basic support only comes in IE9 according to the compatibility table at the end of that page)

Synchronizing identical html forms

I'd like to have two (or even more) identical html forms on my website.
For example, one - at the top, and another - at the bottom of the page.
What i want is for them to have exactly the same content at any given time. If user changes a value in one of them, all the rest are updated.
Is there a better way to synchronize then javascript onchange/onkeyup events?
onchange fires only after element loses focus.
onkeyup is not perfect too. It wastes a lot of cpu on long text copying and won't fire if element lost focus between onkeydown and onkeyup events.
Update: I just learned that HTML5 has a more appropriate event for this, oninput, but of course it doesn't work in older browsers. oninput will detect any kind of text change, including Paste, Cut, and Delete from the right-click menu. So the best option may be to check if the browser supports oninput (e.g. by using the function recommended here), falling back to the below method if not. On older versions of IE, onpropertychange can be used to simulate oninput.
I decided to change my answer, based on how KnockoutJS accomplishes this. From this page in the Knockout docs:
"afterkeydown" - updates your view model as soon as the user begins typing a
character. This works by catching the browser’s keydown event and handling the event
asynchronously.
Of these options, "afterkeydown" is the best choice if you want to keep your view model
updated in real-time.
It accomplishes the asynchronous behavior by using setTimeout with a time value of zero. Other than that, it appears to be just like a regular keydown event handler.
Here's a simple example, using jQuery, which I believe behaves equivalently to Knockout's "afterkeydown" event:
$('#email').keydown(function() {
setTimeout( $.proxy(handler, this), 0);
});
function handler() {
console.log( this.value );
}
Note:
This will not catch right-click paste events and drag-and-drop events. If you want to update the text on those events too, simply listen for them in the same manner as keydown, e.g.:
$('#email').on('keydown paste drop', function() {
setTimeout( $.proxy(handler, this), 0);
});
Like keydown, paste and drop also need the setTimeout in order to update with the latest value of the text.
Original answer:
onkeyup is probably the way to go, but you raise a good point about it not firing if the element loses focus between keydown and keyup. Based on this answer, I'm pretty sure the solution would be to listen for the keyup event on a container element (or on the body, although in this case it would probably make the most sense to bind it to the <form> element).
As to CPU usage on paste, you could try canceling the event unless a certain amount of time has passed (say 50 ms)...hopefully that will be sufficient. If not, you could look at how some of the popular 2-way data-binding frameworks handle this...most of the ones I've seen use onkeyup.

How Google detects input in search box to display instant results?

How is Google detecting user input? I looked around and the text field does not have the onkeyup or onchange events.
Is there any other way to detect user input in a text field?
it does have keyup and keydown listeners, but they are assigned at runtime, via addEventListener("keyup", ...). Use your browser's DOM inspector to select the input element, and then drill into the event listeners currently assigned (in webkit's inspector, that's under "Event Listeners" at the bottom of the right-hand pane) -- you'll see keyup, keydown, and several others.
It does have event listeners. Using the inspect element on chrome you can clearly see the listeners - highlighted in the screen shot below.
The same principle as autocomplete:
http://www.javascript-examples.com/autocomplete-demo/
I would say an onblur onkeyup/down event that triggers a custom event that waits for a pause or space, then sends the data, then handles the return.
After playing with it for a while here is what I came up with at jsfiddle:
http://jsfiddle.net/fauxtrot/Ejqyb/

Categories