# 网站网页内容如何禁止复制

*Published:* 2024-01-05
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年1月5日，已超过 180天没有更新



代码如下：

```
// 防止用户选中
function disableSelect() {
    // 方式一，js拦截
    // 缺点： 无法做到某一些内容可以选中       
    document.onselectstart = function(event){
        e.preventDefault();
    };
 
 
    // 方式：给body设置样式
    document.body.style.userSelect = 'none';
 
 
    // 禁用input的ctrl + a
    document.keyDown = function(event) {
        const {ctrlKey, metaKey, keyCode} = event;
        if((ctrlKey || metaKey) && keyCode === 65) {
            return false;
        }
    }
};
 
// 禁用键盘的复制
function disableCopy() {
    const {ctrlKey, metaKey, keyCode} = event;
    if((ctrlKey || metaKey) && keyCode === 67) {
        return false;
    }
}
 
// 禁止复制图片
function disableCopyImg() {
    document.oncontextmenu = function(event){
        if(event.srcElement.tagName=="IMG"){
            alert('图片直接右键');
            return false;
        }
    };
};
 
// 生成水印
function generateWatermark(keyword = '捌玖') {
     // 创建Canvas元素 
    const canvas = document.createElement('canvas'); 
    const context = canvas.getContext('2d'); 
     
    // 设置Canvas尺寸和字体样式 
    canvas.width = 100; 
    canvas.height = 100; 
    context.font = '30px Arial'; 
    context.fillStyle = 'rgba(0,0,0,0.1)'; 
     
    // 绘制文字到Canvas上 
    context.fillText(keyword, 10, 50); 
     
    // 生成水印图像的URL 
    const watermarkUrl = canvas.toDataURL(); 
     
    // 在页面上显示水印图像（或进行其他操作） 
    const divDom = document.createElement('div');
    divDom.style.position = 'fixed';
    divDom.style.zIndex = '99999';
 
    // 因为div旋转了45度，所以div需要足够的大
    divDom.style.top = '-10000px';
    divDom.style.bottom = '-10000px';
    divDom.style.left = '-10000px';
    divDom.style.right = '-10000px';
    divDom.style.transform = 'rotate(-45deg)';
 
    // 防止对用户的交互产生影响
    divDom.style.pointerEvents = 'none';
    divDom.style.backgroundImage = `url(${watermarkUrl})`;
    document.body.appendChild(divDom);
}
 
// 禁止打开控制台
function disbaleConsole() {
    let firstTime
    let lastTime
    setInterval(() => {
        firstTime = Date.now()
        debugger
        lastTime = Date.now()
        if (lastTime - firstTime > 10) {
            window.location.href = "about:blank";
        }
    }, 100);
}
 
disableSelect();
disableCopy();
disableCopyImg();
generateWatermark();
disbaleConsole();
```

### **复制网页内容的方式：**

> 选择 -> ctrl+c（command + c）  
> 选择 -> 鼠标右键 -> 复制

### **js拦截：**

相比user-select无法做到某一些内容可以被选中

```
document.addEventListener('contextmenu', function(e) { 
    e.preventDefault(); 
}, false); 
 
document.addEventListener('selectstart', function(e) { 
    e.preventDefault(); 
}, false);
```

### **user-select：**

不难发现，当我们复制内容的时候，首选是选择目标内容，那我们可以禁用用户的选择目标内容。

css属性user-select用于控制用户是否能够选择（即复制）文本和其他页面元素。它的作用是指定用户在浏览网页时是否能够选择和复制页面上的文本和其他元素。

```
<h3>user-select: none;</h3>
<div style="user-select: none;">我是捌玖，欢迎关注我哟，这儿是利用css样式，测试能否禁用复制</div>
<div style="user-select: none;">哈哈哈，当然，这种方式是无效的，我只是玩下</div>
```

那user-select和pointer-event的区别是啥？ pointer-events 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。通俗一点讲，例如我们给某个元素设置了pointer-events: none，当我们点击这个元素的时候，是不会触发click事件，包括我们即使通过鼠标也无法选中该元素。

user-select 用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。

> 注意：user-select是无法拦截input中的选中（鼠标/ctrl+a）

### **拦截ctrl + a：**

每个人（系统）使用使用组合键进行复制，可能键是存在差异的，就拿我电脑是mac，默认是command + a为复制，当然是可以修改的，看个人使用习惯，所以我们要同时拦截掉ctrl + a 和 command + a。

```
document.keyDown = function(event) {
    const {ctrlKey, metaKey, keyCode} = event;
    if((ctrlKey || metaKey) && keyCode === 65) {
        return false;
    }
}
```

### **拦截ctrl+c（command + c）：**

每个人（系统）使用使用组合键进行复制，可能键是存在差异的，就拿我电脑是mac，默认是command + c为复制，当然是可以修改的，看个人使用习惯，所以我们要同时拦截掉ctrl + c 和 command + c的。不可以直接拦截c键的输入，会影响到input框的输入

```
document.keyDown = function(event) {
    const {ctrlKey, metaKey, keyCode} = event;
    if((ctrlKey || metaKey) && keyCode === 67) {
        return false;
    }
}
```

### 拦截鼠标右键：

该方法直接拦截了右键菜单的打开，主要用于拦截图片的复制，菜单中的复制图片的方法有多种（复制图片、复制图片地址等），暂时没找到合适的方法拦截菜单中具体的某一项。

```
document.oncontextmenu = function(event){
    if(event.srcElement.tagName=="IMG"){
        alert('图片直接右键');
        return false;
    }
};
```

### 网站水印的方式：

网站水印的主要作用是版权保护和网站标识展示。具体来说，它可以在图片上加上作者的信息或标识，防止他人未经授权使用，有助于保护图片的版权安全。同时，它也可以在网页中展示特定的标识或信息，如网站的名称、网址、版权信息等，有助于提高网站的知名度和品牌形象。

此外，网站水印还可以用于追踪网站的非法使用和侵权行为。当发现某个网站上出现了未经授权的水印，就可以通过水印的信息追踪到该网站的使用者，从而采取相应的法律措施。

```
// 创建Canvas元素 
const canvas = document.createElement('canvas'); 
const context = canvas.getContext('2d'); 
 
// 设置Canvas尺寸和字体样式 
canvas.width = 100; 
canvas.height = 100; 
context.font = '30px Arial'; 
context.fillStyle = 'rgba(0,0,0,0.1)'; 
 
// 绘制文字到Canvas上 
context.fillText('捌玖', 10, 50); 
 
// 生成水印图像的URL 
const watermarkUrl = canvas.toDataURL(); 
 
// 在页面上显示水印图像（或进行其他操作） 
const divDom = document.createElement('div');
divDom.style.position = 'fixed';
divDom.style.zIndex = '99999';
divDom.style.top = '-10000px';
divDom.style.bottom = '-10000px';
divDom.style.left = '-10000px';
divDom.style.right = '-10000px';
divDom.style.transform = 'rotate(-45deg)';
// 避免对用户的交互产生影响
divDom.style.pointerEvents = 'none';
divDom.style.backgroundImage = `url(${watermarkUrl})`;
document.body.appendChild(divDom);
```

### 禁止用户打开控制台

防止代码被窃取：在控制台中，用户可以查看和修改网页的源代码，这可能会导致恶意用户窃取您的代码或敏感信息。通过禁止打开控制台，可以保护您的代码和数据不被未经授权的用户访问或篡改。

提高安全性：控制台是网页与用户之间进行交互的主要渠道之一，但也是潜在的安全风险之一。恶意用户可以利用控制台执行恶意代码、进行钓鱼攻击等。禁止用户打开控制台可以减少这些潜在的安全风险。

保护系统资源：在控制台中，用户可以执行各种操作，例如创建新文件、删除文件等，这可能会对系统资源造成不必要的占用和破坏。禁止打开控制台可以限制用户的操作范围，保护系统资源不被滥用。

防止误操作：控制台允许用户进行各种操作，但这也增加了误操作的风险。禁止打开控制台可以减少用户误操作的可能性，避免不必要的损失和风险。

```
let firstTime;
let lastTime;
setInterval(() => {
    firstTime = Date.now()
    debugger
    lastTime = Date.now()
    if (lastTime - firstTime > 10) {
        window.location.href = "about:blank";
    }
}, 100)
```