如何禁止用户复制网站信息防止泄露？

1. 前言
2. 二、禁止复制
• js 拦截
• user-select
• 拦截 ctrl + a
• 拦截 ctrl+c（command + c）
• 直接拦截鼠标右键
3. 三、水印
4. 四、禁止打开控制台
5. 五、完整代码

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);

具体实现方法，在之前文章中总结过，大家可以看看：Vue 项目为页面添加水印效果、 前端实现水印效果的方法，总有一种适合你

四、禁止打开控制台

禁止用户打开控制台：

1. 防止代码被窃取：在控制台中，用户可以查看和修改网页的源代码，这可能会导致恶意用户窃取您的代码或敏感信息。通过禁止打开控制台，可以保护您的代码和数据不被未经授权的用户访问或篡改。
2. 提高安全性：控制台是网页与用户之间进行交互的主要渠道之一，但也是潜在的安全风险之一。恶意用户可以利用控制台执行恶意代码、进行钓鱼攻击等。禁止用户打开控制台可以减少这些潜在的安全风险。
3. 保护系统资源：在控制台中，用户可以执行各种操作，例如创建新文件、删除文件等，这可能会对系统资源造成不必要的占用和破坏。禁止打开控制台可以限制用户的操作范围，保护系统资源不被滥用。
4. 防止误操作：控制台允许用户进行各种操作，但这也增加了误操作的风险。禁止打开控制台可以减少用户误操作的可能性，避免不必要的损失和风险。

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

五、完整代码

    // 防止用户选中
    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();