Copy To Clipboard As Plain Text

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

Solution 1:

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 textfunctionexecuteCopy(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)functionexecuteCopy2(html) {
    var doc = newDOMParser().parseFromString(html, 'text/html');
    var text = doc.body.textContent;
    returnexecuteCopy(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>');