Vue Academy · Aula

Prevenção de XSS no Vue

Escape automático do Vue, riscos de v-html, DOMPurify para sanitização e tipos confiáveis.

Prevenção de XSS no Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é XSS

Cross-Site Scripting (XSS) é um ataque no qual um script malicioso é injetado em uma página e executado no navegador de outro usuário. Ele pode roubar cookies, tokens e dados. O Vue protege você por padrão, mas alguns padrões podem reabrir essa brecha.

O Vue escapa automaticamente as interpolações

O texto dentro de uma interpolação com chaves {{ }} recebe escape HTML automaticamente. Uma string de usuário que contenha tags é exibida como texto inofensivo, e não executada.

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

A vinculação de atributos também é segura

A vinculação com v-bind / :attr também aplica escape aos valores, portanto aspas injetadas não conseguem sair de um atributo e injetar manipuladores.

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

O perigo de v-html

v-html define innerHTML diretamente. Ele não aplica escape, portanto qualquer marcação — incluindo scripts e manipuladores de eventos — é renderizada como HTML ativo.

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

Como v-html é explorado

Mesmo sem uma tag de script, o HTML criado por um invasor pode executar código por meio de atributos de manipuladores de eventos ou de cargas úteis como img onerror.

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

Regra: nunca use v-html com entrada do usuário

A regra mais simples é nunca passar conteúdo não confiável para v-html. Use a interpolação simples, que aplica escape, sempre que a fonte for controlada pelo usuário.

Quando você precisa renderizar HTML

Às vezes, você realmente precisa de HTML avançado, como o conteúdo de um CMS ou a saída de Markdown. Nesse caso, é necessário higienizar o HTML antes de vinculá-lo.

Higienizando com DOMPurify

DOMPurify remove tags e atributos perigosos, mantendo a formatação segura. Instale-o e higienize o conteúdo antes de usar v-html.

npm install dompurify

Higienize e depois vincule

Execute o valor por DOMPurify.sanitize em uma propriedade computada e depois vincule o resultado limpo.

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

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

Configurando tags permitidas

Você pode restringir a lista de permissões para que somente as tags esperadas sobrevivam à higienização.

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

Outras fontes que não são confiáveis

Desconfie também dos URLs: um href javascript: em um link vinculado pode executar código. Valide ou higienize os hrefs e nunca crie fontes <script> dinâmicas a partir de dados do usuário.

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

Verificação rápida

Você precisa renderizar HTML enviado pelo usuário. Qual é a abordagem segura?

Recapitulação

O Vue aplica escape automaticamente à interpolação {{ }} e às vinculações de atributos, neutralizando a maioria dos ataques XSS. A exceção perigosa é v-html, que renderiza HTML bruto. Nunca passe entrada do usuário diretamente para ele; quando HTML avançado for necessário, higienize-o primeiro com DOMPurify e também desconfie dos URLs fornecidos pelo usuário.

Perguntas Frequentes

A aula “Prevenção de XSS no Vue” é grátis?

Sim — o texto completo de “Prevenção de XSS no Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Prevenção de XSS no Vue”?

Escape automático do Vue, riscos de v-html, DOMPurify para sanitização e tipos confiáveis. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Prevenção de XSS no Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy