javascript - Copy to clipboard as plain text - Stack Overflow

admin管理员组

文章数量:1200756

I'm using this code in background.js in a Chrome extension to copy text to the user's clipboard:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (requestmand == "copy") {
            executeCopy(request.text);
            sendResponse({farewell: "copy request received"});
        }
    }
);

function executeCopy(text){
    var copyDiv = document.createElement('div');
    copyDiv.contentEditable = true;
    document.body.appendChild(copyDiv);
    copyDiv.innerHTML = text;
    copyDiv.unselectable = "off";
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
    document.body.removeChild(copyDiv);
}

It copies the text with formatting. How can I copy the text in plain text with no formatting?

I'm using this code in background.js in a Chrome extension to copy text to the user's clipboard:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.command == "copy") {
            executeCopy(request.text);
            sendResponse({farewell: "copy request received"});
        }
    }
);

function executeCopy(text){
    var copyDiv = document.createElement('div');
    copyDiv.contentEditable = true;
    document.body.appendChild(copyDiv);
    copyDiv.innerHTML = text;
    copyDiv.unselectable = "off";
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
    document.body.removeChild(copyDiv);
}

It copies the text with formatting. How can I copy the text in plain text with no formatting?

• javascript
• google-chrome
• text
• google-chrome-extension
• copy-paste

Share Improve this question Follow asked Aug 2, 2014 at 21:05 Joe MorninJoe Mornin 9,1341818 gold badges6262 silver badges8585 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22

Your question's code contains a common security issue known as XSS. Because you take untrusted input and assign it to .innerHTML, you're allowing attackers to insert arbitrary HTML in the context of your document.

Fortunately, attackers cannot run scripts in the context of your extension because the extension's default Content security policy forbid inline scripts. This CSP is enforced in Chrome extensions exactly because of situations like this, to prevent XSS vulnerabilities.

The correct way to convert HTML to text is via the DOMParser API. The following two functions show how to copy text as text, or for your case HTML as text:

// Copy text as text
function executeCopy(text) {
    var input = document.createElement('textarea');
    document.body.appendChild(input);
    input.value = text;
    input.focus();
    input.select();
    document.execCommand('Copy');
    input.remove();
}

// Copy HTML as text (without HTML tags)
function executeCopy2(html) {
    var doc = new DOMParser().parseFromString(html, 'text/html');
    var text = doc.body.textContent;
    return executeCopy(text);
}

Note that .textContent completely ignores HTML tags. If you want to interpret <br>s as line breaks, use the non-standard (but supported in Chrome) .innerText property instead of .textContent.

Here are two of the many examples of how XSS could be abused using the executeCopy function from your question:

// This does not only copy "Text", but also trigger a network request
// to example.com!
executeCopy('<img src="http://example.com/">Text');

// If you step through with a debugger, this will show an "alert" dialog
// (an arbitrary script supplied by the attacker!!)
debugger;
executeCopy('<iframe src="data:text/html,<script>alert(/XXS-ed!/);<\/script>"></iframe>');

本文标签： javascriptCopy to clipboard as plain textStack Overflow