网页防扒技术完全指南

在当今互联网时代，网站内容被恶意复制、源码被随意查看已成为许多网站运营者的困扰。为了保护网站内容、防止恶意扒取，我们需要采用多种技术手段来增强网站的安全性。本文将为您提供一套完整的网页防扒解决方案，包括屏蔽F12开发者工具、禁用右键菜单、防止复制粘贴、阻止查看源码等多种防护措施。

一、基础防扒技术

1.1 屏蔽F12开发者工具

1.1.1 检测`F12`按键

添加位置：在HTML页面的<head>标签内或<script>标签中

用途：检测用户是否按下F12键，并阻止开发者工具打开

效果：按下F12键时显示警告信息或执行其他操作

```javascript
// 检测F12按键
document.addEventListener('keydown', function(event) {
    if (event.keyCode === 123) { // F12键的键码
        event.preventDefault();
        alert('禁止使用开发者工具！');
        return false;
    }
    
    // 检测Ctrl+Shift+I (开发者工具快捷键)
    if (event.ctrlKey && event.shiftKey && event.keyCode === 73) {
        event.preventDefault();
        alert('禁止使用开发者工具！');
        return false;
    }
    
    // 检测Ctrl+Shift+J (控制台快捷键)
    if (event.ctrlKey && event.shiftKey && event.keyCode === 74) {
        event.preventDefault();
        alert('禁止使用开发者工具！');
        return false;
    }
    
    // 检测Ctrl+U (查看源码快捷键)
    if (event.ctrlKey && event.keyCode === 85) {
        event.preventDefault();
        alert('禁止查看源码！');
        return false;
    }
});
```

1.1.2 检测开发者工具状态

添加位置：在HTML页面的<script>标签中

用途：实时检测开发者工具是否被打开

效果：当开发者工具打开时自动执行防护措施

```javascript
// 检测开发者工具状态
(function() {
    let devtools = {
        open: false,
        orientation: null
    };
    
    // 检测开发者工具是否打开
    function detectDevTools() {
        const threshold = 160;
        const widthThreshold = window.outerWidth - window.innerWidth > threshold;
        const heightThreshold = window.outerHeight - window.innerHeight > threshold;
        
        if (widthThreshold || heightThreshold) {
            if (!devtools.open) {
                devtools.open = true;
                handleDevToolsOpen();
            }
        } else {
            devtools.open = false;
        }
    }
    
    // 处理开发者工具打开事件
    function handleDevToolsOpen() {
        // 隐藏页面内容
        document.body.style.display = 'none';
        
        // 显示警告信息
        const warning = document.createElement('div');
        warning.innerHTML = `
            <div style="
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #ff4444;
                color: white;
                padding: 20px;
                border-radius: 10px;
                text-align: center;
                z-index: 9999;
                font-size: 18px;
            ">
                <h3>⚠️ 安全警告</h3>
                <p>检测到开发者工具已打开！</p>
                <p>请关闭开发者工具后刷新页面。</p>
                <button onclick="location.reload()" style="
                    background: white;
                    color: #ff4444;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 5px;
                    cursor: pointer;
                    margin-top: 10px;
                ">刷新页面</button>
            </div>
        `;
        document.body.appendChild(warning);
    }
    
    // 定期检测
    setInterval(detectDevTools, 1000);
    
    // 页面加载完成后开始检测
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', detectDevTools);
    } else {
        detectDevTools();
    }
})();
```

1.2 禁用右键菜单

1.2.1 基础右键禁用

添加位置：在HTML页面的<script>标签中

用途：禁用页面的右键菜单

效果：用户无法通过右键访问上下文菜单

```javascript
// 禁用右键菜单
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    return false;
});

// 或者使用更简洁的方式
document.oncontextmenu = function() {
    return false;
};
```

1.2.2 自定义右键菜单

添加位置：在HTML页面的<script>标签中

用途：替换默认右键菜单为自定义菜单

效果：显示友好的提示信息而不是默认菜单

