Безопасная работа с v-html

Директива v-html используется для вставки HTML-кода напрямую в шаблон компонента Vue. Она позволяет рендерить динамически сформированный HTML, что особенно полезно при работе с содержимым, полученным с сервера, или при создании сложных интерфейсов в приложениях на базе Element Plus.

Однако использование v-html несёт потенциальные риски безопасности, связанные с XSS-атаками (Cross-Site Scripting). Любой HTML-код, который вставляется без фильтрации, может содержать вредоносные скрипты. Поэтому важно сочетать функциональность v-html с безопасными практиками.

Фильтрация и очистка HTML

Перед вставкой данных через v-html необходимо убедиться, что HTML безопасен. Наиболее распространённые подходы:

  1. Использование библиотек для очистки HTML

    Популярные библиотеки, такие как DOMPurify, позволяют безопасно очищать HTML, удаляя потенциально опасные элементы и атрибуты. Пример интеграции:

    import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      rawHtml: '
    Безопасный текст
    '
    };
  },
  computed: {
    sanitizedHtml() {
      return DOMPurify.sanitize(this.rawHtml);
    }
  }
};

    В шаблоне:

    Ключевой момент: никогда не вставлять данные напрямую из внешнего источника без очистки.

  2. Разрешение только конкретных тегов и атрибутов

    DOMPurify позволяет ограничивать разрешённые элементы, что дополнительно повышает безопасность:

    DOMPurify.sanitize(this.rawHtml, {ALLOWED_TAGS: ['p', 'strong', 'em', 'ul', 'li']});

    Это исключает возможность внедрения

    Использование в Element Plus:

    Такой подход позволяет централизовать логику очистки, минимизируя риск ошибок и XSS-уязвимостей при использовании v-html.

Оглавление