“复制党”完了！前端这6招让你的网站内容谁都复制不走！-CSDN博客

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

你辛辛苦苦码的字，别人 Ctrl+C 一下就搬走了？
你写的技术干货、原创文案、独家数据，别人一复制一粘贴直接换壳上线？
别慌，今天就来教你用技术手段把复制欲望打到原地坐牢！

第一招：禁止复制事件，打掉快捷键

从最简单也最常见的方法讲起：阻止浏览器的 copy 行为。

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

再加一把限制键盘操作的锁：

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey && (e.key === 'a' || e.key === 'c')) || e.key === 'F12') {
    e.preventDefault();
  }
});

用户按 F12？
关掉 JS？

「你挡得住我复制，还挡得住我技术进阶？」

第二招：CSS 限制选区，内容摸都摸不到

用 CSS 样式让内容无法被选中，用户连选都选不到，复制个啥？

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

再加个提示优化体验：

.nocopy::after {
  content: "复制失败，请尊重原创 ✨";
  position: absolute;
  color: red;
}

用户体验就一句话：

「你写得是好，但我真复制不动啊。」

但开发者工具里随手一删样式，啥都回来了。

第三招：字体反制法，看到≠拿到

这招才是真正的“老六”操作。

DOM 里其实是一堆乱码：

<span class="anti-copy">㠁㑢</span>

但搭配专属的字体文件 .woff，浏览器渲染后你看到的是正常的“你好”。

你复制出来的还是㠁㑢——无意义内容。

之前知乎、某些小说站的 "禁止转载内容" 多半用的就是这个套路。

不过对高级用户来说，只要获取到字体文件，分析映射关系后仍然可以还原。如果是博客的话还是不建议使用，因为影响 SEO，爬虫读取无效内容；

第四招：画出来的文字你选个锤子

如果文字不是 HTML 元素，而是“画”出来的呢？

例如使用 SVG 或 Canvas 渲染：

<svg width="400" height="60">
  <text x="10" y="35" font-size="24">这不是文字，你复制试试看😎</text>
</svg>

或者：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px sans-serif';
ctx.fillText('复制我啊~', 10, 50);
document.body.appendChild(canvas);

你看到的不是 DOM，而是一张图，选区功能彻底失效。

唯一对策：截图 + OCR + AI 识别，门槛不低。

第五招：自定义渲染引擎，复制彻底无解

最硬核的方式：完全接管渲染、交互、选区。

不使用 DOM 结构，而是用虚拟渲染引擎，例如：

自己写一个 Canvas 文本排版引擎
控制光标、选区行为
所有内容结构都不可见

// 文字绘制完全不依赖 HTML
ctx.fillStyle = '#000';
ctx.font = '16px Arial';
ctx.fillText('我不是DOM，复制不了', 10, 50);

这种方案难度高，SEO 炸裂，但安全性拉满。

如果你使用过 WPS 在线文档、部分阅读器，就可能体验过这种“你看得到，但复制不到”的渲染方式。

第六招：禁止打开控制台，发现就关你页！

控制台（F12）可是前端调试的好帮手，但有些老六级网站，偏偏不想你轻松调试它。于是——只要你敢按 F12，我就敢把你页面直接关了。

禁止打开控制台：拦截键盘事件

document.onkeydown = function (e) {
  // F12 键 或 Ctrl+Shift+I 组合键
  if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
    e.preventDefault();
  }
};

// 禁止右键菜单（辅助防止调试）
document.addEventListener('contextmenu', e => e.preventDefault());

检测控制台是否打开：尺寸判断 + debugger

function detectDevTools() {
  const threshold = 160;
  const devtoolsOpen =
    window.outerWidth - window.innerWidth > threshold ||
    window.outerHeight - window.innerHeight > threshold;

  if (devtoolsOpen) {
    window.location.href = 'about:blank'; // 或者 window.close();
  }
}

setInterval(detectDevTools, 1000);

还可以加个debugger 延时判断，来检测用户是否打开了断点调试工具：

function checkDevtoolsByDebugger() {
  const start = performance.now();
  debugger; // 如果打开控制台，执行时间会延长
  const time = performance.now() - start;

  if (time > 100) {
    window.location.href = 'about:blank';
  }
}

setInterval(checkDevtoolsByDebugger, 2000);

看了一下现在知乎小说部分就是这么去做的：

让咋们无法使用F12打开控制台，打开控制台后再打开链接，就会关闭网页，确实挺狠。

但是也是有方案解决的，感兴趣可以留言，分享给你

🎯 写在最后

防复制从来都是猫鼠游戏：

你加样式，他关 JS
你乱字体，他逆推表
你画出来，他截图识别
你写渲染器，他训练 AI

防得住小白，挡不住老哥。

但在现实中，能拦住 90% 的复制者就已经是胜利了。

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