```javascript
// 自定义右键菜单
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    
    // 创建自定义右键菜单
    const customMenu = document.createElement('div');
    customMenu.id = 'custom-context-menu';
    customMenu.style.cssText = `
        position: fixed;
        top: ${event.clientY}px;
        left: ${event.clientX}px;
        background: #333;
        color: white;
        padding: 10px;
        border-radius: 5px;
        z-index: 10000;
        font-size: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    `;
    customMenu.innerHTML = `
        <div style="margin-bottom: 5px;">🚫 右键菜单已禁用</div>
        <div style="font-size: 12px; color: #ccc;">
            为了保护网站内容，右键菜单已被禁用
        </div>
    `;
    
    // 移除已存在的菜单
    const existingMenu = document.getElementById('custom-context-menu');
    if (existingMenu) {
        existingMenu.remove();
    }
    
    // 添加新菜单
    document.body.appendChild(customMenu);
    
    // 3秒后自动隐藏
    setTimeout(() => {
        if (customMenu.parentNode) {
            customMenu.remove();
        }
    }, 3000);
    
    return false;
});

// 点击其他地方时隐藏自定义菜单
document.addEventListener('click', function() {
    const customMenu = document.getElementById('custom-context-menu');
    if (customMenu) {
        customMenu.remove();
    }
});
```

1.3 防止复制粘贴

1.3.1 禁用复制功能

添加位置：在HTML页面的<script>标签中

用途：阻止用户复制页面内容

效果：无法通过Ctrl+C或右键复制文本


```javascript
// 禁用复制功能
document.addEventListener('copy', function(event) {
    event.preventDefault();
    alert('复制功能已被禁用！');
    return false;
});

// 禁用剪切功能
document.addEventListener('cut', function(event) {
    event.preventDefault();
    alert('剪切功能已被禁用！');
    return false;
});

// 禁用粘贴功能
document.addEventListener('paste', function(event) {
    event.preventDefault();
    alert('粘贴功能已被禁用！');
    return false;
});

// 禁用选择功能（可选，影响用户体验）
document.addEventListener('selectstart', function(event) {
    event.preventDefault();
    return false;
});
```

1.3.2 智能复制保护

添加位置：在HTML页面的<script>标签中

用途：允许少量复制但阻止大量内容复制

效果：平衡用户体验和内容保护

```javascript
// 智能复制保护
let copyCount = 0;
const maxCopyLength = 100; // 最大允许复制字符数

document.addEventListener('copy', function(event) {
    const selection = window.getSelection();
    const text = selection.toString();
    
    if (text.length > maxCopyLength) {
        event.preventDefault();
        alert(`为了保护内容，单次最多只能复制${maxCopyLength}个字符！`);
        return false;
    }
    
    copyCount++;
    if (copyCount > 5) { // 限制复制次数
        event.preventDefault();
        alert('复制次数过多，请稍后再试！');
        return false;
    }
    
    // 重置计数器（每分钟重置一次）
    setTimeout(() => {
        copyCount = 0;
    }, 60000);
});
```

二、高级防扒技术

2.1 源码保护

2.1.1 禁用查看源码

添加位置：在HTML页面的<script>标签中

用途：阻止用户查看页面源码

效果：无法通过Ctrl+U或右键查看源码

```javascript
// 禁用查看源码
document.addEventListener('keydown', function(event) {
    // 禁用Ctrl+U
    if (event.ctrlKey && event.keyCode === 85) {
        event.preventDefault();
        alert('查看源码功能已被禁用！');
        return false;
    }
    
    // 禁用Ctrl+Shift+U
    if (event.ctrlKey && event.shiftKey && event.keyCode === 85) {
        event.preventDefault();
        alert('查看源码功能已被禁用！');
        return false;
    }
});

// 禁用F12开发者工具
document.addEventListener('keydown', function(event) {
    if (event.keyCode === 123) {
        event.preventDefault();
        alert('开发者工具已被禁用！');
        return false;
    }
});
```

2.2 图片保护

2.2.1 禁用图片拖拽

添加位置：在HTML页面的<script>标签中

用途：防止用户拖拽保存图片

