Você sabia que mais de 70% dos sites na internet brasileira recebem notas F ou D em ferramentas de auditoria como o SecurityHeaders.com?
Embora a maioria dos desenvolvedores se preocupe em colocar um certificado SSL gratuito (o famoso cadeado verde na barra de endereços), poucos sabem que o HTTPS isolado não protege contra ataques sofisticados de Cross-Site Scripting (XSS), Clickjacking ou injeção de scripts maliciosos em formulários de checkout.
Os Cabeçalhos de Segurança HTTP (HTTP Security Headers) são diretivas enviadas pelo seu servidor ao navegador do visitante informando exatamente quais comportamentos são permitidos e quais devem ser bloqueados sumariamente.
Neste tutorial prático, você aprenderá a configurar todos os cabeçalhos essenciais para atingir a pontuação máxima Nota A+, seja no framework Next.js ou em um servidor web Nginx.
1. O Arsenal de Cabeçalhos Essenciais
Para conquistar a nota máxima e blindar sua aplicação web, precisamos implementar 6 cabeçalhos fundamentais:
┌─────────────────────────────────┬────────────────────────────────────────────────────────┐
│ Cabeçalho HTTP │ Função Primária de Defesa │
├─────────────────────────────────┼────────────────────────────────────────────────────────┤
│ Content-Security-Policy (CSP) │ Bloqueia execução de scripts não autorizados (XSS) │
│ Strict-Transport-Security (HSTS)│ Força conexões HTTPS perpétuas com preload │
│ X-Frame-Options │ Impede que o site seja embutido em iframes (Clickjack) │
│ X-Content-Type-Options │ Impede o navegador de adivinhar o tipo MIME (Sniffing) │
│ Referrer-Policy │ Controla vazamento de URLs de referência em links │
│ Permissions-Policy │ Desativa câmera, microfone e APIs de rastreamento │
└─────────────────────────────────┴────────────────────────────────────────────────────────┘
Passo 2: Implementando no Next.js (App Router / Pages)
Se sua aplicação é construída em Next.js, a configuração deve ser aplicada diretamente no arquivo raiz next.config.ts (ou next.config.js).
Abra seu arquivo de configuração e insira as regras:
import type { NextConfig } from "next";
const cspHeader = `
default-src 'self';
script-src 'self' 'unsafe-inline' https://pagead2.googlesyndication.com https://adservice.google.com https://www.googletagservices.com https://partner.googleadservices.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' blob: data: https://pagead2.googlesyndication.com https://www.google.com https://googleads.g.doubleclick.net;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://pagead2.googlesyndication.com https://adservice.google.com https://www.google-analytics.com;
frame-src 'self' https://googleads.g.doubleclick.net https://tpc.googlesyndication.com;
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'self';
upgrade-insecure-requests;
`;
const securityHeaders = [
{
key: 'Content-Security-Policy',
value: cspHeader.replace(/\s{2,}/g, ' ').trim(),
},
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload',
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN',
},
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()',
},
];
const nextConfig: NextConfig = {
poweredByHeader: false, // Remove o cabeçalho 'X-Powered-By: Next.js'
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
];
},
};
export default nextConfig;
Passo 3: Implementando no Servidor Web Nginx
Se você utiliza um servidor Nginx como proxy reverso para suas aplicações ou páginas estáticas, adicione as seguintes linhas dentro do bloco server correspondente ao seu domínio (geralmente em /etc/nginx/sites-available/seu-site.conf):
server {
listen 443 ssl http2;
server_name landingfymax.com.br;
# Ocultar versão do Nginx
server_tokens off;
# HSTS com preload (2 anos de duração)
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
# Anti-Clickjacking
add_header X-Frame-Options "SAMEORIGIN" always;
# Anti-MIME Sniffing
add_header X-Content-Type-Options "nosniff" always;
# Referrer Policy
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
# Permissions Policy
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
# Content Security Policy (ajuste conforme os scripts do seu site)
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'none'; frame-ancestors 'self';" always;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Após editar, teste a sintaxe das configurações e recarregue o servidor:
sudo nginx -t && sudo systemctl reload nginx
Passo 4: Validando Sua Nota no SecurityHeaders.com
Com os cabeçalhos aplicados e o deploy efetuado:
- Acesse https://securityheaders.com/;
- Digite a URL do seu domínio (ex:
landingfymax.com.br); - Clique em Scan.
Você verá um selo verde vibrante com a classificação Nota A+, comprovando que sua infraestrutura adota as mais rigorosas diretrizes de defesa em profundidade da web moderna!
Conclusão
Configurar cabeçalhos de segurança não apenas fecha as portas para invasões e roubo de dados, mas transmite uma mensagem incontestável de profissionalismo para navegadores, auditorias e mecanismos de monetização como o Google AdSense.
Quer que seu site ou landing page seja construído com arquitetura de alta conversão e segurança militar desde o primeiro dia? Conte com a equipe da Landingfymax. Fale com nossos especialistas.
