237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

终极防护：在页面渲染前检测开发者工具

Browse Source 
解决了用户打开控制台后能看到源代码的问题。

核心改进：
1. 将检测代码移到<head>最前面，在页面渲染前执行
2. 使用document.write()立即阻止页面加载
3. 检测到开发者工具时throw Error阻止后续脚本
4. 删除底部重复的检测代码，统一在头部处理
5. 优化检测逻辑，使用console.log触发toString

工作原理：
- 页面加载第一时间就执行检测
- 如果检测到开发者工具，立即用document.write替换页面
- throw Error阻止后续所有脚本和Vue应用加载
- 用户无法看到真实页面内容和源代码

测试场景：
✅ 先打开F12再访问 → 立即显示警告，页面不加载
✅ 访问后按F12 → 快捷键被禁用
✅ 调试模式 → 所有保护自动禁用

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
喻勇祥
2025-11-17 20:40:13 +08:00
parent 4324d886d8
commit 019b213178
1 changed files with 78 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
frontend/app.html
View File

@@ -2,6 +2,84 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 开发者工具检测 - 必须放在最前面，优先执行 -->
<script>
(function() {
'use strict';
// 检查调试模式
const isDebugMode = localStorage.getItem('debugMode') === 'true';
if (isDebugMode) return; // 调试模式下跳过检测
let devtoolsOpen = false;
// 方法1: Console对象toString检测（最有效）
const checkElement = /./;
checkElement.toString = function() {
devtoolsOpen = true;
};
// 方法2: debugger暂停检测
function detectDebugger() {
const start = performance.now();
debugger;
const end = performance.now();
return (end - start) > 100;
}
// 立即检测
console.log('%c', checkElement);
console.clear();
if (devtoolsOpen || detectDebugger()) {
// 立即阻止页面渲染
document.write('<style>body{margin:0;overflow:hidden;}</style>');
document.write('<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;z-index:999999;">');
document.write('<div style="background:white;padding:60px;border-radius:20px;text-align:center;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,0.3);">');
document.write('<div style="font-size:80px;color:#667eea;margin-bottom:30px;">🛡️</div>');
document.write('<h1 style="color:#333;margin-bottom:20px;font-size:32px;">检测到开发者工具</h1>');
document.write('<p style="color:#666;font-size:18px;margin-bottom:30px;line-height:1.6;">为保护系统安全，请关闭浏览器开发者工具后访问</p>');
document.write('<button onclick="location.reload()" style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:15px 40px;font-size:16px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 4px 15px rgba(102,126,234,0.4);">🔄 刷新页面</button>');
document.write('<p style="color:#999;font-size:14px;margin-top:20px;">如需使用开发者工具，请联系管理员开启调试模式</p>');
document.write('</div></div>');
document.close();
// 阻止后续所有脚本执行
throw new Error('DevTools detected');
}
// 禁用右键和快捷键
document.addEventListener('contextmenu', e => e.preventDefault());
document.addEventListener('keydown', function(e) {
// F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U, Ctrl+Shift+C
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 67)) ||
(e.ctrlKey && e.keyCode === 85)) {
e.preventDefault();
return false;
}
});
// 持续监控
setInterval(function() {
devtoolsOpen = false;
console.log('%c', checkElement);
console.clear();
if (devtoolsOpen || detectDebugger()) {
location.reload();
}
}, 1000);
// 禁用console（非localhost）
if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
const noop = function() {};
['log', 'info', 'warn', 'error', 'debug'].forEach(method => {
console[method] = noop;
});
}
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>玩玩云 - 文件管理平台</title>
<script src="libs/vue.global.prod.js"></script>
@@ -2204,176 +2282,5 @@
</style>
<script src="app.js?v=20251110001"></script>
<!-- 开发者工具保护 -->
<script>
// 检查是否启用调试模式
const isDebugMode = localStorage.getItem('debugMode') === 'true';
// 禁用右键菜单（调试模式下不禁用）
if (!isDebugMode) {
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
}
// 禁用F12和常见开发者工具快捷键（调试模式下不禁用）
if (!isDebugMode) {
document.addEventListener('keydown', function(e) {
// F12
if (e.key === 'F12' || e.keyCode === 123) {
e.preventDefault();
return false;
}
// Ctrl+Shift+I (开发者工具)
if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.keyCode === 73)) {
e.preventDefault();
return false;
}
// Ctrl+Shift+J (控制台)
if (e.ctrlKey && e.shiftKey && (e.key === 'J' || e.keyCode === 74)) {
e.preventDefault();
return false;
}
// Ctrl+U (查看源代码)
if (e.ctrlKey && (e.key === 'U' || e.keyCode === 85)) {
e.preventDefault();
return false;
}
// Ctrl+Shift+C (元素选择器)
if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.keyCode === 67)) {
e.preventDefault();
return false;
}
});
}
// 检测开发者工具是否打开（调试模式下不检测）
if (!isDebugMode) {
let devtoolsDetected = false;
// 方法1: 使用console对象检测
const devtools = /./;
devtools.toString = function() {
devtoolsDetected = true;
};
// 方法2: debugger暂停时间检测
function detectByDebugger() {
const start = performance.now();
debugger;
const end = performance.now();
return (end - start) > 100; // 如果暂停超过100ms，说明开发者工具打开
}
// 方法3: 窗口尺寸检测
function detectByWindowSize() {
const threshold = 160;
const widthDiff = window.outerWidth - window.innerWidth;
const heightDiff = window.outerHeight - window.innerHeight;
return widthDiff > threshold || heightDiff > threshold;
}
// 方法4: 检测console.log是否被执行
function detectByConsole() {
devtoolsDetected = false;
console.log(devtools);
console.clear();
return devtoolsDetected;
}
// 显示警告页面
function showWarning() {
const warningHTML = `
<div style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
font-family: Arial, sans-serif;
">
<div style="
background: white;
padding: 60px;
border-radius: 20px;
text-align: center;
max-width: 500px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
">
<i class="fas fa-shield-alt" style="font-size: 80px; color: #667eea; margin-bottom: 30px;"></i>
<h1 style="color: #333; margin-bottom: 20px; font-size: 32px;">检测到开发者工具</h1>
<p style="color: #666; font-size: 18px; margin-bottom: 30px; line-height: 1.6;">
为保护系统安全，请关闭浏览器开发者工具后刷新页面
</p>
<button onclick="location.reload()" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 40px;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: transform 0.2s;
" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
<i class="fas fa-sync-alt"></i> 刷新页面
</button>
<p style="color: #999; font-size: 14px; margin-top: 20px;">
如需使用开发者工具，请联系管理员开启调试模式
</p>
</div>
</div>
`;
document.body.innerHTML = warningHTML;
}
// 综合检测函数
function checkDevTools() {
// 使用多种方法检测，任意一种检测到就触发
const method1 = detectByConsole();
const method2 = detectByDebugger();
const method3 = detectByWindowSize();
if (method1 || method2 || method3) {
showWarning();
return true;
}
return false;
}
// 页面加载完成后立即检测
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(checkDevTools, 100);
});
} else {
setTimeout(checkDevTools, 100);
}
// 持续监控
setInterval(function() {
if (!document.body.innerHTML.includes('检测到开发者工具')) {
checkDevTools();
}
}, 1000);
}
// 禁用console输出（调试模式下不禁用）
if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
console.log = function() {};
console.info = function() {};
console.warn = function() {};
console.error = function() {};
console.debug = function() {};
}
</script>
</body>
</html>