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

Основное правило для защиты от XSS атака, это санитизировать всё что может прийти от пользователя, любой пользовательский вывод где в теории могут появится данные введенные руками.

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

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

Довольно частой проблемой стало появление атак через подключаемые пакеты 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. Второй способ безопасного хранение это в памяти браузера, пока страница не будет перезагружена, что конечно не круто для пользователей :).

Заключение

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

Читайте также
WildFly 30 готовится к использованию JDK 21
WildFly 30 готовится к использованию JDK 21
WildFly 30 готовится к использованию JDK 21

В релиз также включили новую возможность настройки параметра «max-read-page-bytes» в подсистеме messaging-activemq.

Gemini 1.5: новое поколение, уже доступно в Google Ai Studio
Gemini 1.5: новое поколение, уже доступно в Google Ai Studio
Gemini 1.5: новое поколение, уже доступно в Google Ai Studio

Новое поколение чата Gemini 1.5 уже доступно в Google AI Studio

Вышла Deta Space OS, которая управляется с помощью ИИ
Вышла Deta Space OS, которая управляется с помощью ИИ
Вышла Deta Space OS, которая управляется с помощью ИИ

Операционная система Deta Space OS для Интернета, которая управляется с помощью ИИ.

В PHP 8.3 появилась возможность типизации констант классов
В PHP 8.3 появилась возможность типизации констант классов
В PHP 8.3 появилась возможность типизации констант классов

В PHP 8.3 было выпущено обновление для серверного языка веб-скриптов. Была добавлена поддержка типизации констант классов, глубокого клонирования свойств, доступных только для чтения, а также были внесены дополнения в функции, связанные с генерацией случайных чисел.