阻止别人随便查看或调试网页源码

要保护网页代码或核心逻辑,之前那些 “禁用右键、拦 F12” 的方法都只是 “表面功夫”—— 懂行的人很容易绕过去。真正更有效的保护,核心思路是 “让代码难读懂”“让敏感逻辑不在前端暴露”。

优化后的代码主要作用是通过前端限制减少普通用户对网页的调试和非授权操作,同时尽量平衡防护效果和用户体验,具体功能拆解如下:

1. 精准区分设备类型(手机 / 电脑)

  • 作用:只对电脑端生效限制,手机端不做额外限制(因为手机端调试概率低,且频繁限制会影响体验)。
  • 实现方式
    • 先通过 “屏幕宽度<768px” 快速判断手机(覆盖新机型);
    • 再结合浏览器标识(UA)中的手机品牌 / 系统关键词二次验证,减少误判。

2. 限制调试相关的快捷键

  • 作用:阻止用户通过键盘快捷键打开开发者工具、查看源码或保存网页。
  • 具体限制的快捷键
    • F12 键(直接打开开发者工具);
    • Ctrl+U(查看网页源代码);
    • Ctrl+S(保存当前网页到本地);
    • Ctrl+Shift+I(打开开发者工具的另一种快捷键);
    • Ctrl+Shift+J(直接打开开发者工具的控制台);
    • Shift+F10(模拟右键菜单的快捷键,避免绕开右键限制)。

3. 合理限制右键菜单

  • 作用:减少通过右键菜单调试网页的可能,但保留用户正常操作(如复制文本)。
  • 实现方式
    • 允许文本输入框、文本域、可编辑区域(如文章段落)的右键功能(方便用户复制、粘贴内容);
    • 禁止其他区域(如空白处、图片)的右键菜单(避免通过 “检查”“查看源码” 等选项调试)。

4. 智能检测窗口异常变化(仅电脑端)

  • 作用:识别可能的 “通过开发者工具调试” 行为(打开开发者工具常导致窗口尺寸变化),但减少对正常用户的干扰。
  • 优化后的逻辑
    • 窗口变化时,延迟 300 毫秒判断(给用户正常调整窗口的时间,如拉伸浏览器);
    • 只有尺寸变化超过 10px(排除微小波动)才提示 “可能存在调试行为”;
    • 提示后更新窗口尺寸记录,避免后续正常调整重复提示。

总结

代码的核心是通过 “堵常见调试入口”+“减少误判”,在不严重影响普通用户体验的前提下,增加非专业用户调试网页的难度。但需注意:这只是前端基础防护,无法阻止有经验的用户通过浏览器菜单等方式绕过,真正的安全仍需依赖后端(如敏感逻辑放服务器、数据加密等)。

使用注意:

  • 仍需明确:这只是 “前端基础防护”,懂技术的用户仍可通过浏览器菜单(如 “更多工具→开发者工具”)绕过,无法替代后端安全(如敏感逻辑放后端、数据加密)。
  • 若不需要 “窗口变化提示”,可删除 “4. 优化窗口变化检测” 部分代码,进一步减少对用户的干扰。

 

