Отключить элемент проверки — DevTools на вашем веб-сайте

Веб-сайт можно создать с помощью простого HTML / CSS / Javascript. Когда вы публикуете, весь исходный код можно увидеть с помощью DevTools of Browser.

Что такое DevTools?

DevTools — отличный инструмент в руках разработчиков и дизайнеров, которым необходимо сделать процесс разработки более продуктивным и упростить отладку.

С Inspect Element в Chrome у вас больше возможностей, чем у традиционных веб-пользователей:

1. Просмотр и изменение DOM
2. Просмотр и стиль CSS
3. Отладка Javascript
4. Просмотр сетевой активности
5. Показать локальное хранилище, хранилище сеансов и т. д.
6. Оптимизация производительности веб-сайта
7. и т. д.…

Вы можете обнаружить, что DevTools может серьезно повысить вашу производительность.

Зачем нужно отключать Devtools?

DevTools эффективен для разработки, но опасен в производственной среде.
Любой может увидеть ваш исходный код, что означает, что он небезопасен. С DevTools хакер легко проверяет, редактирует и модифицирует ваш код.

Я получил доступ к администратору веб-сайта, изменив переменную `is_admin` на true

Кроме того, он может видеть, когда ваш сайт получает API (интерфейс прикладного программирования), и красть API_KEY или использовать информацию.

Решение

DevTools не может быть полностью закрыт. Но можно сделать его недоступным. Запуск DevTools следующими способами:

Щелкните правой кнопкой мыши ->
Ctrl + Shift + I (сочетание клавиш в DevTools)
F12 (сочетание клавиш в DevTools)
Ctrl + Shift + J (открыть панель консоли)
Ctrl + Shift + C (открытие панели "Элементы")
Ctrl + U (Просмотреть исходный код)

// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());
function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}
document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};

Ознакомьтесь с этим кодом Github.

Отключить элемент проверки — DevTools на вашем веб-сайте