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

Заключение

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

Читайте также
15 сайтов, чтобы сэкономить время CSS-разработчику
15 сайтов, чтобы сэкономить время CSS-разработчику
15 сайтов, чтобы сэкономить время CSS-разработчику

Собрали 15 сайтов, которые помогут сэкономить много времени и расширить опыт разработки CSS.

18 репозиториев GitHub, которые должен знать каждый разработчик
18 репозиториев GitHub, которые должен знать каждый разработчик
18 репозиториев GitHub, которые должен знать каждый разработчик

Рассказываем о 18 репозиториях GitHub, которые обязательно нужно занести в закладки. Они помогут вам на пути к кодингу.

Deno 1.38: улучшили HTML-документацию и горячую замену модулей
Deno 1.38: улучшили HTML-документацию и горячую замену модулей
Deno 1.38: улучшили HTML-документацию и горячую замену модулей

В новой версии Deno появилось несколько интересных фич: документация HTML, совместимость с Node.js, горячая замена модулей, функция менеджера пакетов и еще парочка дополнительных функций.

Dev новости:  Nuxt 3.9, Vue.js 3.4, анализируем React Server Components
Dev новости: Nuxt 3.9, Vue.js 3.4, анализируем React Server Components
Dev новости: Nuxt 3.9, Vue.js 3.4, анализируем React Server Components

Улучшения в Vue.js, анонс новых фич для версии 3.9 в Nuxt. Bun, Copilot и небольшой анализ react серверных компонентов.