JavaScript剪切板操作须通过navigator.clipboard API在安全上下文且用户手势触发下进行；readText()读纯文本需权限授权并捕获异常，writeText()写纯文本无需授权但需校验内容，write()可写图片但兼容性差；须检查API支持、避免自动读取、防范XSS与信息泄露。
JavaScript 的剪切板操作主要通过 navigator.clipboard API 实现，它比旧的 document.execCommand 更安全、更强大，但有明确的使用限制：必须在**安全上下文**（HTTPS 或 localhost）中运行，且**必须由用户手势触发**（如 click、tap、keydown 等），否则会拒绝访问。
读取剪切板内容（安全读取文本）
调用 navigator.clipboard.readText() 可获取当前剪切板中的纯文本。浏览器会自动弹出权限提示（仅首次），用户授权后后续读取无需再次确认。
- 必须在用户事件回调中调用，例如：
button.addEventListener('click', async () => { const text = await navigator.clipboard.readText(); console.log(text); }); - 注意捕获异常：若用户拒绝权限、剪切板为空、或非文本内容（如图片），会抛出错误，建议用
try...catch处理 - 不支持直接读取 HTML 或富文本；如需结构化内容，需额外处理（如解析 HTML 字符串，但存在 XSS 风险，务必清理）
写入剪切板内容（安全写入文本）
使用 navigator.clipboard.writeText() 写入纯文本最简单可靠。它同样要求用户手势触发，且不会弹出权限请求（写入权限默认随页面安全上下文授予）。
- 示例：
await navigator.clipboard.writeText('Hello, world!'); - 避免写入未经校验的用户输入或服务端返回的内容，防止恶意脚本被粘贴执行（尤其在富文本编辑器等场景）
- 如需写入图片，可用
navigator.clipboard.write()配合Blob和ClipboardItem，但兼容性较弱（Chrome 76+，Firefox 117+，Safari 尚未支持），且需用户授权
权限与兼容性注意事项
剪切板 API 不是“开箱即用”，需主动检查环境和权限状态。
立即学习“Java免费学习笔记（深入）”；
- 检查是否支持：
if (!navigator.clipboard) { /* 降级到 document.execCommand 或提示不支持 */ } - 可选地查询权限：
navigator.permissions.query({ name: 'clipboard-read' })或'clipboard-write'，但实际行为因浏览器而异，不建议依赖其结果做核心逻辑 - 旧版 Safari 和部分移动端浏览器仍需回退方案，例如监听
paste事件 +execCommand('paste')（已废弃，仅作兼容）或引导用户手动操作
避免常见安全陷阱
剪切板是跨应用共享数据的通道，不当使用可能引发信息泄露或注入攻击。
- 不要自动读取剪切板（如定时轮询），这违反隐私原则，现代浏览器会阻止
- 从剪切板读取 HTML 后，若要插入 DOM，必须严格过滤标签和属性（推荐使用
DOMPurify等库），禁止直接innerHTML = rawHtml - 敏感操作（如复制密码、token）应明确提示用户，并避免在控制台打印原始剪切板内容
- 写入前对内容做必要转义或截断，防止过长文本或特殊字符导致 UI 异常（如换行、零宽字符）
