网页内容禁止拷贝的实现方式

一些博客网站和写作平台,当你准备拷贝内容的时候可能会发现文字无法被选中,也无法使用 Ctrl + C 或右键拷贝。

实现禁止拷贝的方式也很简单,主要就是禁止选择内容,禁止弹出右键菜单,触发拷贝事件的时候阻止拷贝。

注意,一般的禁止拷贝只是针对小白用户有效,使用控制台或油猴脚本很容易就能解除限制!如果要完全禁止拷贝,只能使用 canvasSVG 之类的来渲染内容,但也不能防止 OCR识别。

禁止选择内容

下面是一段 HTML:

1
2
3
4
5
6
<div id="content">
<p>听风水榭 https://1han.wiki/</p>
<p>禁止拷贝</p>
<p>禁止拷贝</p>
<p>禁止拷贝</p>
</div>

使用 CSS 禁止选中 #content 中的内容:

1
2
3
4
5
6
7
#content {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}

其中 user-select: none 是禁止选中内容,-webkit-touch-callout: none 可以禁止手指长按内容的默认提示。

JavaScript 禁止选中内容

下面通过 JavaScript 禁止选中内容和禁止弹出右键菜单:

1
2
3
4
5
6
7
8
9
10
11
// 禁止选择
document.addEventListener('selectstart', function(ev) {
ev.preventDefault();
return false;
});

// 禁止弹出右键菜单
document.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
return false;
});

JavaScript 禁止拷贝和剪切

下面禁止拷贝和剪切,即便选中了内容也无法拷贝:

1
2
3
4
5
6
7
8
9
10
11
// 禁止拷贝
document.addEventListener('copy', function(ev) {
ev.preventDefault();
return false;
});

// 禁止剪切
document.addEventListener('cut', function(ev) {
ev.preventDefault();
return false;
});

禁止打开控制台

下面禁止使用快捷键打开控制台:

1
2
3
4
5
6
7
// 禁止打开控制台
document.addEventListener('keydown', function(ev) {
if (ev.keyCode === 123) {
ev.preventDefault();
return false;
}
});

上面只是阻止了通过 F12 打开控制台,在浏览器的主菜单还是可以打开控制台的。

🔰本文标题: 网页内容禁止拷贝的实现方式

🔞本文链接: https://1han.wiki/whyenwrsjbvikcbw/index.html

🌡️本文总热度