Основы безопасности: XSS-атаки и экранирование строк на javascript

Этой небольшой заметкой я хочу открыть серию статей, посвященных основам безопасности веб-проектов. Полагаю, что эти материалы помогут читателям понемногу осваивать азы защиты своих приложений.

В этих статьях я постараюсь обобщить мой опыт и опыт других программистов, с которыми приходилось работать. Начну с самого простого: экранирования спецсимволов в строках для предотвращения XSS-атак

В чем смысл XSS-атак?

XSS-атака - это довольно неприятная штука, которая позволяет выполнить нехороший javascript-код в браузере ничего не подозревающих посетителей Вашего сайта. Речь идет не о злобных хакерах, которые намеренно создают сайты с вредоносным кодом, а о слабой защите Ваших собственных проектов, которая позволит тем самым хакерам внедрить в него XSS-ку.

Один из способов провернуть это недоброе дело заключается в передаче вредоносной строки на Ваш сервер с последующим выводом оной строки в браузере для остальных пользователей. Например, злоумышленник зарегистрируетя на Вашем форуме, а в качестве имени укажет вредную строку, которую мы забудем проверить и которая выполнится на всех страничках сайта, где только встретится это имя. Как именно она подействует, зависит от умений и фантазий злоумышленника. Самое безобидное - это средиректить на какой-нибудь рекламный сайт. Впрочем, мы говорим не о том, чем может навредить XSS-ка, а как от них защититься.

Как защищаться от XSS-атак

Главное правило для защиты от XSS-атак - это никогда не доверять данным, введенным пользователями. И именно для этого и есть правило - всегда экранировать пользовательские данные. Делать это нужно и на сервере тоже, но сейчас мы говорим о клиентской части, предполагая, что нехороший код уже пролез в нашу БД.

Технически реализация экранирования заключается в замене определенных символов их безопасными аналогами - html-кодами. Как правило, считаются опасными и подлежат замене 5 символов - это кавычки, знаки больше/меньше и амперсанд, то есть
`&`, `<`, `>`, `"`, `'`

Экранирование строк в underscore или lodash

Если Вы пользуетесь одной из этих библиотек, то там уже все придумано до нас. Функция _.escape(string) экранирует все опасные символы и вернет строку, пригодную для вывода в браузер. underscore дополнительно экранирует еще и прямой слэш /, но мне кажется это излишним.

В шаблонах же underscore и lodash для экранирования используется символ -.
Напишите в шаблоне <%- name %> и получите экранированную строку из переменной name.

Функция экранирования на чистом javascript

Не всегда у нас есть возможность и желание подключать отдельную библиотеку, поэтому полезно будет знать, как экранировать строки на нативном javascript. Функция обработки строк с помощью replace и простой регулярки выглядит так

    function escape(string) {
        var htmlEscapes = {
            '&': 'Безопасный аналог амперсанд',
            '<': 'Безопасный аналог <',
            '>': 'Безопасный аналог >',
            '"': 'Безопасный аналог "',
            "'": 'Безопасный аналог ''
        };
    
        return string.replace(/[&<>"']/g, function(match) {
            return htmlEscapes[match];
        });
    };

Modx Revo в сочетании с парсером кода настолько суров, что не дает мне показать эти самые html-коды, а считает, что нужно рисовать их человеческие аналоги. Поэтому смотрите рабочий пример с нужными кодами или на jsfiddle или в этом файле https://webdevkin.ru/examples/security/escape_javascript.js

А теперь, что мы делаем в этой функции. В объекте htmlEscapes мы запишем все символы, подлежащие экранированию, и их безопасные аналоги. А в replace произведем саму замену. Если Вам захочется дополнительно экранировать какие-то еще символы, Вы легко добавите их в htmlEscapes и в регулярку в replace.

На этом все, скоро выйдут еще статьи на тему базовой защиты веб-приложений. А пока оставляйте свои пожелания и вопросы в комментариях!