禁止 HTML 页面打开 F12 开发者工具

1. 添加 HTTP 头

在服务器响应头中添加:

X-Frame-Options: deny复制

这可以阻止在 iframe 中打开页面,防止开发者工具操控页面。

2. 添加 meta 标签

在 HTML head 中添加:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />复制

这可以禁用页面缩放,防止查看页面源代码。

3. 使用 JavaScript 监听快捷键

添加代码:

// onkeydown 
// 禁止键盘F12键
 
document.onkeydown = function (e) {
 
   if (e.keyCode == 123) {
 
     return false
 
   }
 
}
// 禁用右键菜单
 
document.oncontextmenu = function () {
 
   return false
 
}
 
 
 
 
// addEventListener
// 禁用右键菜单
document.addEventListener('contextmenu',function(e){
 
   e.preventDefault();  // 阻止默认事件
 
});
 
 
// 禁止键盘F12键
 
document.addEventListener('keydown',function(e){
 
  if(e.key == 'F12'){
 
     e.preventDefault(); // 如果按下键F12,阻止事件
 
   }
 
});复制

这可以通过 JS 阻止快捷键打开 F12 开发者工具和右键查看元素。

4. 使用混淆器

工具混淆代码

运行 Vue CLI 3 打包后的代码,其实是可读的,如果要加强防护可以使用混淆器等工具对代码进行混淆,使其不易阅读从而达到防护效果。