Vue Academy · Aula

Content Security Policy (CSP) com Vue

Cabeçalhos CSP, scripts baseados em nonce, políticas baseadas em hash e configuração de CSP no Vite.

Content Security Policy (CSP) com Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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 é CSP

A Política de Segurança de Conteúdo é um cabeçalho de resposta HTTP que informa ao navegador quais fontes de scripts, estilos, imagens e conexões são permitidas. Ela é uma segunda linha de defesa forte contra XSS: até mesmo scripts injetados são bloqueados se sua fonte não for permitida.

O cabeçalho

A CSP é fornecida por meio do cabeçalho de resposta Content-Security-Policy. Cada diretiva lista as fontes permitidas para um tipo de recurso.

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

Restringindo fontes de scripts

A diretiva script-src controla de onde os scripts podem ser carregados. Limitá-la a 'self' bloqueia scripts inline e de terceiros que um invasor poderia injetar.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

Evitando unsafe-inline

'unsafe-inline' permite scripts inline e atributos de manipuladores de eventos — exatamente o que os ataques XSS exploram. Uma política forte o omite para impedir a execução de código inline injetado.

Evitando unsafe-eval

'unsafe-eval' permite eval e o construtor Function. A versão de execução do Vue 3 não precisa disso, pois os modelos são pré-compilados, portanto você pode e deve deixá-lo de fora.

Scripts inline baseados em nonce

Quando você realmente precisar de um script inline, atribua a ele um nonce aleatório por resposta e liste esse nonce na política. Somente scripts que carreguem o nonce correspondente serão executados.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Por que os nonces são melhores que unsafe-inline

Um nonce é imprevisível e muda a cada resposta, portanto um invasor que injete um script não consegue adivinhá-lo. Assim, os scripts inline continuam funcionando sem o risco abrangente de unsafe-inline.

CSP e estilos do Vue

O Vue e muitas bibliotecas de interface injetam estilos durante a execução. Permita-os por meio de style-src com um nonce ou hash, ou extraia o CSS para arquivos, para que style-src 'self' seja suficiente.

Content-Security-Policy: style-src 'self';

Plugin de nonce da CSP do Vite para desenvolvimento

O servidor de desenvolvimento do Vite injeta scripts, o que pode entrar em conflito com uma CSP rígida. Um plugin de nonce da CSP adiciona um nonce correspondente às tags injetadas pelo Vite durante o desenvolvimento.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src para APIs

Restrinja os locais de onde o aplicativo pode fazer buscas com connect-src, para que o código injetado não consiga exfiltrar dados para um domínio controlado por um invasor.

Content-Security-Policy: connect-src 'self' https://api.example.com;

Modo somente relatório

Implemente a CSP com segurança usando Content-Security-Policy-Report-Only, que relata violações sem bloqueá-las, para que você possa ajustar a política antes de aplicá-la.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

Verificação rápida

Qual valor de diretiva da CSP você deve evitar para manter forte a proteção contra XSS?

Recapitulação

A CSP é um cabeçalho HTTP que restringe as fontes permitidas de scripts, estilos e conexões, bloqueando código injetado mesmo quando um ataque XSS consegue passar. Evite unsafe-inline e unsafe-eval; use nonces por resposta para scripts inline necessários e um plugin de nonce da CSP do Vite durante o desenvolvimento. Faça a implementação no modo somente relatório antes de aplicá-la.

Perguntas Frequentes

A aula “Content Security Policy (CSP) com Vue” é grátis?

Sim — o texto completo de “Content Security Policy (CSP) com 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 “Content Security Policy (CSP) com Vue”?

Cabeçalhos CSP, scripts baseados em nonce, políticas baseadas em hash e configuração de CSP no Vite. 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 2 de 4.

Quanto tempo leva a aula “Content Security Policy (CSP) com 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