密钥复制必须用 JavaScript 调用 navigator.clipboard.writeText()，密钥不得硬编码在 HTML 中，需由 JS 从安全来源动态获取，且须满足 HTTPS/localhost 环境与用户手势触发条件。
密钥复制功能不能靠纯 HTML 实现，必须用 JavaScript 调用 navigator.clipboard.writeText()，且密钥值不能硬编码在 HTML 源码里——否则等于公开暴露。
密钥复制按钮的 HTML 结构本身很简单
按钮只是触发器，不携带密钥。常见错误是把密钥写死在 data-key 或 value 属性里，这会让爬虫或查看源码的人直接拿到密钥。
- ✅ 正确做法：按钮只带一个标识 ID，密钥由 JS 从安全来源（如后端 API、加密环境变量、或用户登录态派生）动态获取
- ❌ 错误示例：
<button data-key="sk_live_abc123">复制密钥</button>—— 这种写法等同于把密钥贴在门上 - 按钮 class 可以统一用
copy-key-btn，方便批量绑定事件，但不要用 class 存密钥 - 如果密钥需前端展示（如调试场景），应先做掩码处理，比如显示为
sk_live_***123，真实值仅在点击时解密或拉取
为什么不能用 document.execCommand('copy') 复制密钥
这个老 API 在 Chrome 87+、Firefox 87+ 已被废弃，调用时控制台会报警告，且在 iframe、非用户手势上下文里直接失败。更重要的是，它依赖临时 textarea 插入 DOM，密钥字符串可能短暂暴露在页面结构中，有被 XSS 或 DOM 窃取风险。
-
navigator.clipboard.writeText()是原子操作，不产生中间 DOM 节点 - 它要求明确的用户手势（
click、keydown），天然防自动窃取 - 失败时抛出明确错误类型，比如
NotAllowedError（没点就调）、SecurityError（HTTP 环境）、TypeError（参数非字符串） - 旧版 Safari（≤13.1）不支持，需 fallback 到
execCommand，但仅限“复制可见文本”场景，密钥类敏感内容不建议降级
密钥复制必须满足的安全上下文条件
不是加了 JS 就能复制，浏览器强制校验运行环境。常见静默失败就是因为卡在这一步——没报错，但剪贴板没变。
立即学习“前端免费学习笔记（深入）”；
- 必须运行在 HTTPS 协议下，或
localhost（含127.0.0.1）；HTTP 站点调用navigator.clipboard会直接返回 rejected Promise，不提示原因 - 调用必须由用户手势发起，不能在
setTimeout、fetch回调、或 Vue/React 的mounted钩子中直接调；必须包裹在button.onclick或addEventListener('click', ...)内 - 如果密钥来自异步请求（如
fetch('/api/key')），需确保.then()中的writeText()仍在同一事件循环内，避免脱离手势上下文 - 某些企业内网或测试环境用自签名证书，会被浏览器判定为不安全上下文，此时
window.isSecureContext为false，需提前判断并禁用按钮
简单但够用的密钥复制函数模板
以下代码可直接复用，已处理常见边界情况：
function copyApiKey(btn) {
const id = btn.dataset.id;
if (!id) return;
// 假设密钥存在全局 map 或通过 id 查后端
const rawKey = getSecretKeyById(id); // 你自己的密钥获取逻辑
if (!rawKey || typeof rawKey !== 'string') {
alert('密钥不可用');
return;
}
navigator.clipboard.writeText(rawKey)
.then(() => {
btn.textContent = '已复制';
setTimeout(() => { btn.textContent = '复制密钥'; }, 2000);
})
.catch(err => {
console.error('密钥复制失败:', err.name, err.message);
if (err.name === 'NotAllowedError') {
alert('请手动点击按钮触发复制');
} else if (err.name === 'SecurityError') {
alert('当前环境不支持剪贴板访问（需 HTTPS 或 localhost）');
}
});
}
注意 getSecretKeyById() 必须是你自己封装的安全获取逻辑，绝不能返回明文密钥字符串常量。复杂系统中，密钥往往需要 token 换取、短期有效、或按用户权限动态生成——这些都发生在 JS 执行前，不在这个函数里处理。
真正容易被忽略的点是：密钥生命周期管理比复制动作本身重要得多。按钮再健壮，密钥若长期缓存在内存或 localStorage 里，一样会被 XSS 劫持。复制完就丢弃、不用全局变量存、不 log 明文，才是关键。
