Entendendo o Content Security Policy (CSP) e sua implementação

O Content Security Policy (CSP) é uma ferramenta importante para aumentar a segurança de sua aplicação. Descubra como usá-lo para evitar ataques e melhorar a proteção.

O que é o Content Security Policy (CSP)?

Content Security Policy (CSP) é uma política de segurança de conteúdo que ajuda a prevenir ataques de Cross-Site Scripting (XSS) e outros tipos de injeção de código malicioso, como injeções de dados de fontes não confiáveis. Ele funciona definindo quais fontes de conteúdo são confiáveis para o seu site, controlando de onde scripts, imagens e outros recursos podem ser carregados, o que ajuda a reduzir o risco de ataques como XSS, clickjacking e injeções de código.

Como funciona o CSP?

O CSP é implementado através de um cabeçalho HTTP, que você configura no servidor. Esse cabeçalho contém uma lista de regras que indicam ao navegador de onde ele pode carregar recursos. O navegador então verifica essas regras antes de executar ou carregar qualquer recurso, como scripts, imagens, fontes, estilos, etc. Se um recurso não estiver na lista de fontes permitidas, ele será bloqueado.

Exemplo de um cabeçalho CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.exemplo.com; img-src 'self' https://imagens.exemplo.com;

Este cabeçalho CSP permite que apenas scripts do próprio domínio ('self') e de https://apis.exemplo.com sejam executados, e imagens apenas de https://imagens.exemplo.com e do próprio domínio.

Benefícios do CSP

A principal vantagem do CSP é a sua capacidade de prevenir ataques XSS, que ocorrem quando um atacante injeta código malicioso em uma página web, geralmente através de entradas de usuário não validadas. Ao usar CSP, você limita o que pode ser executado na página e bloqueia a execução de scripts maliciosos, o que torna o site mais seguro.

Além de XSS, o CSP também ajuda a mitigar ataques como clickjacking, onde um atacante embute um iframe oculto em uma página para enganar o usuário e realizar ações indesejadas em seu nome.

Como implementar o CSP?

A implementação do CSP pode ser feita de duas maneiras principais: através de cabeçalhos HTTP ou de uma meta tag no HTML. A melhor abordagem é configurar o CSP diretamente no servidor usando cabeçalhos HTTP, pois isso oferece maior controle sobre o conteúdo carregado.

Exemplo de configuração do CSP no servidor (usando cabeçalhos HTTP):

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

Este cabeçalho permite que apenas recursos do mesmo domínio ('self') sejam carregados, bloqueando todos os outros. No entanto, você pode configurar diferentes políticas para diferentes tipos de conteúdo, como scripts, imagens, fontes e estilos.

Exemplo de CSP com diferentes fontes:

Content-Security-Policy: default-src 'self';
  script-src 'self' https://apis.exemplo.com;
  img-src 'self' https://imagens.exemplo.com;
  style-src 'self' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;

Neste exemplo, o CSP permite scripts do próprio domínio e de https://apis.exemplo.com, imagens do próprio domínio e de https://imagens.exemplo.com, e fontes de https://fonts.googleapis.com e https://fonts.gstatic.com.

Quais fontes são permitidas com o CSP?

Com o CSP, você pode configurar uma lista de fontes confiáveis para diferentes tipos de conteúdo. As fontes podem incluir:

  • 'self': O mesmo domínio onde a página está sendo servida.
  • URLs específicas: Você pode definir explicitamente de onde os scripts e outros recursos podem ser carregados (como https://apis.exemplo.com).
  • 'none': Nenhum recurso externo é permitido.

Dicas para configurar um CSP eficaz

  1. Comece com um CSP restritivo: Ao começar a configurar o CSP, use uma política que bloqueie a maior parte dos recursos externos. Gradualmente, adicione exceções para as fontes necessárias.

Exemplo de política restritiva:

Content-Security-Policy: default-src 'none';
  1. Use ferramentas de depuração: Ao testar sua política CSP, use ferramentas como o CSP Evaluator ou o console do navegador para garantir que as fontes permitidas estão corretamente configuradas e que os recursos não confiáveis estão sendo bloqueados.

  2. Monitore as violações de CSP: O CSP oferece uma função de relatório de violações que permite que você saiba quando o navegador bloqueia um recurso por não corresponder à política configurada. Isso pode ser útil para identificar falhas na configuração do CSP e melhorar sua política de segurança.

Exemplo de relatório de violações de CSP:

Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report-endpoint;

Com isso, as violação de políticas serão enviadas para o endpoint /csp-violation-report-endpoint para análise posterior.

  1. Use um modo de política de conteúdo permissivo para teste: Ao aplicar um CSP, você pode começar com uma política de teste mais permissiva, como Content-Security-Policy: default-src 'self', e depois ir ajustando conforme necessário para bloquear recursos externos específicos.

Conclusão

O Content Security Policy (CSP) é uma ferramenta poderosa para aumentar a segurança das suas aplicações web. Ao configurar adequadamente o CSP, você pode prevenir ataques como XSS e clickjacking, limitando as fontes de conteúdo que seu site pode carregar e executar. A implementação cuidadosa de uma política CSP ajudará a proteger os dados dos seus usuários e a aumentar a integridade e confiabilidade de sua aplicação web.

O Content Security Policy é uma das práticas de segurança mais importantes para aplicações web. Sua implementação pode parecer complexa, mas com as configurações certas, você pode aumentar a segurança e proteger seus usuários contra ataques maliciosos. Não deixe de configurar corretamente o CSP em seus projetos para garantir a proteção de dados sensíveis e melhorar a confiança no seu site.

Algumas aplicações:

  • Proteção contra XSS ao controlar as fontes de scripts carregados em seu site.
  • Redução de riscos de ataques como clickjacking e injeção de código malicioso.
  • Melhora a segurança geral da aplicação ao definir restrições claras sobre quais recursos podem ser carregados.
  • Ajuda a garantir que apenas recursos confiáveis sejam executados no navegador do usuário.

Dicas para quem está começando

  • Sempre use o CSP com uma política restritiva no início e só adicione exceções conforme necessário.
  • Monitore as violações de CSP usando o relatório de violações para garantir que a configuração está correta.
  • Utilize ferramentas como o CSP Evaluator para testar e ajustar sua política de segurança.
  • Evite usar 'unsafe-inline' ou 'unsafe-eval' em suas políticas, pois essas opções tornam a aplicação mais vulnerável.

Contribuições de Fernando Antunes

Compartilhe este tutorial: O que é o Content Security Policy (CSP)?

Compartilhe este tutorial

Continue aprendendo:

O que são ataques XSS e como preveni-los?

Entenda o que são ataques XSS, como eles afetam sua aplicação JavaScript e as melhores práticas para evitá-los.

Tutorial anterior

Como armazenar senhas de forma segura no frontend?

Entenda as melhores práticas para armazenar senhas de forma segura no frontend, protegendo os dados do usuário contra vulnerabilidades.

Próximo tutorial