Автозамена до вставки в input || Autocorrect before inserting into the input

I faced this problem when i paste some text to input and an AJAX request is executed immediately. To prevent XSS need to replace special characters before inserting. If you use replacement during pasting then the AJAX request sends the original string. Therefore we need to replace before inserting and we have to change standard input behavior.

-

Столкнулся с такой проблемой, что при вставке в инпут сразу же срабатывал ajax запрос и текст отправлялся на сервер. Что бы предотвратить XSS, нужно заменить спецсимволы. Но, если использовать автозамену при вставке, то в запрос уходит изначальная строка, то есть, значение меняется после того как будет присвоено инпуту. Что бы сделать автозамену до вставки, нужно перехватить вставку текста до того, как она произойдет в инпуте. Для этого нужно изменить поведение инпута.

document.querySelector('#input').addEventListener('paste', function (e) {
e.preventDefault(); // Отключаем стандартное поведение вставки | disable standard behavior
// Получаем данные из буфера обмена | get data from clipboard
let pasteData = (e.clipboardData || window.clipboardData).getData('text');
// Применяем фильтрацию или замену | filtering
let sanitizedData = sanitizeInput(pasteData);
// Вставляем очищенные данные | paste sanitazed data
document.execCommand('insertText', false, sanitizedData);
});

1. Перехват вставки текста

Мы добавляем обработчик события paste к инпуту.

При срабатывании события вставки (paste), стандартное поведение вставки отключается с помощью e.preventDefault().

Из буфера обмена извлекаются данные с помощью (e.clipboardData || window.clipboardData).getData('text').

Эти данные затем передаются в функцию sanitizeInput, которая фильтрует или очищает их от нежелательных символов и тегов.

Очищенные данные вставляются в инпут с помощью document.execCommand('insertText', false, sanitizedData).

Что делает этот код:

Отключает стандартное поведение вставки: Таким образом, данные не вставляются в инпут до того, как мы их обработаем.
Извлекает данные из буфера обмена: Используем e.clipboardData.getData('text') для получения текста, который пользователь пытается вставить.

Фильтрует данные: Функция sanitizeInput очищает текст от потенциально опасного содержимого.

Вставляет очищенные данные: document.execCommand('insertText', false, sanitizedData) вставляет очищенные данные в инпут.

2. Обработка изменений текста в поле

Мы добавляем обработчик события input к <input>.

Это событие срабатывает каждый раз, когда изменяется значение инпута (например, при вставке текста или ручном вводе).
Значение инпута передается в функцию sanitizeInput, чтобы фильтровать нежелательные символы и теги.

Если значение инпута изменилось после фильтрации (то есть, если очищенное значение отличается от текущего значения инпута), мы обновляем значение инпута с очищенным текстом.

1. Intercepting Text Paste

We add a paste event handler to the input.

When the paste event is triggered, the default paste behavior is disabled using e.preventDefault().

Data is extracted from the clipboard using (e.clipboardData || window.clipboardData).getData('text').

This data is then passed to the sanitizeInput function, which filters or cleans it from unwanted characters and tags.

The sanitized data is inserted into the input using document.execCommand('insertText', false, sanitizedData).

Disables the default paste behavior: This way, data is not inserted into the input until we process it.

Extracts data from the clipboard: We use e.clipboardData.getData('text') to get the text that the user is trying to paste.

Filters the data: The sanitizeInput function cleans the text of potentially harmful content.

Inserts the sanitized data: document.execCommand('insertText', false, sanitizedData) inserts the cleaned data into the input.

2. Handling Text Changes in the Field

We add an input event handler to the input.

This event is triggered every time the input value changes (for example, when pasting text or entering it manually).

The input value is passed to the sanitizeInput function to filter out unwanted characters and tags.

If the input value has changed after filtering (i.e., if the sanitized value differs from the current input value), we update the input's value with the cleaned text.

document.querySelector('#view2ddrdata_search').addEventListener('input', function (e) {
 let input = e.target;
 let sanitizedValue = sanitizeInput(input.value);
// Если значение изменилось после фильтрации | if value was changed after filtering
 if (input.value !== sanitizedValue) {
 input.value = sanitizedValue;
 }
});

Что делает этот код:

Обрабатывает изменение значения инпута: Событие input срабатывает, когда значение инпута изменяется.
Фильтрует значение: Значение инпута передается в sanitizeInput для удаления нежелательного содержимого.
Обновляет значение инпута: Если после фильтрации значение изменилось, инпут обновляется с очищенным текстом.

What this code does:

Handles input value changes: The input event is triggered when the input value changes.

Filters the value: The input value is passed to sanitizeInput to remove unwanted content.

Updates the input value: If the value has changed after filtering, the input is updated with the sanitized text.