js禁止鼠标右键弹窗和F12查看源代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>js禁止鼠标右键弹窗和F12查看源代码</title>
</head>
<body>
	<script>
		// 禁止右键弹窗
		document.oncontextmenu = function() {
		    return false;
		}
		// 禁止F12查看源代码
		document.onkeydown = function(e){
			if(e.code === 'F12'){
				return false;
			}
		}
	</script>
</body>
</html>

在前端开发中,有时为了防止用户直接查看源码或篡改页面内容,开发者可能会尝试禁用右键点击F12调试工具。然而需要指出的是,这种做法并不能真正意义上增强网站的安全性,因为经验丰富的用户仍然可以通过其他方式绕过这些限制。此外,过度干预用户的正常使用习惯也可能导致不佳的用户体验。 尽管如此,如果你确实有特殊需求想要实现这一目标,以下是几种常见的技术手段: ### 禁止右键菜单 通过JavaScript监听全局范围内的鼠标右键单击事件并阻止默认行为(即显示上下文菜单),可以有效地隐藏该功能。 ```javascript // 全局禁用右键 document.addEventListener('contextmenu', function (e) { e.preventDefault(); }); ``` 如果你想只针对某个具体的元素而不是整个页面,可以将上述代码稍作修改: ```javascript const element = document.getElementById('your-element-id'); element.addEventListener('contextmenu', function (event) { event.preventDefault(); // 阻止默认行为 }, false); ``` ### 检测并禁用 F12 开发者工具 虽然无法彻底屏蔽键盘快捷键本身,但你可以编写一段脚本来检测是否启用了开发者工具,并在这种情况下触发某些操作——比如警告信息或关闭当前窗口。 ```javascript (function() { let devtoolsOpen = false; window.onfocus = () => { if (!devtoolsOpen) console.log('Focus'); }; setInterval(() => { try { // 尝试访问不可达的对象会抛出异常当DevTools打开时 JSON.parse("_throw an error"); } catch(e) { const stackTrace = e.stack; if(stackTrace.includes("debugger")) return; // 正常错误忽略 if (stackTrace !== undefined && /at Object.InjectedScript\.wrapCallFrame/.test(stackTrace)) { devtoolsOpen = true; alert('您打开了开发者工具!'); location.reload(); // 或执行其他动作 setTimeout(() => devtoolsOpen=false, 500); } } if(debugger===undefined){} else{ debugger=void(0); // 清理残留引用 } }, 500); })(); ``` 请注意,这种方法并不是百分之百可靠,而且容易受到浏览器更新的影响而失效。另外值得注意的一点是,在一些隐私模式下,部分浏览器可能不会记录堆栈跟踪信息,因此可能导致误报。 ### 警告与建议 由于现代浏览器都允许用户轻松地绕开这类保护机制,所以依赖它们来保障敏感数据安全的做法并不明智。如果涉及到重要资料应该从服务器端着手,确保只有经过验证后的请求才能获得相应资源。同时也要考虑到这样做会影响一部分正常使用的用户群体。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值