Clipboard access using Javascript - sans Flash?

Question

Is there a reliable way to access the client machine's clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use Flash?

My primary target is IE8, but would like to support FF and Chrome also.

I have seen the technique to do this using Flash, but am looking for a pure js route:
Clipboard access using Flash

score 11 · Accepted Answer · answered Nov 09 '09 at 15:24

11

Since this is a big security risk, all browsers that care about safety don't allow JS to access the clipboard.

The main reason is that many people put their passwords into a text file and then use cut&paste to login. Crackers could then collect the password (and possibly other private information like the word document which you just copied) from the clipboard by cracking a popular site and installing some JS that sends them the content of the clipboard.

Which is why I have flash disabled all the time.

answered Nov 09 '09 at 15:24

Aaron Digulla

321,842
108
597
820

2

You know that Flash >= 10 (actually, I think it's really the latest version of 9, but whatever) restricts all clipboard access to actions which involve the user -- unless you *DIRECTLY* press a button or press a key (while the swf is active), it you're completely safe. – cwallenpoole Nov 09 '09 at 21:01
3

Which is why crackers put the flash in front of something on the page which looks like a link but is in fact text just styled that way. When the users click on the "link", they activate the flash. – Aaron Digulla Nov 10 '09 at 08:04
I'm just staying up to date with the latest scams. Clickjacking is already one year old (http://searchsecurity.techtarget.com/news/article/0,289142,sid14_gci1333899,00.html). – Aaron Digulla Nov 18 '09 at 08:25
2

would be convenient to allow clipboard writing without reading, since 90% of websites only want links to be easier to copy to clipboard. – Asaf Jan 03 '13 at 10:47

score 3 · Answer 2 · answered Nov 09 '09 at 15:01

3

No, not in FF and Chrome. It works in IE (not sure about 7 and 8, but definitively 6), and from Flash. That is why Flash is always used.

answered Nov 09 '09 at 15:01

Marius

57,995
32
132
151

score 2 · Answer 3 · answered Nov 09 '09 at 15:00

2

Forget pure JS.

There is no standard API for accessing the clipboard, and few browsers implement a propriety method.

Flash is the 'standard' method.

answered Nov 09 '09 at 15:00

Quentin

914,110
126
1,211
1,335

score 2 · Answer 4 · edited May 23 '17 at 10:32

You're looking for the execCommand function, at least the best I can tell. Here are some resources: Insert text in Javascript contenteditable div http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/execCommandisappliedto.htm

Unfortunately, this runs into the same security loophole that Flash sealed in Flash 9. Since people were spamming the clipboard, the clipboard is now only accessible through direct user interaction, and honestly, it is better that way. And I'll wager that most browsers have similar (if not stricter policies).

score 2 · Answer 5 · answered Sep 26 '11 at 13:21

In IE, to do this is pretty painless. For Firefox, you need to update users.js and/or prefs.js (you can google for Clipboard access in Firefox). For Chrome, you need to write an extension.

In you extension background_page, have a place holder (an IFrame) in your webpage, have buttons or links like 'cut', 'copy' and 'paste'. also have a hidden iframe paste_holder on your page to get back the text read by the background_page of your extension. In your extension's manifest file, have code like below:

manifest.json

"background_page": "mypaste_helper.html",
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["mypaste_helper.js"],
        "all_frames": true
    }
],
"permissions": [
    "clipboardRead",
    "clipboardWrite",
    "tabs"  
]

mypaste_helper.js

get references to your cut, copy and copy buttons on the page

cutButton.addEventListener("click", function() 
{
            get selected content using window.getSelection()
            pass that text to handleCut function in mypaste_helper.html     
}, false);      
copyButton.addEventListener("click", function() 
{
            get selected content using window.getSelection()
            pass that text to handleCopy function in mypaste_helper.html 
}, false);      
pasteButton.addEventListener("click", function() 
{
            get content from handlePaste function in mypaste_helper.html 
}, false);

in the callback function

get the contents sent by background_page function set innerHTML of paste_holder frame's document.body with received text.

mypaste_helper.html

handleCopy and handleCut are identical

get reference to your iframe document.body as clipboardholder
set innerHTML of the clipboardholder.contentDocument.body with the data passed by mypaste_helper.js
capture selection through window.getSelection()
selection.selectAllChildren(clipboardholder);
document.execCommand('copy')
read contents of the clipboardholder
pass the text back to callback in mypaste_helper.js

handlePaste

get reference to your iframe document.body as clipboardholder
you may want to clear the contents of clipboardholder.contentDocument.body
capture selection through window.getSelection()
selection.selectAllChildren(clipboardholder);
document.execCommand('paste')
read contents of the clipboardholder
pass the text back to callback in mypaste_helper.js

But is there a way to get external (out of browser) clipboard data? — Shimmy Weitzhandler, Mar 15 '12 at 01:31

score 1 · Answer 6 · answered Jun 25 '10 at 02:53

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp implements the ZeroClipboard flash object correctly and is cross browser. It also discusses the potential problems with ZeroClipboard and possible work-arounds. Also compatible with Flash 10+.

score 0 · Answer 7 · answered Nov 05 '14 at 13:29

It was clear this issue, but I still have doubts because there is the option to do this in javascript and another thing is for windows forms it is totally possible to do using the command

Clipboard.Clear()

Ref: System.Windows.Forms

Any malicious software that can do well.

score 0 · Answer 8 · answered Sep 21 '11 at 08:42

0

Here's a pure JS implementation that lets you paste image data which works in Google Chrome: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

answered Sep 21 '11 at 08:42

Daniel X Moore

14,637
17
80
92

Clipboard access using Javascript - sans Flash?

8 Answers8

manifest.json

mypaste_helper.js

in the callback function

mypaste_helper.html

Linked