为什么要禁用F12

为什么要禁用F12(开发人员调试)

说明

  • 我们需要了解F12调试工具的工作原理及其攻击方式。F12调试工具是Chrome等现代浏览器提供的前端开发调试利器，它提供了Elements、Console、Sources等多个功能面板，允许用户查看和修改HTML、CSS、JavaScript等代码。对于开发者来说，这是一个非常有用的工具，可以帮助他们快速定位和修复网页问题。然而，这也为攻击者提供了可乘之机。攻击者可以通过修改网页代码，篡改页面内容，注入恶意脚本，甚至窃取用户敏感信息，从而实施各种网络攻击。

补充

本站主要是因为有群友被恶意镜像网站的原因，不得不防范这种情况

防范F12调试工具的攻击策略(代码)

1. 对网页代码进行混淆和加密

通过对JavaScript等前端代码进行混淆和加密，可以增加攻击者理解和修改代码的难度。代码混淆可以通过改变变量名、函数名、控制流等方式实现，使得代码难以阅读和理解。而加密则可以将代码转化为一种只有特定密钥才能解密的形式，进一步保护代码的安全。这样，即使攻击者打开了F12调试工具，也难以对代码进行有效的修改和攻击。

2. 使用内容安全策略(CSP)

内容安全策略是一种强大的安全机制，可以帮助检测和缓解跨站脚本攻击(XSS)和数据注入攻击等安全威胁。通过配置CSP，我们可以限制浏览器能够执行哪些脚本和加载哪些资源。为了防范F12调试工具的攻击，我们可以在CSP中设置debugger关键字为禁用。这样，任何试图调用debugger语句的脚本都将被阻止执行，从而有效阻止攻击者利用F12调试工具进行攻击。

不过需要注意的是，CSP是一种强大的安全机制，应该谨慎使用。不正确地配置CSP可能导致您的网站或应用程序无法正常工作。

3. 三种通过js方法来阻止使用F12调试工具(JavaScript)

禁用 F12 键和其他调试快捷键

  • 禁用右键菜单
1
2
3
4
// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
  • Ctrl+Shift+I (Chrome调试工具快捷键)
1
2
3
4
5
6
// Ctrl+Shift+I (Chrome调试工具快捷键)
if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i' || e.keyCode === 73)) {
  e.preventDefault();
  window.location.href = 'https://segmentfault.com/a/1190000044700556';
  return false;
}

  • Ctrl+Shift+J (Chrome控制台快捷键)

    1
    2
    3
    4
    5
    // Ctrl+Shift+J (Chrome控制台快捷键)
    if (e.ctrlKey && e.shiftKey && (e.key === 'J' || e.key === 'j' || e.keyCode === 74)) {
      e.preventDefault();
      window.location.href = 'https://segmentfault.com/a/1190000044700556';
      return false;

  • Ctrl+Shift+C (Chrome检查元素快捷键)

    1
    2
    3
    4
    5
    if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.key === 'c' || e.keyCode === 67)) {
      e.preventDefault();
      window.location.href = 'https://segmentfault.com/a/1190000044700556';
      return false;
    }

禁用开发者工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
setInterval(function() {
  // 检测开发者工具是否打开
  const devtools = /./;
  devtools.toString = function() {
    window.location.href = 'https://segmentfault.com/a/1190000044700556';
  }
  console.log('%c', devtools);
}, 1000);

// 检测 Firebug
if (window.console && window.console.firebug) {
  window.location.href = 'https://segmentfault.com/a/1190000044700556';
}

// 检测控制台是否打开
window.addEventListener('devtoolschange', function(e) {
  if (e.detail.open) {
    window.location.href = 'https://segmentfault.com/a/1190000044700556';
  }
});

三种debugger的方法

  • 基础禁止调试代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      //基础禁止调试代码
    (() => {
      function ban() {
        setInterval(() => {
          debugger;
        }, 50);
      }
      try {
        ban();
      } catch (err) { }
    })();

  • 禁止断点的对策

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 禁止断点的对策
    (() => {
      function ban() {
        setInterval(() => { debugger; }, 50);
      }
      try {
        ban();
      } catch (err) { }
    })();

  • 加密debgger(被调试时创建临时js并阻止调试)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //  加密debgger
    (() => {
      function ban() {
        setInterval(() => {
          Function('debugger')();
        }, 50);
      }
      try {
        ban();
      } catch (err) { }
    })();