效果：无法通过拖拽方式保存图片


```javascript
// 禁用图片拖拽
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img');
    
    images.forEach(function(img) {
        // 禁用拖拽
        img.draggable = false;
        
        // 禁用右键菜单
        img.addEventListener('contextmenu', function(event) {
            event.preventDefault();
            alert('图片右键菜单已被禁用！');
            return false;
        });
        
        // 添加水印效果
        img.style.position = 'relative';
        const watermark = document.createElement('div');
        watermark.style.cssText = `
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            color: rgba(255,255,255,0.3);
            font-size: 24px;
            font-weight: bold;
            pointer-events: none;
            user-select: none;
            z-index: 1000;
        `;
        watermark.textContent = 'MrZ2516.com';
        img.parentNode.style.position = 'relative';
        img.parentNode.appendChild(watermark);
    });
});
```

三、综合防护方案

3.1 完整防扒脚本

添加位置：在HTML页面的<head>标签内

用途：整合所有防扒功能

效果：提供全面的网页保护

```javascript
// 完整防扒脚本
(function() {
    'use strict';
    
    // 配置选项
    const config = {
        enableF12Protection: true,      // 启用F12保护
        enableRightClickProtection: true, // 启用右键保护
        enableCopyProtection: true,     // 启用复制保护
        enableSourceProtection: true,   // 启用源码保护
        enableImageProtection: true,    // 启用图片保护
        maxCopyLength: 100,            // 最大复制长度
        maxCopyCount: 5,               // 最大复制次数
        warningMessage: '操作已被禁止！'  // 警告信息
    };
    
    // 初始化防护
    function initProtection() {
        if (config.enableF12Protection) {
            initF12Protection();
        }
        if (config.enableRightClickProtection) {
            initRightClickProtection();
        }
        if (config.enableCopyProtection) {
            initCopyProtection();
        }
        if (config.enableSourceProtection) {
            initSourceProtection();
        }
        if (config.enableImageProtection) {
            initImageProtection();
        }
        
        // 启动开发者工具检测
        startDevToolsDetection();
    }
    
    // F12保护
    function initF12Protection() {
        document.addEventListener('keydown', function(event) {
            if (event.keyCode === 123 || 
                (event.ctrlKey && event.shiftKey && event.keyCode === 73) ||
                (event.ctrlKey && event.shiftKey && event.keyCode === 74)) {
                event.preventDefault();
                showWarning('开发者工具已被禁用！');
                return false;
            }
        });
    }
    
    // 右键保护
    function initRightClickProtection() {
        document.addEventListener('contextmenu', function(event) {
            event.preventDefault();
            showWarning('右键菜单已被禁用！');
            return false;
        });
    }
    
    // 复制保护
    function initCopyProtection() {
        let copyCount = 0;
        
        document.addEventListener('copy', function(event) {
            const selection = window.getSelection();
            const text = selection.toString();
            
            if (text.length > config.maxCopyLength) {
                event.preventDefault();
                showWarning(`单次最多只能复制${config.maxCopyLength}个字符！`);
                return false;
            }
            
            copyCount++;
            if (copyCount > config.maxCopyCount) {
                event.preventDefault();
                showWarning('复制次数过多，请稍后再试！');
                return false;
            }
            
            setTimeout(() => copyCount = 0, 60000);
        });
        
        document.addEventListener('cut', function(event) {
            event.preventDefault();
            showWarning('剪切功能已被禁用！');
            return false;
        });
        
        document.addEventListener('paste', function(event) {
            event.preventDefault();
            showWarning('粘贴功能已被禁用！');
            return false;
        });
    }
    
    // 源码保护
    function initSourceProtection() {
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.keyCode === 85) {
                event.preventDefault();
                showWarning('查看源码功能已被禁用！');
                return false;
            }
        });
    }
    
    // 图片保护
    function initImageProtection() {
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('img');
            images.forEach(function(img) {
                img.draggable = false;
                img.addEventListener('contextmenu', function(event) {
                    event.preventDefault();
                    showWarning('图片右键菜单已被禁用！');
                    return false;
                });
            });
        });
    }
    
    // 开发者工具检测
    function startDevToolsDetection() {
        let devtools = { open: false };
        
        function detectDevTools() {
            const threshold = 160;
            const widthThreshold = window.outerWidth - window.innerWidth > threshold;
            const heightThreshold = window.outerHeight - window.innerHeight > threshold;
            
            if (widthThreshold || heightThreshold) {
                if (!devtools.open) {
                    devtools.open = true;
                    handleDevToolsOpen();
                }
            } else {
                devtools.open = false;
            }
        }
        
        function handleDevToolsOpen() {
            document.body.style.display = 'none';
            showWarning('检测到开发者工具已打开！请关闭后刷新页面。');
        }
        
        setInterval(detectDevTools, 1000);
    }
    
    // 显示警告信息
    function showWarning(message) {
        const warning = document.createElement('div');
        warning.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #ff4444;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            z-index: 10000;
            font-size: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            animation: slideIn 0.3s ease;
        `;
        warning.textContent = message;
        
        document.body.appendChild(warning);
        
        setTimeout(() => {
            warning.remove();
        }, 3000);
    }
    
    // 启动防护
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initProtection);
    } else {
        initProtection();
    }
})();
```

四、部署与维护

4.1 文件部署说明

4.1.1 HTML页面集成

文件位置：所有HTML页面的<head>标签内

添加方式：将防扒脚本放在<script>标签中

注意事项：确保在所有其他脚本之前加载

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页防扒技术完全指南</title>
    
    <!-- 防扒脚本 - 必须放在最前面 -->
    <script>
        // 这里粘贴完整的防扒脚本
    </script>
    
    <!-- 其他CSS和JavaScript文件 -->
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
```

