0Pricing
Vue Academy · Урок

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

Автоматическое экранирование Vue, опасности v-html, очистка с помощью DOMPurify и доверенные типы

«Предотвращение XSS во Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое XSS

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

Vue автоматически экранирует интерполяцию

Текст внутри интерполяции с двойными фигурными скобками {{ }} автоматически экранируется как HTML. Строка пользователя, содержащая теги, отображается как безвредный текст, а не выполняется.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

Привязка атрибутов тоже безопасна

Привязка с помощью v-bind / :attr также экранирует значения, поэтому внедренные кавычки не могут выйти за пределы атрибута и внедрить обработчики.

<div :title="userInput">Hover me</div>

Опасность v-html

v-html напрямую устанавливает innerHTML. Он не выполняет экранирование, поэтому любая разметка — включая скрипты и обработчики событий — отображается как активный HTML.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

Как используют уязвимость v-html

Даже без тега скрипта HTML злоумышленника может выполнить код через атрибуты обработчиков событий или полезные нагрузки img onerror.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

Правило: никогда не передавайте ввод пользователя в v-html

Самое простое правило — никогда не передавайте ненадежное содержимое в v-html. Если источник контролируется пользователем, всегда используйте обычную интерполяцию, которая выполняет экранирование.

Когда необходимо отображать HTML

Иногда действительно требуется отображать обогащенный HTML, например содержимое CMS или результат обработки Markdown. В таком случае перед привязкой необходимо очистить HTML.

Очистка с помощью DOMPurify

DOMPurify удаляет опасные теги и атрибуты, сохраняя безопасное форматирование. Установите его и очищайте содержимое перед использованием v-html.

npm install dompurify

Сначала очистите, затем привяжите

Пропустите значение через DOMPurify.sanitize в вычисляемом свойстве, а затем привяжите очищенный результат.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

Настройка разрешенных тегов

Можно ограничить список разрешенных элементов, чтобы после очистки сохранялись только ожидаемые теги.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

Другим источникам тоже нельзя доверять

Не доверяйте и URL: ссылка с привязанным атрибутом javascript: в href может выполнить код. Проверяйте или очищайте значения href и никогда не создавайте динамические источники <script> из данных пользователя.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

Быстрая проверка

Вам необходимо отобразить HTML, отправленный пользователем. Как сделать это безопасно?

Итоги

Vue автоматически экранирует интерполяцию {{ }} и привязки атрибутов, нейтрализуя большинство атак XSS. Опасным исключением является v-html, который отображает необработанный HTML. Никогда не передавайте ему пользовательский ввод напрямую; если нужен обогащенный HTML, сначала очистите его с помощью DOMPurify и также не доверяйте URL, предоставленным пользователем.

Часто задаваемые вопросы

Урок «Предотвращение XSS во Vue» бесплатный?

Да — полный текст урока «Предотвращение XSS во Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Предотвращение XSS во Vue»?

Автоматическое экранирование Vue, опасности v-html, очистка с помощью DOMPurify и доверенные типы Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Предотвращение XSS во Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Предотвращение XSS во Vue
  2. Политика безопасности содержимого (CSP) с Vue
  3. Защита от CSRF в SPA на Vue
  4. Безопасные шаблоны аутентификации
← Назад к Vue Academy