6 ms·

Clever. They intercept the 'ctrl' keypress and make a textarea with the text they want to copy pre-selected, so if and when the user presses 'c', the browser wi

by gruseom 13y ago

Clever. They intercept the 'ctrl' keypress and make a textarea with the text they want to copy pre-selected, so if and when the user presses 'c', the browser will send the already-selected text to the clipboard. I assume this works even though the textarea is hidden? Is there really no better way to get at the clipboard from a web app?

arsenerei 13y ago
Not to my knowledge. Only flash gives you the ability to "click to copy." Javascript has no of copying text without user specifying the copy action. I don't know the justification, but it can be a security issue if your user isn't aware that they copied something. This is a really neat trick, and I needed it just yesterday, so I'll definitely be giving it a go today. Related to security issues, it reminds me of this issue: http://thejh.net/misc/website-terminal-copy-paste http://thejh.net/misc/website-terminal-copy-paste
- IneffablePigeon 13y ago
  I think the risk is that nefarious people might, for example, wait for you to copy a (legitimate) URL, then overwrite the clipboard with a slightly different URL, sending whoever follows what you just copied to somewhere else if you don't notice. Seems to me that this trick would be just as effective at doing that though.
  - arsenerei 13y ago
    Well, yes, but at least you knew you copied something in this circumstance.
  - duskwuff 13y ago
    There are a bunch of web sites that use an annoying doodad from http://tynt.com http://tynt.com to inject advertising into copy/pasted content. I'm not sure if Tynt is using the exact same trick or not; whatever the case, though, the technique is known.
    - dylz 13y ago
      They append their spam to the end of the selection, but indexof length -1
  - Mahn 13y ago
    Google is doing something very similar to this by the way. On their search results page, if you hover on any link the destination address shown on the bottom part of the browser looks like it'd take you directly there if you clicked, but when you do click, the href of the link is overwritten so the actual link takes you to google.com/?randomvariables&url=http://.. http://... This has always concerned me, not because Google is tracking this, but because this trick could do real harm in the hands of a malicious dev. I mean, who checks the source code of a page to make sure hrefs are not overwritten before clicking a link? PS: I know what you'll suggest, "browser with javascript off then!". No thanks. I spent ~1 year using NoScript on Firefox and I can say I ended up hating it with a passion. It cripples web browsing and makes it a really frustrating experience, and in 70% of the cases you are forced to allow Javascript on the page with its subsequent page reload.
- zetafunction 13y ago
  Why aren't the copy/cut/paste events be sufficient for this? There's no need to trigger a programmatic copy event in this context, since you're just modifying the default behavior of copy.
  - arsenerei 13y ago
    Is there a way to trigger the copy, cut, and paste events? I've never heard of any. I know that you can be alerted when the events have occurred. I also had a difficult time finding anything about oncopy. My only readable source indicates that it's not cross-browser in either case.[0] I also tested it. 0: http://help.dottoro.com/ljwexqxl.php http://help.dottoro.com/ljwexqxl.php
    - zetafunction 13y ago
      There is a way to trigger the events from JS via document.execCommand('copy'/'cut'/'paste'), but the default is to deny. However, if you just want to alter the behavior of ^C, you simply need to override the oncopy event--there's no need to trigger the event manually. To actually set clipboard data, IE uses window.clipboardData, while Firefox/Chrome/Safari all use event.clipboardData. For reference, http://www.w3.org/TR/clipboard-apis/ http://www.w3.org/TR/clipboard-apis/ is the W3 draft for clipboard events.
      - arsenerei 13y ago
        > There is a way to trigger the events from JS via document.execCommand('copy'/'cut'/'paste'), but the default is to deny. When you say, deny, does that mean the user must go to their browser settings and set it manually? If so, what bearing does that have on what we're discussing? As for setting the clipboard data, I have seen no way of setting that through the copy, paste or cut events. edit: fix some words
        zetafunction 13y ago
        > When you say, deny, to me the user must go to their browser settings and set it manually? AFAIK: Safari does not expose a setting for this (but I didn't look). Chrome uses Chrome app/extension permissions to control this setting. I'm not sure how Firefox does it. > If so, what bearing does that have on what we're discussing? You asked "Is there a way to trigger the copy, cut, and paste events?". You don't need to trigger them in this case since the browser automatically fires them when the user invokes the corresponding edit action. > As for setting the clipboard data, I have seen no way of setting that through the copy, paste or cut events. Here is a quick sample that works in everything except IE. I'm too impatient to figure out why it doesn't work in IE but http://msdn.microsoft.com/en-us/library/hh772145(v=vs.85).aspx http://msdn.microsoft.com/en-us/library/hh772145(v=vs.85).as... provides IE-centric documentation.
- nieve 13y ago
  I believe the security risk is primarily sniffing the clipboard continuously when you expose a tab (or in horrible implementations, have a tab open). Use a password manager that puts the password into the clipboard, flip past the hostile tab, the site now has one of your passwords. Copy a big chunk of text from a sensitive email or document, now they've got that as well. Secret urls, auth tokens in urls, private email addresses? Same. Putting something into your clipboard is kind of annoying and could be a small security risk, but pulling the contents out is much worse. If it's a site you don't visit often it would be limited exposure, but if someone manages to hack Soundcloud/Pandora or inject JS into them you're talking about a lot of illicitly acquired information. Most of it may be useless, but it's a sucker-bet to assume no-one will get hurt by it.
  - arsenerei 13y ago
    Ah, yes, pulling clipboard data would be a definite security risk. I didn't think about it from that angle.
eksith 13y ago
Afraid not. My suggestion, expanding on what they do, is to not to try to copy anything to the user's clipboard and instead highlight the content (I'd advise against the hidden textarea too though). On mobile devices especially, highlighting is still a bit of a pain with large amounts of text. http://stackoverflow.com/questions/11128130/select-text-in-javascript http://stackoverflow.com/questions/11128130/select-text-in-j... Leave copying to the user. As an added benefit, you're not relying on browser hacks (IE only or otherwise) or flash.
- arsenerei 13y ago
  I'm curious why you'd advise against the hidden textarea.
  - eksith 13y ago
    This is entirely subjective so feel free to disregard. I don't believe it's necessarily a good idea to introduce elements that aren't user accessible. In this case, it's an actionable (command only) element that's inaccessible directly; the same as a tooltip or popup that hasn't shown itself yet. However, even in the case of a tooltip or popup, they will eventually show themselves to the user. A completely hidden anything IMO introduces a layer of obfuscation to what's actually happening to the DOM and on the page. It's a bit "hackish".
    - arsenerei 13y ago
      I'm not sure if you mean user accessible in terms of User Accessibility or just a typical user having access. I think we're talking about UA, it wouldn't apply in this case, because they would be using a screen reader and using its features to find and copy the URI (rather than by hovering). In the case of a typical user, I think it does what they want, so it doesn't go against desire and ultimately enhances UX. It's definitely hackish, though. :)
