禁止 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 打包后的代码,其实是可读的,如果要加强防护可以使用混淆器等工具对代码进行混淆,使其不易阅读从而达到防护效果。