浏览器F12（开发者工具DevTools）的屏蔽调用与绕过屏蔽

浏览器F12（开发者⼯具DevTools）的屏蔽调⽤与绕过屏蔽浏览器的开发者⼯具（DevTools），可通过热键F12、热键Ctrl+Shift+I、右键菜单等⽅法进⾏打开。（这是开发者⼯具的全貌）防-屏蔽开发者⼯具的调⽤既然知道DevTools的打开⽅式会通过热键、右键菜单，那么最基础的，可以通过屏蔽热键、右键菜单的⽅式进⾏反调试。屏蔽热键：onkeydownfu=nction(){functionban(){window.event.cancelBubbletr;ue=window.event.returnValuefal;se=window.event.keyCode=0;returnfalse;}if(window.event&&(window.event.keyCode===123||window.event.which===123)){ban();}if(window.event&&window.event.ctrlKey&&window.event.shiftKey&&window.event.keyCode==73){ban();}}ViewCode通过在keydown上添加⼀个EventListener实现热键屏蔽。屏蔽右键菜单：oncontextmenufunc(=tionr){eturnfalse;}同理的，在contextmenu添加⼀个EventListener实现右键菜单屏蔽。攻-绕过热键屏蔽和右键菜单屏蔽打开开发者⼯具，不仅仅可以通过组合键以及右键菜单进⾏打开，还可以通过⼯具栏进⾏打开。⼯具栏打开绕过屏蔽：⽆论⽹页的JS如何屏蔽，也是⽆法屏蔽从外部调⽤的开发者⼯具。防-反制⼯具栏打开的绕过⽅法的确，⽹页的JS⽆法屏蔽从⽹页外调⽤的开发者⼯具，但仍然可以通过开发者⼯具打开时的特征来判断开发者⼯具是否被打开，然后通过⽆限debugger来让打开的开发者⼯具也⽆法正常使⽤。监控window.visualViewport的⾼度与宽度变化并⽆限debugger：varwidth=window.visualViewport.width;varheight=window.visualViewport.height;setInterval(function(){varnew_width=window.visualViewport.width;varnew_height=window.visualViewport.height;if(new_width<width||new_height<height){eval('!function(){debugger}()')}},800)ViewCodeDevTools检测（Chrome）并⽆限debugger：varelement=newImage();Object.defineProperty(element,'id',{get:function(){debugger;}});setInterval(function(){console.log(element)},800);ViewCode这样，可以使得开发者⼯具⽆限debugger⽽⽆法正常使⽤。攻-绕过⽆限debugger上⼀个防御⼿段中，最关键的技术是⽆限debugger，⽽这⼀⼿段并⾮⽆法绕过，在我之前的⽂章中，就有⽅法来绕过⽆限debugger。那么，如果不采⽤⽆限debugger，是否可以反制这个绕过⼿段呢？防-反制绕过⽆限debugger当检测到开发者⼯具打开，直接关闭页⾯，那么绕过⼿段将失效，毕竟最难组织的，是⾃毁。页⾯⾃毁：varelement=newImage();Object.defineProperty(element,'id',{get:function(){window.opener=null;window.open('','_self');window.close();}});console.log(element);ViewCode⽬前这个似乎只能配合DevTool检测⽅法，如果配合监控window.visualViewport，则会直接⾃毁（没有打开开发者⼯具也是），原因不明。攻-绕过页⾯⾃毁防守的⼿段哪怕再丰富，归根到底也是利⽤了js来执⾏，⽽js属于前端代码，在我看来，前端即是⽤户可以随意更改的地⽅，因此，只要让js⽆法执⾏，或者篡改前端，把这些js语句删掉，那么再厉害的js语句也⽆济于事。在这⾥，我们使⽤抓包软件如burpsuite，直接篡改前端，即可绕过⼀切防守措施。结尾攻与防永远是不会停⽌的，到最后，似乎攻击者使⽤了抓包软件，就能彻底打败防守者，但事实真的是如此吗？如果防守者将JS代码进⾏⾼强度的混淆、加密，使