prezjordan 13y ago
How does the browser send that selected text to the clipboard?
Tloewald 13y ago
Actually yes. You can intercept copy and paste events and do the necessary stuff then, rather than do it beforehand.
- gruseom 13y ago
  Why don't they do that, then? There must be some reason. I'm guessing it's that they want to override the content of what gets sent to the clipboard--is that correct?
- statictype 13y ago
  I don't think normal web pages have access to the browser's clipboard. It's a security feature, I believe.
  - zetafunction 13y ago
    Normal web pages can't trigger copy/cut/paste events. They can access the clipboard via the events (which are automatically fired when the corresponding action is invoked by the user) documented in http://dev.w3.org/2006/webapi/clipops/ http://dev.w3.org/2006/webapi/clipops/.
- gbog 13y ago
  You can buy another question is should you? I find the way Trello gets in my way very ill advised.

by gruseom 13y ago

arsenerei 13y ago

Not to my knowledge. Only flash gives you the ability to "click to copy." Javascript has no of copying text without user specifying the copy action. I don't know the justification, but it can be a security issue if your user isn't aware that they copied something. This is a really neat trick, and I needed it just yesterday, so I'll definitely be giving it a go today. Related to security issues, it reminds me of this issue: http://thejh.net/misc/website-terminal-copy-paste http://thejh.net/misc/website-terminal-copy-paste

IneffablePigeon 13y ago
I think the risk is that nefarious people might, for example, wait for you to copy a (legitimate) URL, then overwrite the clipboard with a slightly different URL, sending whoever follows what you just copied to somewhere else if you don't notice. Seems to me that this trick would be just as effective at doing that though.
- arsenerei 13y ago
  Well, yes, but at least you knew you copied something in this circumstance.
- duskwuff 13y ago
  There are a bunch of web sites that use an annoying doodad from http://tynt.com http://tynt.com to inject advertising into copy/pasted content. I'm not sure if Tynt is using the exact same trick or not; whatever the case, though, the technique is known.
  - dylz 13y ago
    They append their spam to the end of the selection, but indexof length -1
- Mahn 13y ago
  Google is doing something very similar to this by the way. On their search results page, if you hover on any link the destination address shown on the bottom part of the browser looks like it'd take you directly there if you clicked, but when you do click, the href of the link is overwritten so the actual link takes you to google.com/?randomvariables&url=http://.. http://... This has always concerned me, not because Google is tracking this, but because this trick could do real harm in the hands of a malicious dev. I mean, who checks the source code of a page to make sure hrefs are not overwritten before clicking a link? PS: I know what you'll suggest, "browser with javascript off then!". No thanks. I spent ~1 year using NoScript on Firefox and I can say I ended up hating it with a passion. It cripples web browsing and makes it a really frustrating experience, and in 70% of the cases you are forced to allow Javascript on the page with its subsequent page reload.
