菜鸟-创作你的创作

前端防复制的5种主流方案效果对比与实现

lichongyang

下面给你整理一份 前端防复制（禁用复制/粘贴/选择/右键等）的 5 种主流方案效果对比 + 实现代码。
内容覆盖从基础到增强效果，并附带实际可绕过性分析，让你可以根据不同业务需求选择最佳方案。

🚫 前端防复制的 5 种主流方案

⭐ 总结优先看：哪种最有效？

技术方案防复制效果可绕过性性能影响适用场景
禁用选区（CSS user-select: none）★★★容易绕过极低静态展示、简单限制
禁用右键 + 禁用快捷键★★★中等（能绕过）低网页文案保护
JS 屏蔽 copy / cut / contextmenu 事件★★★★可绕过中商城、知识付费内容
半沙箱渲染（Canvas、图片化）★★★★★难复制文本中等教材、收费课程、图文保护
真正加密渲染（WebGL/Canvas + 私有协议 + 后端签名）★★★★★极难复制文本中高高价值内容（付费课程、电子书）

下面逐个详细讲。

1️⃣ CSS 禁止文本选中（最简单）

实现方式（跨浏览器）：

.nocopy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

应用：

<div class="nocopy">
  无法选中这段文字
</div>

优点

✔ 实现最简单
✔ 兼容性好
✔ 初级防复制

缺点

❌ 按 F12 或审查元素就能复制
❌ 通过 JS 关闭 CSS 限制也可以复制

📌 适合简单内容保护，不建议用于高价值内容。

2️⃣ 禁用右键、禁用常见复制快捷键

实现方式

// 禁用右键
document.addEventListener('contextmenu', e => e.preventDefault());

// 禁用 Ctrl+C / Ctrl+X / Ctrl+S 等
document.addEventListener('keydown', e => {
  if ((e.ctrlKey || e.metaKey) && ['c', 'x', 's', 'a'].includes(e.key.toLowerCase())) {
    e.preventDefault();
  }
});

优点

✔ 兼容好
✔ 表面上阻止大多数复制

缺点

❌ 控制台照样复制内容
❌ 浏览器插件可关闭
❌ 终端用户可以关闭 JS

📌 适合普通网页，需要基础防复制限制时使用。

3️⃣ 监听 copy / cut / selectstart 事件彻底阻断

实现方式：

// 阻止 copy
document.addEventListener('copy', e => {
  e.preventDefault();
});

// 阻止 cut
document.addEventListener('cut', e => {
  e.preventDefault();
});

// 阻止选中
document.addEventListener('selectstart', e => e.preventDefault());

优点

✔ 比 CSS 强：JS 层级拦截事件
✔ 复制快捷键、右键复制都无效
✔ 与禁用右键组合效果更强

缺点

❌ 控制台仍可复制
❌ 禁用 JS 即可绕过
❌ 移动端不完全可靠

📌 适用于内容收费、需要较强保护但无需绝对防御的场景。

4️⃣ 内容转 Canvas（文字转图片）

📌 这是非常强的“半沙箱”方案
因为一旦文本变为图片，就无法选中复制。

实现举例：

HTML：

<canvas id="textCanvas"></canvas>

JS：

const canvas = document.getElementById("textCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 200;

ctx.font = "18px Arial";
ctx.fillStyle = "#333";
ctx.fillText("此内容已转为Canvas无法直接复制", 20, 60);

优点

✔ 文本无法选中复制
✔ F12 查看也是图片
✔ 爬虫也拿不到文字内容

缺点

❌ 可被 OCR 图片识别绕过
❌ 需要额外渲染成本
❌ 不便于 SEO

📌 适用于课程付费页、电子书预览、考试题等需要较强保护。

5️⃣ WebGL/Canvas 加密渲染（几乎“真防复制”）

这是高端方案，收费电子书平台、在线试题平台常用。

原理：

✔ 文本不再以 DOM 存在
✔ 客户端不保存明文，服务端签名
✔ 内容被 WebGL 或 Canvas 加密渲染
✔ 复制、DOM 抓取均无效
✔ 截图也可通过水印+行为检测来限制

简化示例：

const canvas = document.getElementById("secure");
const ctx = canvas.getContext("2d");

const encrypted = "m3k8J93asBG..."; // 服务端签名内容
const text = decrypt(encrypted); // 本地解密（sessionkey）

ctx.fillText(text, 10, 50);

真正实现中不会直接在客户端解密，而是使用 WebAssembly / Shader 写入像素。

优点

✔ 非常难复制
✔ DOM 内没有真实文本
✔ 即使逆向也很难恢复原文

缺点

❌ 成本高
❌ SEO 不支持
❌ 对终端性能要求高

📌 适用于高价值内容（付费教材、敏感培训内容、考试系统）。

📌 最终对比总结

方案防复制等级成本推荐程度
CSS 禁选★★低⭐⭐⭐
禁右键+快捷键★★★低⭐⭐⭐
JS 拦截 copy★★★★中⭐⭐⭐⭐
Canvas 文本渲染★★★★★中⭐⭐⭐⭐⭐
WebGL / WASM 加密渲染★★★★★+高⭐⭐⭐⭐⭐（安全最强）

🔥 给你一个组合方案（适合大部分网站）

<body oncontextmenu="return false" onselectstart="return false"></body>


document.addEventListener('copy', e => e.preventDefault());
document.addEventListener('cut', e => e.preventDefault());
document.addEventListener('keydown', e => {
  if (e.ctrlKey && ['c','u','s','a','x'].includes(e.key.toLowerCase())) {
    e.preventDefault();
  }
});

✔ 轻量
✔ 兼容性好
✔ 对普通用户有效

退出移动版