javascript 作为纯文本复制到剪贴板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25099409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Copy to clipboard as plain text
提问by Joe Mornin
I'm using this code in background.jsin a Chrome extension to copy text to the user's clipboard:
我background.js在 Chrome 扩展程序中使用此代码将文本复制到用户的剪贴板：
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?
它复制带有格式的文本。如何在没有格式的情况下以纯文本形式复制文本？
回答by Rob W
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.
您问题的代码包含称为XSS的常见安全问题。因为您接受了不受信任的输入并将其分配给.innerHTML，所以您允许攻击者在您的文档上下文中插入任意 HTML。
Fortunately, attackers cannot run scripts in the context of your extension because the extension's default Content security policyforbid inline scripts. This CSP is enforced in Chrome extensions exactly because of situations like this, to prevent XSS vulnerabilities.
幸运的是，攻击者无法在您的扩展程序的上下文中运行脚本，因为扩展程序的默认内容安全策略禁止内联脚本。正是因为这种情况，这个 CSP 在 Chrome 扩展中强制执行，以防止 XSS 漏洞。
The correctway to convert HTML to text is via the DOMParserAPI. The following two functions show how to copy text as text, or for your case HTML as text:
将 HTML 转换为文本的正确方法是通过DOMParserAPI。以下两个函数显示了如何将文本复制为文本，或将 HTML 复制为文本：
// 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 .textContentcompletely ignores HTML tags. If you want to interpret <br>s as line breaks, use the non-standard (but supported in Chrome) .innerTextproperty instead of .textContent.
请注意，.textContent完全忽略 HTML 标签。如果要将<br>s解释为换行符，请使用非标准（但在 Chrome 中受支持）.innerText属性而不是.textContent.
Here are two of the many examples of how XSS could be abused using the executeCopyfunction from your question:
以下是使用executeCopy您问题中的函数如何滥用 XSS 的众多示例中的两个：
// 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>');