<!-- 自定义代码 -->
<script type="text/javascript">
// 【兼容核心】1. 工具函数:统一获取窗口尺寸(适配现代浏览器+旧IE)
function getWindowSize() {
var width, height;
if (window.innerWidth) {
// 现代浏览器(Chrome/Firefox/Safari/Edge)
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientWidth) {
// 旧IE标准模式(IE8+)
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
// 旧IE怪异模式(兜底)
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return { width: width, height: height };
}

// 【兼容核心】2. 工具函数:统一绑定事件(适配addEventListener/attachEvent)
function addEvent(element, event, handler) {
if (element.addEventListener) {
// 现代浏览器
element.addEventListener(event, handler);
} else if (element.attachEvent) {
// 旧IE(IE8及以下,需加"on"前缀)
element.attachEvent('on' + event, handler);
} else {
// 极端情况兜底(避免事件覆盖)
element['on' + event] = handler;
}
}

// 3. 优化手机端判断(兼容UA+设备平台,减少新设备误判)
function is_mobile() {
// 先通过屏幕宽度初步判断(手机多<768px)
var size = getWindowSize();
if (size.width < 768) {
return true;
}
// 再结合UA+设备平台精准匹配(覆盖新手机型号)
var u = navigator.userAgent || "";
var platform = navigator.platform || ""; // 补充设备平台(如iPhone/Android)
var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
// 同时匹配UA和平台,减少误判
return regex_match.test(u) || regex_match.test(platform);
}

// 4. 合并并补全键盘限制(兼容不同浏览器事件/键码)
addEvent(document, 'keydown', function(e) {
e = e || window.event; // 兼容事件对象获取
var keyCode = e.keyCode || e.which; // 兼容键码获取(部分浏览器用e.which)
// 兼容组合键判断(旧IE不支持getModifierState,优先用原生属性)
var isCtrl = e.ctrlKey || (e.getModifierState && e.getModifierState('Control'));
var isShift = e.shiftKey || (e.getModifierState && e.getModifierState('Shift'));

// 禁止F12(打开开发者工具)
if (keyCode === 123) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false); // 兼容阻止默认行为
return false;
}

// 禁止Ctrl+U(查看源码)、Ctrl+S(保存网页)
if (isCtrl && (keyCode === 85 || keyCode === 83)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}

// 禁止Ctrl+Shift+I(开发者工具)、Ctrl+Shift+J(控制台)
if (isCtrl && isShift && (keyCode === 73 || keyCode === 74)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}

// 禁止Shift+F10(模拟右键菜单)
if (isShift && keyCode === 121) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
});

// 5. 优化右键限制(兼容事件目标获取,保留正常操作)
addEvent(window, 'contextmenu', function(e) {
e = e || window.event;
var target = e.target || e.srcElement; // 兼容事件目标(旧IE用e.srcElement)

// 允许文本输入框、文本域、可编辑区域右键(正常复制/粘贴)
var allowRightClick =
target.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' ||
(target.isContentEditable && target.isContentEditable === 'true'); // 兼容可编辑属性判断

// 允许区域正常显示右键,其他区域禁用
if (!allowRightClick) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
return false;
}
return true;
});

// 6. 优化窗口变化检测(仅电脑端,兼容尺寸获取+延迟判断)
if (!is_mobile()) {
var size = getWindowSize();
var originHeight = size.height; // 初始高度(兼容获取方式)
var originWidth = size.width; // 初始宽度
var resizeTimer = null; // 延迟计时器(避免频繁触发)

addEvent(window, 'resize', function() {
clearTimeout(resizeTimer); // 清除上一次延迟
// 300ms延迟判断(给正常调整窗口的时间)
resizeTimer = setTimeout(function() {
var currentSize = getWindowSize();
// 尺寸变化超过10px才提示(排除微小波动)
if (
Math.abs(currentSize.height - originHeight) > 10 ||
Math.abs(currentSize.width - originWidth) > 10
) {
alert('检测到窗口尺寸异常变化,可能存在调试行为');
// 更新初始尺寸(避免后续正常调整重复提示)
originHeight = currentSize.height;
originWidth = currentSize.width;
}
}, 300);
});
}
</script>

<style>
/* 此处保留原样式区域,若无需额外样式可空着,也可根据需求添加页面样式 */
</style>
<!-- end 自定义代码 -->

 

从 “更简洁、更灵活、更低误判率” 的角度,还能进一步优化。以下是具体方向和优化后的代码,核心是减少冗余、增强可控性、提升用户体验

一、优化方向说明

  1. 模块化拆分:把功能拆成独立函数,方便维护和开关(比如想临时关闭某个限制时,只需注释一行)。
  2. 可配置化:把关键参数(如窗口变化阈值、延迟时间)做成变量,方便根据需求调整,不用改逻辑。
  3. 减少误判:进一步优化窗口变化检测(比如排除浏览器缩放导致的尺寸变化)。
  4. 移除冗余判断:简化部分兼容逻辑(如现代浏览器已占绝对主流,可弱化旧 IE 兼容但保留核心支持)。

二、进一步优化后的代码

