使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > 如何禁止用户复制网站信息防止泄露？
码云码云 前端开发

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

目录
文章目录隐藏
  1. 前言
  2. 二、禁止复制
  3. 三、水印
  4. 四、禁止打开控制台
  5. 五、完整代码

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

前言

不知道大家有过这样的经历没，有时候我们看到一个 url，就想复制一下 url，看看 url 对应的内容是啥，大家习惯性使用 ctrl+c，然后 ctrl+v，最后得到是 禁止复制，原来是禁用了复制。这对于前端开发来说并不难。本文接下来将简单讲解禁止复制、水印和禁止打开控制台三个功能点的实现。

二、禁止复制

现在有的复制网页（常规网页用户，不开控制台的情况）的内容方式有：

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

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的区别是啥？

  1. pointer-events  指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。通俗一点讲，例如我们给某个元素设置了pointer-events: none，当我们点击这个元素的时候，是不会触发 click 事件，包括我们即使通过鼠标也无法选中该元素。
  2. 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);

具体实现方法，在之前文章中总结过，大家可以看看：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();

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » 如何禁止用户复制网站信息防止泄露？

码云 会员

分享到：

相关推荐

发表回复