Criado por Anchieta Acacio

2024-03-28 11:03:50

A Content Security Policy (CSP) é uma medida de segurança importante que ajuda a proteger sua aplicação web contra ataques de script entre sites (XSS), ataques de injeção de código e outras ameaças. Uma CSP define as fontes confiáveis de recursos que o navegador pode carregar em uma página web, restringindo a execução de scripts e o carregamento de recursos externos. Neste artigo, vamos explicar o que é uma CSP e como implementá-la em sua aplicação web passo a passo.

O que é uma Content Security Policy (CSP)?

Uma Content Security Policy (CSP) é um conjunto de instruções que informa ao navegador quais recursos externos (como scripts, estilos, imagens, fontes) são permitidos em uma página web. Ao restringir a origem desses recursos, uma CSP ajuda a mitigar vários tipos de ataques, incluindo XSS, injeção de código e clickjacking.

Passo 1: Definindo sua Content Security Policy

Antes de implementar uma CSP, é importante entender quais recursos sua aplicação web precisa acessar. Por exemplo, você precisará permitir a execução de scripts de sua própria origem, bem como de bibliotecas externas confiáveis, como jQuery ou Bootstrap. Aqui está um exemplo básico de uma CSP:

less

Content-Security-Policy: default-src 'self' https://cdnjs.cloudflare.com;

Neste exemplo:

• default-src: Define as fontes padrão para todos os tipos de recursos.
• 'self': Permite recursos da própria origem.
• https://cdnjs.cloudflare.com: Permite recursos da CDN do Cloudflare.

Passo 2: Implementando a CSP em sua Aplicação Web

Uma vez definida sua CSP, você pode implementá-la em sua aplicação web adicionando o cabeçalho Content-Security-Policy à sua resposta HTTP. Isso pode ser feito de várias maneiras, dependendo de sua configuração de servidor:

a) Apache (via arquivo .htaccess):

Se você estiver usando o servidor Apache, pode adicionar a CSP ao arquivo .htaccess na raiz do seu diretório da web:

css

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self' https://cdnjs.cloudflare.com;"
</IfModule>

b) Nginx (via configuração de servidor):

Se estiver usando Nginx, você pode adicionar a CSP diretamente à configuração do servidor:

css

add_header Content-Security-Policy "default-src 'self' https://cdnjs.cloudflare.com;";

c) Express.js (Node.js):

Se sua aplicação estiver usando o framework Express.js em Node.js, você pode definir a CSP como um middleware:

javascript

const express = require('express');
const helmet = require('helmet');

const app = express();
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'", 'https://cdnjs.cloudflare.com']
  }
}));

Passo 3: Testando sua CSP

Após implementar a CSP, é importante testá-la para garantir que ela esteja funcionando conforme o esperado. Você pode usar ferramentas online como o Security Headers Scanner (https://securityheaders.com/) ou verificar o console do navegador para ver se há erros relacionados à CSP.

Além disso, você pode habilitar relatórios de violações (CSP violation reports) para receber notificações sobre violações da política de segurança. Isso pode ser útil durante o desenvolvimento para identificar quaisquer problemas que possam ocorrer devido à CSP restritiva.

Conclusão

Implementar uma Content Security Policy (CSP) é uma parte importante da segurança de sua aplicação web. Ao restringir as fontes de recursos externos, você pode reduzir significativamente o risco de ataques de XSS, injeção de código e outras ameaças. Seguindo este guia passo a passo, você pode configurar facilmente uma CSP eficaz para proteger sua aplicação web e seus usuários contra ameaças online.