Clipboard access using Javascript - sans Flash?

问题:

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

回答1:

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.

回答2:

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.

回答3:

Forget pure JS.

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

Flash is the 'standard' method.

回答4:

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

回答5:

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

回答6:

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

回答7:

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/

回答8:

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.