Основные моменты для безопасности HTML и CSS

Если вы разработчик и пишете на HTML/CSS, вам нужно знать основные моменты, которые касаются безопасности. Кто-то может сказать, что HTML и CSS не могут быть объектом атаки злоумышленников, но с развитием веб-технологий у них для атаки появляются все больше возможностей. В сегодняшней статье мы рассмотрим самые важные моменты, на которые следует обратить внимание каждому разработчику. Они помогут следовать лучшим методикам безопасности и избежать уязвимостей.

 

Лучшие практики для безопасности

Тщательно проверяйте зависимости, используемые в вашем приложении

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

Детальнее: https://github.com/dxa4481/cssInjection

 

Выполняйте не только локальную проверку

Браузерная проверка пользовательского ввода (в теге <input>) становится все более мощной, а в HTML есть некоторые механизмы и свойства, которые могут быть очень полезны для создания первого базового уровня проверки. Но вы не можете полагаться только на проверку браузером пользовательского ввода. Вам также нужна проверка и на стороне сервера для чувствительных действий (аутентификация, очистка, валидация и т.д.).

Также никогда не доверяйте пользовательским данным. Это, пожалуй, самая важная вещь, которую вы можете сделать, чтобы предотвратить множество атак с использованием уязвимостей HTML/CSS. Слабая или отсутствующая очистка ввода может сделать ваше приложение уязвимым для XSS инъекций. Если вы используете пользовательский ввод для генерации HTML, JSON, CSS и т.д., используйте для этого надлежащие экранирующие функции.

 

Не используйте комментированный код на сайте

Старайтесь не использовать комментарии в коде на рабочем сайте. Довольно просто просмотреть такой код с помощью инспектора в браузере. Опасность здесь заключается в том, что закомментированный контент может содержать конфиденциальную информацию.

 

Используйте политику безопасности контента (CSP)

Каждый скрипт или виджет, который вы вставляете на свой сайт, является объектом атаки. Вы можете использовать Политику безопасности контента (CSP), чтобы защитить свое приложение от потенциальных атак, определив ресурсы, которые вы разрешаете/запрещаете загружать. Вы можете использовать nonce, чтобы переопределить ограничения в директивах для старого кода.

Детальнее: https://developer.mozilla.org/ru/docs/Web/HTTP/CSP

 

Будьте в курсе последних новостей о безопасности HTML

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

 

Безопасный HTML

Используйте тег rel="noopener noreferrer" для внешних ссылок

Когда вы нажимаете на ссылку с атрибутом target="_blank", новая вкладка/окно будет иметь доступ к объекту window.opener, который указывает на объект window первой страницы и который может быть изменен. Чтобы предотвратить это, добавьте атрибут rel="noopener", чтобы избежать передачи объекта window в новое окно. Атрибут rel="noreferrer" использовался в более старых браузерах, и выполнял ту же функцию. Атрибуты указывают на то, что при переходе по ссылке не должно быть утечки информации о реферере (источнике).

Детальнее: https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer

 

Не используйте статические идентификаторы (ID) в своих формах

Избегайте использования атрибутов «id» в формах (<form>).

Использование идентификаторов может вызвать проблемы со старыми браузерами. Не рекомендуется использовать идентификаторы в формах из-за опасности XSS (Cross-Site Scripting — «межсайтовый скриптинг»).

Детальнее: https://html5sec.org/#1

 

Помещайте фреймы iframe в песочницу

Плавающие фреймы тега iframe довольно популярны и требуются для многих виджетов, которые поставляются сторонними разработчиками. Чтобы убедиться, что они не могут сделать ничего вредного, рекомендуется установить для них ограничения. Старайтесь всегда использовать атрибут песочницы (sandbox) или дополнительные флаги, такие как allow-forms, allow-popups и т.д.

Детальнее: https://web.dev/articles/sandboxed-iframes?hl=ru

 

Безопасный CSS

Удалите неиспользуемые CSS стили

Исходный код может иногда скрывать полезные советы или, что еще хуже, конфиденциальные функции или данные. Мы часто думаем об удалении контента из HTML, но не нужно забывать и о CSS. Здесь вы найдете описание подходящего для очистки ненужных стилей инструмента.

 

Не скрывайте конфиденциальный контент с помощью CSS

Есть несколько способов скрыть контент в CSS. С помощью свойств display, opacity, visibility и transform вы легко сможете визуально скрыть содержимое своей страницы.

Но будьте осторожны с контентом, который вы скрываете. Вы должны убедиться, что он не содержит конфиденциальных данных или действий.

 

Не полагайтесь только на свойство pointer-events

Свойство pointer-events позволяет вам решить, какой элемент может быть целью событий мыши. Обычно указатели-события устанавливаются в pointer-events: none, чтобы отключить поведение элемента. Но в случае чувствительных действий (например, отправка формы и т.д.), блокировка действий должна быть реализована на стороне сервера.

Детальнее: https://developer.mozilla.org/ru/docs/Web/CSS/pointer-events

 

Проверьте свой код с помощью валидатора

Проверьте ваш HTML/CSS код с помощью валидатора. Вы также можете использовать такие инструменты, как Lighthouse, которые порекомендуют вам другие передовые практики разработки.

Детальнее:

https://developers.google.com/web/tools/lighthouse/

https://jigsaw.w3.org/css-validator/

https://validator.w3.org/

 

На сегодня все. Спасибо, что читаете нас!