Элементы проверки Chrome стали отличным инструментом в руках разработчиков и дизайнеров, поскольку они должны сделать процесс разработки более продуктивным и облегчить отладку.
С помощью Inspect Element в Chrome у вас больше возможностей, чем у традиционных веб-пользователей.
Вот список того, что вы можете сделать.
- Просмотр и изменение DOM
- Просмотр и изменение стиля страницы (CSS)
- Отладка JavaScript
- Просмотр сообщений и запуск JavaScript в консоли
- Оптимизировать скорость веб-сайта
- Проверить сетевую активность
- Более…
Список может показаться бесконечным, но поездки вы ловите.
Процесс разработки / производства приложения может быть утомительным, но с четким пониманием всех вкладок в окне проверки вы можете обнаружить, что DevTools может серьезно повысить вашу производительность.
С большой властью приходит большая ответственность
- Том Драгоценный
Запустить DevTool в Chrome довольно просто, и в нем есть несколько ярлыков.
- Щелкните правой кнопкой мыши - ›Проверить
- Ctrl + Shift + I
- Ctrl + Shift + J
- Ctrl + Shift + C
- F12
Зачем вам отключать все, что вы можете сделать с помощью Chrome DevTool? Поделюсь 2 сценариями
- Вы создали приложение с контролем доступа с логикой, что если x user is_admin, кнопка должна быть активной, иначе кнопка отключена, но внутренняя проверка, когда запрос поступает раньше, не выполняется. действие запускается.
Недостаток: пользователь может легко проверить элемент кнопки, удалить отключение и нажать кнопку с активным состоянием, и все будет работать нормально.
- Вы интегрировали Paystacks в свой интернет-магазин, вы скопировали и вставили их быстрый код и заменили место API_KEY на свой код Api из панели управления Paystack.
Недостаток: пользователь может легко проверять, редактировать и изменять код, заменять ваш ключ API своим и по-прежнему платить эти деньги, на этот раз он работает, и Paystack вернул transaction_reference, показывая, что это сработало. но единственная проблема в том, что вам не заплатили, но вы обновляете столбец базы данных до 1, показывающего, что товар был куплен, без внутренней проверки, подтверждающей, что транзакция прошла, это, вероятно, со временем приведет к катастрофе.
В задачу этой статьи не входит рассказывать вам, как правильно кодировать или интегрировать API-интерфейсы, но до того, как случится эта катастрофа или вы начнете рефакторинг своих кодов для защиты от дешевых хаков, подобных этому, Chrome предлагает вам способ сказать: не показывать мои код никому
document.onkeydown = function(e) {
if(event.keyCode == 123) {
console.log('You cannot inspect Element');
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
console.log('You cannot inspect Element');
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
console.log('You cannot inspect Element');
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
console.log('You cannot inspect Element');
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
console.log('You cannot inspect Element');
return false;
}
}
// prevents right clicking
document.addEventListener('contextmenu', e => e.preventDefault());Заключительное замечание
Я полностью согласен с вами, если вы считаете, что эта статья бессмысленна, есть веб-скребки, или вы можете отключить JS, или оставить DevTool открытым, пока вы переходите на сайт ... Статьи должны показать практические советы а не решить угрозу безопасности
Вы можете ПРОДОЛЖИТЬ ОБСУЖДЕНИЕ этого твита…
Дайте мне знать, что вы думаете.
