使用Clipboard API可安全实现富文本复制粘贴，需在用户手势触发下通过navigator.clipboard.write()写入内容，并结合sanitizeHTML或DOMPurify清理粘贴的HTML，防止XSS攻击，同时处理权限异常与兼容性问题。
在现代网页开发中，JavaScript 实现剪贴板操作（尤其是富文本的复制粘贴）非常常见。但由于安全和用户体验的考虑，浏览器对剪贴板 API 的使用有严格限制。要安全、可靠地实现富文本的复制粘贴，需要遵循最佳实践并理解权限机制。
1. 使用 Clipboard API 安全读写剪贴板
现代浏览器推荐使用异步的 navigator.clipboard API 来与剪贴板交互，它比传统的 document.execCommand() 更安全且可控。
该 API 要求页面必须运行在安全上下文中（HTTPS 或 localhost），并且大多数操作需要用户手势触发（如点击事件）。
示例：复制富文本内容到剪贴板
async function copyRichText() {
const htmlContent = '<div style="color: red;"><b>加粗红色文字</b></div>';
const plainText = '加粗红色文字';
const clipboardItem = new ClipboardItem({
'text/html': new Blob([htmlContent], { type: 'text/html' }),
'text/plain': new Blob([plainText], { type: 'text/plain' })
});
try {
await navigator.clipboard.write([clipboardItem]);
console.log('富文本已复制');
} catch (err) {
console.error('复制失败:', err);
}
}
绑定到按钮点击：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('copyBtn').addEventListener('click', copyRichText);
2. 粘贴富文本内容的安全处理
从剪贴板读取数据时，应始终验证来源并清理内容，防止 XSS 攻击或样式污染。
示例：监听粘贴事件并解析富文本
document.addEventListener('paste', async (event) => {
event.preventDefault();
let html, text;
// 优先尝试使用 async clipboard API
if (navigator.clipboard && window.ClipboardItem) {
try {
const items = await navigator.clipboard.read();
for (const item of items) {
if (item.types.includes('text/html')) {
html = await item.getType('text/html');
}
if (item.types.includes('text/plain')) {
text = await item.getType('text/plain');
}
}
} catch (err) {
console.warn('无法读取剪贴板内容:', err);
}
} else {
// 回退到传统方式（兼容性考虑）
html = event.clipboardData.getData('text/html');
text = event.clipboardData.getData('text/plain');
}
if (html) {
// 清理 HTML 再插入（防注入）
const cleanHtml = sanitizeHTML(html);
document.getElementById('output').innerHTML += cleanHtml;
} else if (text) {
document.getElementById('output').textContent += text;
}
});
3. 富文本清理与安全防护
直接将剪贴板中的 HTML 插入页面存在风险，必须进行清洗。可以使用简单策略或引入专用库（如 DOMPurify）。
简易 HTML 清理函数示例
function sanitizeHTML(dirty) {
const div = document.createElement('div');
div.textContent = dirty; // 先转义原始内容
return div.innerHTML;
}
更严格的场景建议使用 DOMPurify.sanitize(dirty)，可配置允许的标签和属性。
4. 用户权限与错误处理
Clipboard API 可能因权限被拒或上下文不安全而失败，需妥善处理异常。
- 确保操作由用户行为触发（如 click、keypress）
- 检查权限状态：
navigator.permissions.query({name: 'clipboard-write'}) - 提供降级方案或提示信息
基本上就这些。只要在用户交互中调用、做好内容过滤，并合理处理兼容性，就能安全实现富文本剪贴板功能。不复杂但容易忽略细节。
