可以删除“检查元素”吗?

44

是否有可能通过Javascript删除或禁用Chrome应用程序中的“检查元素”上下文菜单?

我在几个论坛上搜索过,但没有明确的答案。


1
你是指右键菜单吗? - David Snabel
@David:是的,David和我刚刚通过使用oncontextmenu="return false"找到了解决方案。 - Kim Honoridez
你做不到!!! Ctrl+Mayus+I 可以随时打开Chrome的开发者工具!!! - Danyel Cabello
2
是的,通过制作Web应用程序,用户将始终能够查看源代码。您应该选择本机桌面应用程序。 - 255kb
3
当你说他们不希望能够看到源代码时,是指生成网页的代码吗?因为要向他们展示任何内容,你必须发送HTML。你可以选择使用最少的JavaScript,这样所有东西都在服务器上生成,对他们来说将是一个黑盒子(他们无法看到发生了什么),但是要给他们一个网页,你必须发送HTML(除非你想使用Flash或Java Applet这样的插件,但即使那些也可以被反向工程、反编译等)。 - childofsoong
显示剩余3条评论
18个回答

78

我有一个页面的要求。在该页面上,我想阻止用户执行以下操作:

  • 右键单击
  • F12
  • Ctrl + Shift + I
  • Ctrl + Shift + J
  • Ctrl + Shift + C
  • Ctrl + U

为此,我进行了谷歌搜索,最终找到了以下链接:

http://andrewstutorials.blogspot.in/2014/03/disable-ways-to-open-inspect-element-in.html

我用Chrome和Firefox测试过了。对我的需求来说,它工作正常。

右键点击

 <body oncontextmenu="return false">

document.onkeydown = (e) => {
    if (e.key == 123) {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'I') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'C') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'J') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.key == 'U') {
        e.preventDefault();
    }
};

11
以上方法不适用于鼠标和键盘,但如果我进入开发者工具并从那里检查呢? - Shaan Ansari
7
还有一种方法——用户可以点击右上角的“...”菜单,选择“更多工具”,再点击“开发者工具”。 - YJiqdAdwTifMxGR

23

可以通过以下JavaScript代码防止用户通过右键单击打开上下文菜单:

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
通过监听contextmenu事件并阻止默认行为——"显示菜单",菜单将不会被显示出来。 但用户仍然可以通过控制台(例如在Chrome中按下F12)查看代码。
Result:

通过监听contextmenu事件并阻止默认行为——"显示菜单",菜单将不会被显示出来。 但用户仍然可以通过控制台(例如在Chrome中按下F12)查看代码。


1
但这只会阻止右键点击。有没有办法阻止键盘快捷键? - Naresh Kukreti
3
请不要这样做。这对于网络可访问性非常有害。即使这是问题所要求的,我担心人们会将此片段投入生产。 - Lucien Greathouse

14

你不能这样做。

网页上的所有内容都由浏览器渲染,它们希望网站能够在其上正常工作,否则用户会对它们感到厌恶。

因此,浏览器希望通过类似代码检查器的工具向 Web 开发人员公开每个部分的更低级别的细节。

您可以尝试使用键盘事件来阻止用户进入菜单。像这样:

// Disable inspect element
$(document).bind("contextmenu",function(e) {
  e.preventDefault();
});
$(document).keydown(function(e){
  if(e.which === 123){
    return false;
}
});

但是如果用户想要查看代码,他会用另一种方式来做。他只需要多花点时间。

简短版:如果你不想让人们在浏览器中获取某些内容,那么你 一开始就不应该将其发送到他们的浏览器


7

这有点可能。

  1. 首先,使用ramakrishna的解决方案来阻止devtools快捷键。

  2. devtools-detect添加到您的网站中。 这里是他的github上devtools.js文件的快速链接。

  3. 最后,添加以下内容:

if (devtools.isOpen) {


    setInterval(() => {

        var $all = document.querySelectorAll("*");

        for (var each of $all) {
            each.classList.add(`asdjaljsdliasud8ausdijaisdluasdjasildahjdsk${Math.random()}`);
        }
        

    }, 5);
}

或者也许是这样:

if (devtools.isOpen) {
while (true) {
    console.log("access denied")
}
}

这将基本上使DOM超载,并使其无法通过devtools进行交互。

此外,这只是一个简单的例子;你可以使用更复杂的方式来过载DOM,而不仅仅是添加类。

我认为它不会完美地工作,但应该足以提供至少一些额外的“安全”层。


那个工具只是检查有效的浏览器窗口大小是否与可能的最大窗口大小不同。当开发者工具首选项在新窗口中打开工具时,它根本不起作用。 - undefined

5

  

 "put this script before ending your body tag"

 <script> 
      document.addEventListener('contextmenu', event=> event.preventDefault()); 
      document.onkeydown = function(e) { 
      if(event.keyCode == 123) { 
      return false; 
      } 
      if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){ 
      return false; 
      } 
      if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){ 
      return false; 
      } 
      if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){ 
      return false; 
      } 
      } 
      </script> 


3
是的,有一些上述脚本可以成功禁用其中一个,但无法关闭另一个,因此以下是上述内容的总结。
document.addEventListener('contextmenu',(e)=>{
    e.preventDefault();
  }
  );
  document.onkeydown = function(e) {
  if(event.keyCode == 123) {
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
     return false;
  }
  if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
     return false;
  }
}

使用这个,你就可以安全了,现在没有人能够窃取你的代码或者使用JS来破解你的数据库!


除此之外,像Burp Suite这样的工具现在也是一种趋势。编辑:我知道在回答发布之前它就已经存在了。 - Fighter178

3
虽然不是答案,但Chrome肯定有一种方法可以做到这一点,我似乎在进行A/B测试,因为我的工作帐户无法在Gmail中进行检查,而我的个人帐户可以。我已搜索可能控制此功能的标签或HTTP头,但没有什么特别突出的内容。

Gmail blocking Inspect option


4
这是组织(您的管理员)控制账户,而不是网站。网站无法控制您是否可以检查元素。 - Reality
但是仍然有可能! - RwkY

2

不行。最接近的方法是捕获右键单击,防止其打开上下文菜单,但是精明的用户仍然可以通过键盘组合键或菜单选项访问它,从而失去了意义。这是浏览器的功能,因此您在页面中所做的任何事情都无法击败它(除非在他们的计算机上安装恶意软件)。


覆盖键盘击键 :D - David Snabel
2
此外,您可以随时打开 chrome://inspect - Xan

2
将以下内容添加到您页面的html标签中:
<html oncontextmenu="return false">

2
document.addEventListener('keydown', function() {
    if (event.keyCode == 123) {
      alert("You Can not Do This!");
      return false;
    } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
      alert("You Can not Do This!");
      return false;
    } else if (event.ctrlKey && event.keyCode == 85) {
      alert("You Can not Do This!");
      return false;
    }
  }, false);
  
  if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
      alert("You Can not Do This!");
      e.preventDefault();
    }, false);
  } else {
    document.attachEvent('oncontextmenu', function() {
      alert("You Can not Do This!");
      window.event.returnValue = false;
    });
  }

不许F12,不许右键

你好 我使用这些代码。 愉快地玩耍♥


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接