English 中文(简体)
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

最佳回答

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.

问题回答

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.

Forget pure JS.

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

Flash is the standard method.

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

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

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

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/

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.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

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

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签