Отключить вставку

Отключить вставку

Обойти эти надоедливые поля, которые мешают вставке текста

Однажды какому-то гению пришла в голову гениальная идея отключить вставку текста в поля пароля на новых страницах создания профиля. Упомянутый гений, вероятно, полагал, что принуждение пользователей к ручному вводу каждого символа их новых паролей заставит пользователей лучше запоминать свои пароли. Я уверен, что он думал, что это повысит безопасность сайта и снизит вероятность повторного использования пользователями своего любимого «p@$$w0rd123».

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

Для управления множеством онлайн-профилей я использую менеджер паролей. В рамках создания нового профиля приложение генерирует безопасный случайный пароль длиной от 20 до 64 символов, состоящий из прописных и строчных букв, цифр, пробелов и символов. Приложение доступно на каждом устройстве, которое у меня есть, и позволяет копировать и вставлять пароли в другие приложения или сайты. Идея состоит в том, что мне никогда не нужно будет вводить этот пароль. Последнее, что я хочу сделать, это вводить длинный пароль, символ за символом, на сенсорной клавиатуре телефона, делая ошибки по пути и рискуя заблокировать себя из своей учетной записи.

Поэтому, когда я снова столкнулся с этой неприятностью, я решил потратить несколько минут, чтобы выяснить, как обойти это поведение. Это довольно просто, и в большинстве случаев вы тоже можете это сделать. Все, что вам нужно, — это веб-браузер, включенные инструменты разработчика (Safari) и базовые знания JavaScript.

Вот форма, которую мне нужно было заполнить. Я удалил название сайта — не уверен, что они обрадуются этому посту 😊. Обратите внимание на заголовок «Все станет проще» прямо перед тем, как вас заставят ввести 20 символов:

Как обойти предотвращение вставки в форму

Ключевым фактом, который следует помнить, является то, что обработка событий в веб-форме полностью выполняется на стороне клиента (браузера) с помощью JavaScript. У вас есть доступ ко всем файлам JavaScript, загруженным вашим браузером вместе со страницей. И код читаемый, и изменяемый на лету.

Чтобы предотвратить вставку в текстовое поле, разработчик должен обработать событие «вставить» и предотвратить поведение по умолчанию, которое возникает при его запуске (а именно, текст вставляется). Итак, мы ищем шаблон кода, похожий на один из этих:

Итак, давайте откроем Инструменты разработчика и посмотрим на код нашей виновной формы. Нажмите любую комбинацию, чтобы вызвать инструменты разработчика в вашем браузере (‹Ctrl› + ‹Shift› + ‹i› в Windows, ‹Command› + ‹Shift› + ‹i› в Mac) или просто щелкните правой кнопкой мыши на странице и выберите « Осмотреть".

Нас интересует JavaScript, поэтому давайте переключимся на вкладку «Источники», выделим верхнюю часть дерева, которое появляется слева, и найдем во всех файлах слово «вставить»:

Рассматривайте только файлы с расширением «.js». В моем случае есть 6 вхождений «вставки» в 2 файлах JS. Щелчок по первому отобразит его источник на панели «Источники»:

Отображаемый исходный файл может выглядеть как одна строка перемешанных символов. Это потому, что он был «минифицирован» — процесс, который уменьшает размер файлов JS для более быстрой передачи по сети, а также делает их менее читаемыми для случайных наблюдателей. К счастью, инструменты разработчика помогают нам: нажмите кнопку «красивый шрифт» (выглядит как {} — выделено выше), и вы сможете прочитать исходный текст:

Как видите, строка 8915 — это определение функции «preventPaste», которая соответствует третьему шаблону, упомянутому выше. Отлично, мы определили виновника!
Теперь давайте добавим точку останова в строке 8916 — теле функции — чтобы убедиться, что наша функция перестает выполняться. Чтобы добавить точку останова, щелкните полосу слева от строки 8916. Это добавит к строке видимую стрелку:

Теперь давайте вставим текст в форму. Если все сделано правильно, выполнение кода остановится на нашей точке останова. Если нет, просто найдите следующее вхождение «вставки» и добавьте туда точку останова. Но скорее всего вы должны увидеть:

Отлично, теперь мы приостановили выполнение логики обработки, что нам делать дальше? Функция получает один параметр — «a» событие вставки. У него есть свойства и функции. Затем он вызывает функцию «preventDefault» для «a», чтобы предотвратить поведение по умолчанию — вставку текста. Итак, все, что нам нужно сделать, это заменить «a» фиктивным объектом, у которого есть функция «preventDefault», которая ничего не делает. Перейдите на вкладку «Консоль» внизу, введите следующее и нажмите «Ввод»:

Теперь нажмите кнопку «Воспроизвести» в правом верхнем углу, чтобы возобновить выполнение скрипта. Если все сделано правильно, ваш пароль вставлен в поле:

Возможно, это не самый простой и быстрый способ обойти отключение вставки; но это означает, что я могу вставлять более длинные пароли без опечаток.
Поскольку шаблон кода вполне предсказуем, я развлекаюсь мыслью о создании расширения Chrome, которое будет внедрять мой фиктивный объект в любой обработчик события «вставить». Я надеюсь, что к тому времени, когда я на самом деле доберусь до этого, этот анти-паттерн анти-вставки станет делом прошлого.