zetafunction 13y ago
Why aren't the copy/cut/paste events be sufficient for this? There's no need to trigger a programmatic copy event in this context, since you're just modifying the default behavior of copy.
- arsenerei 13y ago
  Is there a way to trigger the copy, cut, and paste events? I've never heard of any. I know that you can be alerted when the events have occurred. I also had a difficult time finding anything about oncopy. My only readable source indicates that it's not cross-browser in either case.[0] I also tested it. 0: http://help.dottoro.com/ljwexqxl.php http://help.dottoro.com/ljwexqxl.php
  - zetafunction 13y ago
    There is a way to trigger the events from JS via document.execCommand('copy'/'cut'/'paste'), but the default is to deny. However, if you just want to alter the behavior of ^C, you simply need to override the oncopy event--there's no need to trigger the event manually. To actually set clipboard data, IE uses window.clipboardData, while Firefox/Chrome/Safari all use event.clipboardData. For reference, http://www.w3.org/TR/clipboard-apis/ http://www.w3.org/TR/clipboard-apis/ is the W3 draft for clipboard events.
    - arsenerei 13y ago
      > There is a way to trigger the events from JS via document.execCommand('copy'/'cut'/'paste'), but the default is to deny. When you say, deny, does that mean the user must go to their browser settings and set it manually? If so, what bearing does that have on what we're discussing? As for setting the clipboard data, I have seen no way of setting that through the copy, paste or cut events. edit: fix some words
      - zetafunction 13y ago
        > When you say, deny, to me the user must go to their browser settings and set it manually? AFAIK: Safari does not expose a setting for this (but I didn't look). Chrome uses Chrome app/extension permissions to control this setting. I'm not sure how Firefox does it. > If so, what bearing does that have on what we're discussing? You asked "Is there a way to trigger the copy, cut, and paste events?". You don't need to trigger them in this case since the browser automatically fires them when the user invokes the corresponding edit action. > As for setting the clipboard data, I have seen no way of setting that through the copy, paste or cut events. Here is a quick sample that works in everything except IE. I'm too impatient to figure out why it doesn't work in IE but http://msdn.microsoft.com/en-us/library/hh772145(v=vs.85).aspx http://msdn.microsoft.com/en-us/library/hh772145(v=vs.85).as... provides IE-centric documentation.
nieve 13y ago
I believe the security risk is primarily sniffing the clipboard continuously when you expose a tab (or in horrible implementations, have a tab open). Use a password manager that puts the password into the clipboard, flip past the hostile tab, the site now has one of your passwords. Copy a big chunk of text from a sensitive email or document, now they've got that as well. Secret urls, auth tokens in urls, private email addresses? Same. Putting something into your clipboard is kind of annoying and could be a small security risk, but pulling the contents out is much worse. If it's a site you don't visit often it would be limited exposure, but if someone manages to hack Soundcloud/Pandora or inject JS into them you're talking about a lot of illicitly acquired information. Most of it may be useless, but it's a sucker-bet to assume no-one will get hurt by it.
- arsenerei 13y ago
  Ah, yes, pulling clipboard data would be a definite security risk. I didn't think about it from that angle.

eksith 13y ago

Afraid not. My suggestion, expanding on what they do, is to not to try to copy anything to the user's clipboard and instead highlight the content (I'd advise against the hidden textarea too though). On mobile devices especially, highlighting is still a bit of a pain with large amounts of text. http://stackoverflow.com/questions/11128130/select-text-in-javascript http://stackoverflow.com/questions/11128130/select-text-in-j... Leave copying to the user. As an added benefit, you're not relying on browser hacks (IE only or otherwise) or flash.

arsenerei 13y ago
I'm curious why you'd advise against the hidden textarea.
- eksith 13y ago
  This is entirely subjective so feel free to disregard. I don't believe it's necessarily a good idea to introduce elements that aren't user accessible. In this case, it's an actionable (command only) element that's inaccessible directly; the same as a tooltip or popup that hasn't shown itself yet. However, even in the case of a tooltip or popup, they will eventually show themselves to the user. A completely hidden anything IMO introduces a layer of obfuscation to what's actually happening to the DOM and on the page. It's a bit "hackish".
  - arsenerei 13y ago
    I'm not sure if you mean user accessible in terms of User Accessibility or just a typical user having access. I think we're talking about UA, it wouldn't apply in this case, because they would be using a screen reader and using its features to find and copy the URI (rather than by hovering). In the case of a typical user, I think it does what they want, so it doesn't go against desire and ultimately enhances UX. It's definitely hackish, though. :)

prezjordan 13y ago

How does the browser send that selected text to the clipboard?

Tloewald 13y ago

Actually yes. You can intercept copy and paste events and do the necessary stuff then, rather than do it beforehand.

gruseom 13y ago
Why don't they do that, then? There must be some reason. I'm guessing it's that they want to override the content of what gets sent to the clipboard--is that correct?
statictype 13y ago
I don't think normal web pages have access to the browser's clipboard. It's a security feature, I believe.
- zetafunction 13y ago
  Normal web pages can't trigger copy/cut/paste events. They can access the clipboard via the events (which are automatically fired when the corresponding action is invoked by the user) documented in http://dev.w3.org/2006/webapi/clipops/ http://dev.w3.org/2006/webapi/clipops/.
gbog 13y ago
You can buy another question is should you? I find the way Trello gets in my way very ill advised.