Перейти к основному содержимому

[Easy] Безопасность на стороне клиента

1. Можете ли вы объяснить, что такое CSP (Content Security Policy)?​

Можете ли вы объяснить, что такое CSP (Content Security Policy)?

По сути, CSP — это механизм, повышающий безопасность веб-страниц. Путём настройки HTTP-заголовков он ограничивает источники, из которых может загружаться контент страницы (белый список), предотвращая кражу пользовательских данных злоумышленниками через внедрённые скрипты.

С точки зрения фронтенда, для предотвращения XSS (Cross-Site Scripting) атак обычно используются современные фреймворки, так как они предоставляют встроенные механизмы защиты. Например, JSX в React автоматически экранирует HTML, а Vue при использовании привязки {{ data }} также автоматически экранирует HTML-теги.

Хотя возможности фронтенда в этой области ограничены, всё же есть некоторые оптимизации:

  1. Для форм, принимающих пользовательский ввод, можно проверять специальные символы для предотвращения атак (хотя сложно покрыть все сценарии). Более распространённой практикой является ограничение длины ввода для контроля клиентского контента или ограничение типов ввода.
  2. При ссылках на внешние ресурсы предпочитайте HTTPS URL вместо HTTP URL.
  3. Для статических сайтов можно ограничить контент через мета-тег следующим образом:
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';"
/>
  • default-src 'self': По умолчанию разрешать загрузку ресурсов только из того же источника (того же домена).
  • img-src https://*: Разрешать загрузку изображений только по HTTPS.
  • child-src 'none': Запретить встраивание любых внешних дочерних ресурсов, таких как <iframe>.

2. Что такое XSS (Cross-site scripting) атака?​

Что такое XSS (Cross-Site Scripting) атака?

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

Предотвращение Stored XSS​

Злоумышленники могут намеренно внедрять вредоносный HTML или скрипты в базу данных через формы комментариев. Помимо серверного экранирования, современные фронтенд-фреймворки, такие как JSX в React и синтаксис шаблонов {{ data }} в Vue, также выполняют экранирование для снижения риска XSS-атак.

Предотвращение Reflected XSS​

Избегайте использования innerHTML для манипуляций с DOM, так как он может выполнять HTML-теги. Рекомендуется использовать textContent вместо этого.

Предотвращение DOM-based XSS​

В принципе, следует избегать ситуаций, когда пользователи напрямую вставляют HTML на страницу. Если это требуется конкретным сценарием, фреймворки предоставляют директивы для помощи — например, dangerouslySetInnerHTML в React и v-html в Vue — которые помогают автоматически предотвращать XSS. Если требуется нативный JavaScript, предпочитайте использование textContent, createElement и setAttribute для манипуляций с DOM.