No cenário em constante evolução da segurança na Web, a Política de Segurança de Conteúdo (CSP) surgiu como uma ferramenta poderosa para ajudar os desenvolvedores a proteger seus aplicativos contra várias formas de ataques, especialmente entre sites. Scripts (XSS). Este blog mostrará os fundamentos do CSP, como implementá-lo e fornecerá exemplos do mundo real para ajudá-lo a dominar seu uso.

O que é Política de Segurança de Conteúdo (CSP)?

A Política de Segurança de Conteúdo (CSP) é um recurso de segurança que ajuda a prevenir uma série de ataques, controlando os recursos que um site pode carregar e executar. Ao definir um CSP, você pode especificar quais scripts, estilos e outros recursos podem ser carregados, reduzindo significativamente o risco de ataques XSS e de injeção de dados.

Por que usar CSP?

1. Mitigar ataques XSS: Ao restringir as fontes das quais os scripts podem ser carregados, o CSP ajuda a evitar que invasores injetem scripts maliciosos.

2. Controlar o carregamento de recursos: CSP permite que você controle de onde seu site carrega recursos, como imagens, scripts, folhas de estilo e muito mais.

3. Prevenir injeção de dados: O CSP pode ajudar a prevenir ataques que visam injetar dados indesejados em seu site.

Estrutura Básica de um CSP

Um CSP é definido usando o cabeçalho HTTP Content-Security-Policy. Aqui está um exemplo simples da aparência de um cabeçalho CSP:

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

Nesta política:

default-src 'self': Por padrão, permitir apenas recursos da mesma origem.
script-src 'self' https://trusted.cdn.com: Permitir scripts da mesma origem e um CDN confiável.
style-src 'self' 'unsafe-inline': Permite estilos da mesma origem e estilos embutidos.

Implementando CSP em seu aplicativo JavaScript

Etapa 1: Defina sua política

Comece determinando quais recursos seu aplicativo precisa carregar. Isso inclui scripts, estilos, imagens, fontes, etc.

Etapa 2: adicione o cabeçalho CSP ao seu servidor

Se estiver usando um servidor Express.js, você pode definir o cabeçalho CSP da seguinte maneira:

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

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://trusted.cdn.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
    }
}));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Etapa 3: teste seu CSP

Depois que seu CSP estiver instalado, teste-o completamente. Use ferramentas de desenvolvedor de navegador para verificar se algum recurso está sendo bloqueado. Ajuste a política conforme necessário para garantir que seu aplicativo funcione corretamente e permaneça seguro.

Exemplo: Implementando CSP em um Projeto de Exemplo

Vamos considerar uma página HTML simples que carrega scripts e estilos de um CDN confiável.

    
Content Security Policy Example
    

Neste exemplo:

• Somente recursos da mesma origem ('self') são permitidos por padrão.
• Scripts são permitidos da mesma origem e do CDN cdnjs.cloudflare.com.
• Estilos inline são permitidos ('unsafe-inline'), mas isso deve ser evitado se possível para melhor segurança.

Dicas para um CSP forte

1. Evite 'unsafe-inline' e 'unsafe-eval': Eles permitem scripts e estilos embutidos, que podem ser explorados. Em vez disso, use políticas baseadas em nonce ou baseadas em hash.

2. Use o modo somente relatório: Comece com Content-Security-Policy-Report-Only para registrar violações sem aplicar a política, permitindo que você ajuste a política.

3. Atualize regularmente o CSP: À medida que seu aplicativo evolui, certifique-se de que seu CSP seja atualizado para refletir novos requisitos de recursos e práticas recomendadas de segurança.

Conclusão

Implementar uma Política de Segurança de Conteúdo robusta é uma etapa crítica para proteger seus aplicativos JavaScript contra uma série de ataques. Ao compreender os fundamentos do CSP e seguir as práticas recomendadas, você pode melhorar significativamente a postura de segurança de seus aplicativos web. Comece com uma política básica, teste-a completamente e repita para alcançar o equilíbrio perfeito entre funcionalidade e segurança.