以纯文本形式复制到剪贴板

Question

我在 Chrome 扩展程序的 background.js 中使用此代码将文本复制到用户的剪贴板：

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);
}

它复制带有格式的文本。如何以没有格式的纯文本复制文本？

Answer 1

您的问题代码包含一个常见的安全问题，称为XSS。由于您采用不受信任的输入并将其分配给 .innerHTML，因此您允许攻击者在您的文档上下文中插入任意 HTML。

幸运的是，攻击者无法在您的扩展程序上下文中运行脚本，因为扩展程序的默认 Content security policy 禁止内联脚本。正是因为这种情况，Chrome 扩展程序才会强制执行此 CSP，以防止 XSS 漏洞。

将 HTML 转换为文本的正确方法是通过DOMParser API。以下两个函数显示了如何将文本复制为文本，或者将您的案例 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);
}

请注意，.textContent 完全忽略 HTML 标记。如果您想将 <br>s 解释为换行符，请使用非标准（但在 Chrome 中支持）.innerText 属性而不是 .textContent。

以下是使用您的问题中的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>');