How does Trello access the user's clipboard? | Hacker News Reader

How does Trello access the user's clipboard?

stackoverflow.com

183 pointsgedrap48 comments

  @DavidMurdoch you really gave the -1? I'm no fan of CoffeeScript either, but everyone should choose 
  the tool [s]he is most productive with. – Boldewyn Jul 9 at 5:49 
  
  `
  @Boldewyn, I did. My justifications for it were that a) The question is tagged JavaScript, and b) a down 
  vote on a question that was on its way to 100+ up votes in less than a day isn't going to put a dent in anyone's 
  day. I even thought about flagging it as off-topic, but figured that was going a little bit too far. :-) 
  – David Murdoch Jul 9 at 13:49 
  
  `
  The question was tagged Javascript, but the question is, "How does Trello do this". Seriously, you think 
  it's appropriate to penalize the answerer for the fact that Trello didn't actually do it directly in Javascript?
   – Elchonon Edelson Jul 9 at 15:34
  
  `
  @DavidMurdoch Would you have preferred the compiled JavaScript?! – Mario Jul 9 at 17:35 
   
  `
  @ElchononEdelson, yes, I realized this (the question is also tagged Trello). While its appropriateness 
  is debatable, the answerer is the developer that wrote the code in CoffeeScript in the first place - and *that* 
  may very well warrant a down vote in-and-of itself. (I'm kidding, mostly). – David Murdoch Jul 9 at 21:11 
  
  `
  @Mario, yes. Although, I did compile it to JavaScript myself; it was equally hideous. – David Murdoch Jul 9 at 
  21:12 
  
  `
  I don't think the appropriateness is debatable. I think the appropriateness is thoroughly and completely 
  absent. – Elchonon Edelson Jul 9 at 21:22 
  
  `
  Hm, well then maybe it is just my visceral loathing for CoffeeScript that made me do it. – David Murdoch Jul 9 
  at 21:52
  
  `
  So, in conclusion: haters gonna hate? – BoltClock♦ Jul 11 at 3:29

... Welcome to Stack Overflow.

It'd be even more Stack Overflow if the question got immediately closed for not fitting the format of the site.

Seriously I absolutely hate asking questions on SO and some of their more active sub-sites. I feel like I am back to the 90s forum with admins abusing their power for the most mundane reasons, the only difference is that they are not 12 year olds anymore.

I hear you. FreeNode IRC has been pretty good to me, although occasionally you run into the angry God-complexed sysadmin who ruins your day, and reminds you why people sometimes really hate interacting with IT personnel.

Did you even read the comments? And there is even a mod there in the comments saying "haters gonna hate" in support of the answer. Do you have this comment saved in your system and paste it anywhere you want to complain about SO?

It's so disappointing how every question worth reading gets flagged, downvoted, and closed for the most random, pedantic bullshit reasons.

To be fair this answer currently has 591 upvotes and 1 downvote, and the question has 0 close votes.

It's not exactly in danger of disappearing because of the obnoxious pedantry of one user.

So you don't think this question is worth reading?

I assume SO analyzes their logs to determine how many google searches take people to close, versus open questions. I wonder what the results are.

It might be fun to create a Chrome extension that created such a tally.

Seems to me it reflects quite well on Stack Overflow that every other commenter is disagreeing with that one obnoxious user.

What's up with all the unrelated hate towards SO in the other comments?

Yeah, i don't like when interesting questions get closed for being off-topic either; but it's not what happened in this case. It's just a SO user who gets mad when someone responds in CoffeeScript a question with a JavaScript tag (or when a question tagged as JS is really a CS question). I'm pretty sure i recall him doing something similar (and using the same kind of "because it's ugly!" arguments) in at least another SO question.

I'm sure this sort of thing never happens anywhere else on the Internet.

Certainly not on Hacker News, where people always vote based on how something relates to the discussion and not their own personal biases.

(Copy-pasting my answer from the same Stackoverflow thread)

I actually built a Chrome extension - https://chrome.google.com/webstore/search/copy%20link%20addr... that does exactly this, and for all web pages. GitHub source https://github.com/dhruvvemula/copylinkaddress/blob/master/c...

I find three bugs with Trello's approach, which I know because I've faced them myself :)

The copy doesn't work in these scenarios:

1. If you already have Ctrl pressed and then hover a link and hit C, the copy doesn't work.

2. If your cursor is in some other text field in the page, the copy doesn't work.

3. If your cursor is in the address bar, the copy doesn't work.

I solved #1 by always having a hidden span, rather than creating one when user hits Ctrl/Cmd.

I solved #2 by temporarily clearing the zero-length selection, saving caret position, doing the copy and restoring caret position.

I haven't found a fix for #3 yet :) (For info, check the open issue in my Github project - https://github.com/dhruvvemula/copylinkaddress/issues/1).

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?

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

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.

Well, yes, but at least you knew you copied something in this circumstance.

There are a bunch of web sites that use an annoying doodad from 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.

They append their spam to the end of the selection, but indexof length -1

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://...

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.

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.

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

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/ is the W3 draft for clipboard events.

> 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

> 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).as... provides IE-centric documentation.

> 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.

Okay, so for all intents and purposes it cannot be done programmatically without user assistance.

> 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.

You're right, I apologize.

> 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).as.... provides IE-centric documentation.

As I mentioned in a previous comment, I've seen nothing that suggest this event allows you to change the contents of what's copied to the clipboard before it happens. From what I can tell this is an notification that it has happened. The link you have provided does not indicate anything to the contrary.

I'm not ruling out that what you're saying, but I still haven't seen something that definitively shows it's possible. Looking at all the hacks and alternatives to make it as close to "click-to-copy" a possible strong suggests it's not.

Oh oops. I left out the link to the sample in my last post: http://jsfiddle.net/BE6bR/1

Try it out =)

I stand corrected! Firefox, Chrome and Safari had no issues with this. I could cmd-c without highlighting and it still copied.

I finally found something indicating browser-support for this.[0] I have to think it wasn't supported in earlier versions of certain browsers and that's why Trello decided not to go this route. I'm definitely going to play around with this. This is pretty darn cool, thanks for sticking with me. :)

0: http://www.quirksmode.org/dom/events/cutcopypaste.html

I haven't worked on clipboard stuff in a web app yet, and am finding this thread confusing. If there are APIs for this, why are Trello resorting to a complex and probably rather brittle hack? What does the hack give them that the APIs don't?

I'm not sure, but several guesses: 1) The clipboard APIs aren't well known. 2) You can't normally set HTML content in the clipboard with IE since it only supports 'Text' and 'URL' types (http://msdn.microsoft.com/en-us/library/ms536744(v=vs.85).as...). 3) The IE interface (via window.clipboardData) might trigger an infobar. I didn't really test this though.

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.

Ah, yes, pulling clipboard data would be a definite security risk. I didn't think about it from that angle.

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-j...

Leave copying to the user. As an added benefit, you're not relying on browser hacks (IE only or otherwise) or flash.

I'm curious why you'd advise against the hidden textarea.

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".

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. :)

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

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

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?

I don't think normal web pages have access to the browser's clipboard. It's a security feature, I believe.

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/.

You can buy another question is should you? I find the way Trello gets in my way very ill advised.

Clever idea, someone should turn this trick into a library.

Weird does this work in Ubuntu using chrome?

It does yep, it doesn't on Firefox though.

It did work for me on FF/Ubuntu.

This was posted only a few weeks ago

Reply on news.ycombinator.com