网站禁止内容复制功能的方法

显示全部楼层 · 发表于 2025-3-23 19:16:09

网站禁止内容被复制是有多种技术方法，但是大多数都是前端的技术层面，如果是后端禁止复制，那可能会毕竟消耗性能，所以具体根据需要使用。

一、基础前端限制

禁用右键菜单

<body oncontextmenu="return false;">
document.addEventListener('contextmenu', function(e) { e.preventDefault();});

禁止文本选择

body { user-select: none; /* 标准属性 */ -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */}

屏蔽快捷键（Ctrl+C/Ctrl+V）

二、进阶干扰手段

动态插入干扰字符
将实际内容与不可见字符混合，复制时携带乱码：

const realText = "重要内容";const fakeText = realText.split('').join('<span style="display:none">\u200b</span>');document.getElementById("content").innerHTML = fakeText;

图片替代文字
将关键内容转为图片（需注意 SEO 影响）：

使用自定义字体
通过字体映射混淆字符显示（如将字母 A 显示为 B），复制后得到错误内容：

@font-face { font-family: 'FakeFont'; src: url('fake-font.woff2'); unicode-range: U+0041; /* 替换字母 A */}body { font-family: 'FakeFont';}

三、反爬虫与反调试

禁用开发者工具

// 检测开发者工具是否打开（部分浏览器生效）setInterval(function() { const debugger = new Function("debugger"); debugger();}, 1000);

内容动态渲染
通过 JavaScript 或 AJAX 加载内容，避免直接暴露在 HTML 中：

window.onload = function() { document.getElementById("content").innerText = "动态加载的内容";};

页面内容混淆
使用 Base64 或加密算法存储文本，前端解密后显示：

const encodedText = "5L2g5aW977yM5bi46KeB5ZCI"; // Base64 编码后的内容document.getElementById("content").innerText = atob(encodedText);

四、法律声明与追踪

添加版权水印
在文字中嵌入隐藏水印（如特定符号或用户 ID），便于追踪泄露源：

弹窗警告
复制时弹出提示框：

document.addEventListener('copy', function(e) { e.preventDefault(); alert("未经授权禁止复制！");});

记录复制行为
向服务器发送复制日志（需用户登录）：

document.addEventListener('copy', function() { fetch('/log-copy-action', { method: 'POST', body: '用户已复制内容' });});

五、注意事项

无法完全阻止复制

用户可通过截图、手动输入、浏览器插件（如禁用 JS）等方式绕过限制。
爬虫可直接抓取 HTML 源码或网络请求数据。

用户体验影响

过度限制可能导致正常用户反感（如禁用右键影响翻译功能）。

法律合规性

部分国家/地区可能对限制用户操作有法律约束，需谨慎使用。

推荐方案轻度防护：禁用右键 + 禁止文本选择 + 复制弹窗警告。
中度防护：动态渲染内容 + 自定义字体混淆 + 隐藏水印。
综合防护：前端限制 + 后端追踪（如记录用户行为日志）+ 法律声明。

建议根据实际需求选择合适的技术方案，但是要优先保障合法用户的正常使用体验。