OWASP: методы безопасности фронтенда

Основные способы атак для фронденда есть в статье.

Следить за подключаемыми пакетами и библиотеками.

Довольно частой проблемой стало появление атак через подключаемые пакеты NPM или используя CDN с библиотеками. Как правило такие вредные скрипты пытаются как можно больше нанести ущерба от показа простой рекламы до удаления всей ОС. (в случае установки глобальных пакетов с доступом через рут).

Но если вы установили проверенную и надежную библиотеку/фреймворк/, это не значит, что вы не получите проблемы с безопасностью. Любая вставка исполняемого кода в формате HTML приведет к уязвимости и поэтому старайтесь не использовать такие вставки. Как правило, если вы используете ESLint, то он предупредит о возможных проблемах в нативном JS, так и в Vue.js, React.js и др.

Установка заголовков безопасности

Многое сейчас по безопасности делает браузер, но необходимо убедится, что вы используете заголовки для вашего сайта.

CSP (Content-Security-Policy)

Устанавливается в качестве HTTP header заголовка и в нем можно перечислить, откуда можно взять контент для исполнения на вашей странице. Например туда можно добавить ваши CDN или иные библиотеки которым вы доверяете.

// default-src для перечисления разрешённых источников по умолчанию
// self - указывает на текущий домен
Content-Security-Policy: default-src 'self' *.trusted.ru

Кроме всего, заголовок обладает и другими полезными фишками, поэтому посмотрите статью на хабре.

HSTS (Strict Transport Security)

Это заголовок для политики безопасности который запрещает использовать сайт без HTTPS. В заголовке устанавливается age параметр и затем, браузер все HTTP-запросы использует через HTTPS.

Strict-Transport-Security: max-age=30534000;

SOP (Same origin policy)

Политика единого источника — для использования ресурсов только со своего домена, при чем исключительно по uri схеме: http, домен и порт. Флаг запретит использовать с поддоменов или другому http соединению.

httpOnly

Чтобы обезопасить хранимые данные в куках, их можно закрыть флагом httpOnly и куки не будут доступны на стороне клиента (запись/чтение). Например, там можно хранить токены типа JWT. Второй способ безопасного хранение это в памяти браузера, пока страница не будет перезагружена, что конечно не круто для пользователей :).

Заключение

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