注意事项：

1. 无法完全阻止：任何前端防护都可以被绕过

2. 影响用户体验：过度防护可能影响正常用户

3. 兼容性问题：某些功能在旧版浏览器中可能不工作

文章版权归作者所有，未经允许请勿转载。

THE END

网页防扒技术完全指南

一、基础防扒技术

1.1 屏蔽F12开发者工具

1.1.1 检测`F12`按键

1.1.2 检测开发者工具状态

1.2 禁用右键菜单

1.2.1 基础右键禁用

1.2.2 自定义右键菜单

1.3 防止复制粘贴

1.3.1 禁用复制功能

1.3.2 智能复制保护

二、高级防扒技术

2.1 源码保护

2.1.1 禁用查看源码

2.2 图片保护

2.2.1 禁用图片拖拽

三、综合防护方案

3.1 完整防扒脚本

四、部署与维护

4.1 文件部署说明

4.1.1 HTML页面集成

注意事项：

php开发漏洞探寻与渗透测试（1）

php后门实例以及防范（含实战）

现代前端开发中的性能优化策略：从理论到实践

Python 实现 IOC 容器的技巧

React组件开发最佳实践指南

Node.js微服务架构设计与实践

请登录后发表评论

近期文章

近期评论

归档

分类

网页防扒技术完全指南

一、基础防扒技术

1.1 屏蔽F12开发者工具

1.1.1 检测F12按键

1.1.2 检测开发者工具状态

1.2 禁用右键菜单

1.2.1 基础右键禁用

1.2.2 自定义右键菜单

1.3 防止复制粘贴

1.3.1 禁用复制功能

1.3.2 智能复制保护

二、高级防扒技术

2.1 源码保护

2.1.1 禁用查看源码

2.2 图片保护

2.2.1 禁用图片拖拽

三、综合防护方案

3.1 完整防扒脚本

四、部署与维护

4.1 文件部署说明

4.1.1 HTML页面集成

注意事项：

php开发漏洞探寻与渗透测试（1）

php后门实例以及防范（含实战）

现代前端开发中的性能优化策略：从理论到实践

Python 实现 IOC 容器的技巧

React组件开发最佳实践指南

Node.js微服务架构设计与实践

请登录后发表评论

近期文章

近期评论

归档

分类

1.1.1 检测`F12`按键