Detekce otevření DevTools může být užitečná pro různé účely – od debugování až po pokus o bezpečnostní opatření. Existuje několik způsobů, jak zjišťovat, že uživatel otevřel vývojářské nástroje.

Jsou i možnosti, jak se otevření vývojářských nástrojů snažit zabránit.

Žádný způsob není 100%. Pokud nechcete, aby někdo viděl váš zdrojový kód, nedávejte ho na internet.

Detekce velikosti okna a její změny

Vychází se z úvahy, že otevření DevTools obvykle změní rozměry viewportu. Tato metoda funguje na principu rozdílu mezi vnější a vnitřní velikostí okna prohlížeče.

Jak funguje

• window.outerWidth – celková šířka okna prohlížeče včetně panelů
• window.innerWidth – šířka viditelné oblasti stránky
• Rozdíl větší než např. 160px obvykle znamená otevřené DevTools

Výhodou je nízká režie této detekce. Nevýhodou je nefunkčnost při DevTools v samostatném okně a falešně positivní vyhodnocení při otevření různých postranních panelů, pokud jimi prohlížeč disponuje.

Měření času console.log

Tato metoda využívá skutečnost, že při otevřených DevTools trvá zpracování console.log déle než při zavřených.

Čas jde měřit přes Performance: now() metodu.

Problém je, že na rychlém hardwaru bude i volání s otevřenými DevTools hodně rychlé. Naopak při přetížení systému může být pomalé i volání bez DevTools.

Detekce pomocí debugger

Použití debugger statementu. Tato metoda využívá skutečnost, že debugger statement způsobí pausu v kódu pouze při otevřených DevTools.

Při zavřených DevTools se debugger ignoruje (rychlé vykonání).

Nevýhodou je, že při tomto použití je debugger při otevřených vývojářských nástrojích dost otravný. Ale jde to vypnout:

Kombinovaný přístup

Nejspolehlivější asi bude kombinace více metod. Je ale otázka, jestli to za to stojí.

Zablokování otevření DevTools

Kromě detekce otevřených DevTools můžete také zkusit zabránit jejich otevření. Existuje několik způsobů, jak omezit přístup k vývojářským nástrojům.

Nejčastější způsob otevření DevTools je pomocí klávesových zkratek. Můžete je zachytit a zabránit jejich spuštění:

document.addEventListener('keydown', function(event) {
    // F12
    if (event.keyCode === 123) {
        event.preventDefault();
        return false;
    }
    
    // Ctrl+Shift+I (Windows/Linux) nebo Cmd+Option+I (Mac)
    if (event.ctrlKey && event.shiftKey && event.keyCode === 73) {
        event.preventDefault();
        return false;
    }
    
    // Ctrl+Shift+J (Windows/Linux) nebo Cmd+Option+J (Mac)
    if (event.ctrlKey && event.shiftKey && event.keyCode === 74) {
        event.preventDefault();
        return false;
    }
    
    // Ctrl+U (View Source)
    if (event.ctrlKey && event.keyCode === 85) {
        event.preventDefault();
        return false;
    }
    
    // Ctrl+Shift+C (Elements inspector)
    if (event.ctrlKey && event.shiftKey && event.keyCode === 67) {
        event.preventDefault();
        return false;
    }
});

// Zabránit pravému kliknutí
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    return false;
});

Omezení zablokování

Je důležité si uvědomit, že zablokování DevTools má svá omezení:

• Nespolehlivost: Zkušení uživatelé mohou blokování obcházet.
• Uživatelská zkušenost: Může narušit legitimní používání.

Obfuskace kódu

Obfuskace kódu se snaží ztížit jeho čtení a modifikaci. Vzhledem k tomu, že z podstaty webu se všechny skripty a styly stahují k uživateli, má k nim vždy přístup.

Pro ochranu kódu lze použít nějaký nástroj pro obfuskaci: JavaScript obfuscator (online).

Příklad obfuskovaného kódu:

(function(_0x394301,_0x1aff2f){var _0x3cc9b5=_0xfda4,_0x4301eb=_0x394301();while(!![]){try{var _0x2eca77=-parseInt(_0x3cc9b5(0x191))/0x1+-parseInt(_0x3cc9b5(0x189))/0x2*(parseInt(_0x3cc9b5(0x190))/0x3)+-parseInt(_0x3cc9b5(0x18c))/0x4*(-parseInt(_0x3cc9b5(0x193))/0x5)+parseInt(_0x3cc9b5(0x18d))/0x6*(parseInt(_0x3cc9b5(0x192))/0x7)+parseInt(_0x3cc9b5(0x18b))/0x8+-parseInt(_0x3cc9b5(0x18e))/0x9*(-parseInt(_0x3cc9b5(0x188))/0xa)+-parseInt(_0x3cc9b5(0x18a))/0xb;if(_0x2eca77===_0x1aff2f)break;else _0x4301eb['push'](_0x4301eb['shift']());}catch(_0x35e1ed){_0x4301eb['push'](_0x4301eb['shift']());}}}(_0x195e,0xb12ed));function _0x195e(){var _0x493f9d=['26iVFDSU','5049627aPRImx','3813168pzeJjs','131872kqQiHw','269898aqDVfc','379521QRuwaA','log','327909QoSSmj','192311uHIQmu','175ybtpoA','60uohBYN','190qAZQCv'];_0x195e=function(){return _0x493f9d;};return _0x195e();}function _0xfda4(_0x5b891a,_0x428281){var _0x195e96=_0x195e();return _0xfda4=function(_0xfda4c9,_0x507e09){_0xfda4c9=_0xfda4c9-0x188;var _0x4464db=_0x195e96[_0xfda4c9];return _0x4464db;},_0xfda4(_0x5b891a,_0x428281);}function hi(){var _0x154fa1=_0xfda4;console[_0x154fa1(0x18f)]('Hello\x20World!');}hi();

Problém v dnešní době je, že lze kód relativně snadno deobfuskovat pomocí AI:

Závěr

• Žádná metoda není 100% spolehlivá.
• Výkon: Časté kontroly mohou ovlivnit výkon.
• Je-li něco potřeba opravdu tajit, řešením je to přesunout na stranu serveru.

Odkazy jinam

• Stack Overflow - Find out whether Chrome console is open