XSS защита

XSS (Cross-Site Scripting) — это уязвимость веб-приложений, которая позволяет злоумышленнику внедрять вредоносный JavaScript-код на страницы, просматриваемые другими пользователями. XSS может приводить к краже сессий, подделке запросов, перенаправлению на вредоносные сайты и другим атакам.

Основные типы XSS:

  • Reflected XSS — вредоносный скрипт передаётся через URL или форму и немедленно выполняется на стороне пользователя.
  • Stored XSS — скрипт сохраняется на сервере (например, в базе данных) и выполняется при загрузке страницы.
  • DOM-based XSS — уязвимость возникает из-за неправильной работы с DOM на клиенте, без участия сервера.

Подходы к защите в приложениях на Quasar

Quasar построен поверх Vue.js, что даёт ряд встроенных механизмов защиты, но требует внимательного подхода при работе с динамическим контентом.

Использование директивы v-html с осторожностью

Директива v-html позволяет вставлять HTML-код напрямую в шаблон. Это самый частый источник XSS. Прямое использование v-html с непроверенным вводом крайне опасно. Пример потенциально уязвимого кода:

<template>
  <div v-html="userInput"></div>
</template>

Если userInput приходит от пользователя, в него можно внедрить скрипт. Защитный подход — очистка входных данных перед вставкой. Для этого можно использовать библиотеки, например DOMPurify:

import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      rawInput: '',
      sanitizedInput: ''
    }
  },
  watch: {
    rawInput(newVal) {
      this.sanitizedInput = DOMPurify.sanitize(newVal);
    }
  }
}

И вставка безопасного контента:

<div v-html="sanitizedInput"></div>

Экранирование данных в шаблонах

Vue и, соответственно, Quasar, по умолчанию экранируют данные, вставляемые через двойные фигурные скобки {{ }}. Это защищает от XSS без дополнительных действий:

<p>{{ userInput }}</p>

Даже если userInput содержит <script>alert('XSS')</script>, браузер покажет текст, а скрипт не выполнится.

Безопасная работа с компонентами Quasar

Компоненты Quasar, такие как QInput, QForm, QBtn, сами по себе не уязвимы к XSS при стандартном использовании. Однако опасность возникает при обработке пользовательского ввода:

  • QInput: проверка и фильтрация значений перед отправкой на сервер.
  • QSelect, QOptionGroup: данные, приходящие из внешних источников, должны проходить валидацию.
  • QTable: при динамической вставке данных из базы обязательно использовать экранирование или DOMPurify для HTML-колонок.

Политика Content Security Policy (CSP)

Для дополнительной защиты рекомендуется использовать заголовок CSP, который ограничивает выполнение скриптов:

Content-Security-Policy: default-src 'self'; script-src 'self';

CSP позволяет:

  • Запретить выполнение inline-скриптов.
  • Ограничить источники внешних скриптов.
  • Снизить последствия возможного XSS.

Валидация и фильтрация на стороне сервера

Даже при безопасной фронтенд-практике серверная фильтрация обязательна. Примеры:

  • Удаление тегов <script> и атрибутов on* в текстовых полях.
  • Ограничение длины и допустимых символов.
  • Использование безопасных библиотек для работы с HTML (DOMPurify, bleach).

Автоматизация защиты при маршрутизации

Quasar использует Vue Router, и XSS может возникать через параметры маршрута. Примеры мер:

  • Проверка params и query перед использованием в шаблоне.
  • Использование encodeURIComponent для формирования URL.
  • Избегание динамического вставления HTML на основе параметров маршрута.

Практический пример безопасного отображения пользовательского контента

<template>
  <q-card>
    <q-card-section>
      <h6>Комментарии пользователей</h6>
      <div v-for="comment in safeComments" :key="comment.id">
        <p>{{ comment.author }}: {{ comment.text }}</p>
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      comments: [
        { id: 1, author: 'Alice', text: '<script>alert(1)</script>Hello' },
        { id: 2, author: 'Bob', text: 'Hi there!' }
      ]
    };
  },
  computed: {
    safeComments() {
      return this.comments.map(c => ({
        ...c,
        text: DOMPurify.sanitize(c.text)
      }));
    }
  }
};
</script>

В этом примере все потенциально опасные скрипты удаляются, но текст остаётся читаемым для пользователя.

Выводы по XSS защите в Quasar

  • Не использовать v-html с непроверенными данными без очистки.
  • Пользоваться экранированием данных через стандартные шаблоны Vue.
  • Применять DOMPurify для безопасного отображения HTML.
  • Использовать CSP и серверную валидацию.
  • Следить за безопасностью при работе с динамическими маршрутами и компонентами Quasar.

Такой подход обеспечивает комплексную защиту от большинства XSS-атак в современных приложениях на Quasar.

Оглавление