<script type="text/javascript">
// ==================== 配置参数(可按需修改) ====================
const config = {
mobileMaxWidth: 768, // 手机端最大宽度(超过此值视为电脑端)
resizeDelay: 300, // 窗口变化检测延迟(毫秒)
sizeChangeThreshold: 15, // 触发提示的尺寸变化阈值(像素,增大减少误判)
enableKeyboardLimit: true, // 是否启用键盘快捷键限制
enableRightClickLimit: true, // 是否启用右键限制
enableResizeCheck: true // 是否启用窗口变化检测
};

// ==================== 工具函数(复用逻辑) ====================
// 1. 获取窗口尺寸(兼容所有浏览器)
function getWindowSize() {
if (window.innerWidth) {
return { width: window.innerWidth, height: window.innerHeight };
}
const doc = document.documentElement || document.body;
return { width: doc.clientWidth, height: doc.clientHeight };
}

// 2. 绑定事件(兼容现代浏览器和旧IE)
function addEvent(el, event, handler) {
if (el.addEventListener) el.addEventListener(event, handler);
else if (el.attachEvent) el.attachEvent('on' + event, handler);
else el['on' + event] = handler;
}

// 3. 阻止默认事件(兼容所有浏览器)
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
return false;
}

// ==================== 核心功能(模块化) ====================
// 1. 判断设备类型(手机/电脑)
function isMobile() {
const { width } = getWindowSize();
if (width <= config.mobileMaxWidth) return true;

const u = navigator.userAgent || '';
const platform = navigator.platform || '';
const mobileRegex = /(nokia|iphone|android|motorola|huawei|samsung|xiaomi|oppo|vivo|blackberry|phone|mobile)/i;
return mobileRegex.test(u) || mobileRegex.test(platform);
}

// 2. 键盘快捷键限制(可通过config开关)
function setupKeyboardLimit() {
if (!config.enableKeyboardLimit) return;

addEvent(document, 'keydown', (e) => {
e = e || window.event;
const keyCode = e.keyCode || e.which;
const isCtrl = e.ctrlKey || (e.getModifierState && e.getModifierState('Control'));
const isShift = e.shiftKey || (e.getModifierState && e.getModifierState('Shift'));

// 禁止F12、Ctrl+U、Ctrl+S、Ctrl+Shift+I/J、Shift+F10
const isRestricted =
keyCode === 123 || // F12
(isCtrl && (keyCode === 85 || keyCode === 83)) || // Ctrl+U/S
(isCtrl && isShift && (keyCode === 73 || keyCode === 74)) || // Ctrl+Shift+I/J
(isShift && keyCode === 121); // Shift+F10

if (isRestricted) return preventDefault(e);
});
}

// 3. 右键菜单限制(可通过config开关)
function setupRightClickLimit() {
if (!config.enableRightClickLimit) return;

addEvent(window, 'contextmenu', (e) => {
e = e || window.event;
const target = e.target || e.srcElement;

// 允许右键的区域:输入框、文本域、可编辑区域
const allow =
target.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' ||
(target.isContentEditable && target.isContentEditable === 'true');

if (!allow) return preventDefault(e);
return true;
});
}

// 4. 窗口变化检测(仅电脑端,可通过config开关)
function setupResizeCheck() {
if (!config.enableResizeCheck || isMobile()) return;

let { width: originWidth, height: originHeight } = getWindowSize();
let resizeTimer = null;

addEvent(window, 'resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const { width: currentWidth, height: currentHeight } = getWindowSize();
// 排除浏览器缩放导致的尺寸变化(缩放时宽高同比变化)
const scaleX = currentWidth / originWidth;
const scaleY = currentHeight / originHeight;
const isScaling = Math.abs(scaleX - scaleY) < 0.01; // 缩放时宽高比例接近

if (!isScaling && (
Math.abs(currentWidth - originWidth) > config.sizeChangeThreshold ||
Math.abs(currentHeight - originHeight) > config.sizeChangeThreshold
)) {
alert('检测到窗口异常变化,可能存在调试行为');
originWidth = currentWidth;
originHeight = currentHeight;
}
}, config.resizeDelay);
});
}

// ==================== 初始化(启动所有功能) ====================
function init() {
setupKeyboardLimit();
setupRightClickLimit();
setupResizeCheck();
}

// 页面加载完成后初始化(避免DOM未就绪导致的问题)
addEvent(window, 'load', init);
</script>

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息