5 ms·
Even that won't totally save you. While you can't do exactly this, you can sure get the fun experience of the user getting text they didn't expect in the clipbo
by Latty 7y ago
Even that won't totally save you. While you can't do exactly this, you can sure get the fun experience of the user getting text they didn't expect in the clipboard when copying without any JS at all.
Text is highlighted on the page based on the code order, not as it appears on-screen (at least in Firefox and Chrome). If you throw elements off-screen with some CSS, you can create a big disparity between what the user thinks they are selecting and what they get when they copy/paste.
e.g: https://jsfiddle.net/Lbc5gsjm/ https://jsfiddle.net/Lbc5gsjm/
Not quite as neat as you can't put it dynamically around exactly what you select, but my favourite example of where you could get pretty malicious with it is a “plain text” link that injects a suffix to the hostname when you copy it.
- zzo38computer 7y agoYes, that is another problem, although it involves CSS. I suggested before to have a ARIA view, which would cause it to use ARIA properties rather than CSS to decide the rendering. I have not thought of your example though, but it is a feature I would like to have. (ARIA view would do other things too.)
- chiefsucker 7y agoThis works when you manually select the text, but it fails when you want to select by double-/triple-clicking. In this case the selection ends before the word “me”. It’s awkward how easily one can break a basic functionality like select & copy.
- Klathmon 7y agoThere are plenty of other tricks that can be used and won't break the "triple click". I just threw together [1] as an example (and in that one, even if you don't triple click but accidentally select past the end of the line, you are also getting unexpected text). Combine a few of those techniques with a fancy-looking text box that you are supposed to "click to copy" to get a command, and it becomes pretty easy to even write css-only "exploits" to put stuff in the clipboard! [1] https://jsfiddle.net/gxosfn83/1/ https://jsfiddle.net/gxosfn83/1/