Как Facebook отключает встроенные инструменты разработчика в браузере?

Технические методы обнаружения и блокировки DevTools

Facebook (и многие другие крупные сайты) использует комбинацию нескольких техник для обнаружения открытых инструментов разработчика. Ни один метод не дает 100% гарантии, но их комбинация создает серьезные препятствия для злоумышленников.

1. Обнаружение через разницу размеров окна

Самый популярный и надежный метод — измерение разницы между window.outerHeight и window.innerHeight. Когда DevTools открыты как отдельная панель (docked), они уменьшают область просмотра:

function detectDevTools() {
    const threshold = 160; // Порог в пикселях
    const diff = window.outerHeight - window.innerHeight;
    
    if (diff > threshold || diff < 0) {
        console.warn('Обнаружены инструменты разработчика!');
        // Действия при обнаружении
    }
}

// Проверка каждые 500 мс
setInterval(detectDevTools, 500);

2. Перехват console.log и других методов

Можно переопределить стандартные методы консоли, чтобы они не выводили информацию или вели себя иначе:

// Сохраняем оригинальные методы
const originalLog = console.log;
const originalWarn = console.warn;
const originalError = console.error;

// Переопределяем
console.log = function() {
    // Не выводим ничего или выводим только в определенных условиях
    if (window.__debugAllowed) {
        originalLog.apply(console, arguments);
    }
};

console.warn = function() {
    // Показываем предупреждение вместо лога
    originalWarn.call(console, 'Доступ запрещен');
};

// Восстановление через замыкание
console.__restore = function() {
    console.log = originalLog;
};

3. Обнаружение через отладчик (debugger)

Использование бесконечного цикла с debugger — эффективный метод, который заставляет DevTools зависнуть:

function freezeDebugger() {
    (function() {
        const start = Date.now();
        const interval = setInterval(() => {
            if (Date.now() - start > 1000) {
                clearInterval(interval);
                return;
            }
            debugger; // Точка останова, которая будет вызываться постоянно
        }, 100);
    })();
}

// Запускаем при подозрении на открытую консоль
window.addEventListener('devtoolschange', freezeDebugger);

4. Обнаружение через element.innerHTML

Хитрый метод, основанный на том, что браузеры по-разному обрабатывают HTML при открытых DevTools:

function detectViaElement() {
    const element = document.createElement('div');
    Object.defineProperty(element, 'id', {
        get: function() {
            throw new Error('DevTools detected!');
        }
    });
    
    try {
        console.log('%c', element);
    } catch (e) {
        // DevTools открыты
        console.warn('Обнаружены инструменты разработчика');
    }
}

5. Комбинированный подход Facebook

Facebook использует многоуровневую защиту:

• Мониторинг размеров окна — каждые 100 мс проверяется разница высот
• Перехват console методов — все вызовы логируются и анализируются
• Динамическая загрузка кода — критически важные функции загружаются через eval() с проверкой окружения
• Обфускация — весь JavaScript минифицирован и обфусцирован, что затрудняет анализ
• Анти-отладка — вставка точек debugger в случайных местах кода

Важное замечание

Все эти методы можно обойти, но они создают значительные трудности для случайных пользователей и начинающих хакеров. Полностью защитить клиентский код невозможно — любой JavaScript выполняется в окружении пользователя.

// Service Worker для блокировки нежелательных скриптов
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('app-cache').then(function(cache) {
            return cache.addAll([
                '/app.js',
                '/styles.css'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    // Блокируем загрузку скриптов из консоли
    if (event.request.url.includes('chrome-extension://')) {
        event.respondWith(new Response('', { status: 403 }));
    }
});

// На сервере
Content-Security-Policy: 
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval';
    // 'unsafe-eval' разрешает eval(), но блокирует инлайн-скрипты из консоли