Modulo 5 / Arquitetura Web e Deploy

Domínios, SSL e Segurança

Como funcionam domínios, certificados SSL/TLS e boas práticas de segurança web.

school Aula 25 schedule 2 horas

Endereçamento

O que é um domínio?

language Nome do seu site

▸ O endereço que os usuários digitam no navegador
▸ Substitui o endereço IP numérico
▸ Registrado através de registradores (Registro.br, GoDaddy, Namecheap)
▸ Renovação anual (custo varia por extensão)

account_tree Estrutura de um domínio

www.meusite.com.br

www Subdomínio

meusite Domínio (nome escolhido)

.com TLD (Top-Level Domain)

.br ccTLD (domínio do país)

Extensões

Tipos de TLD

public Genéricos (gTLD)

.com Comercial

.org Organizações

.net Redes/tecnologia

.dev Desenvolvedores

.io Startups/tech

flag Brasil (ccTLD)

.com.br Comercial BR

.org.br Org. sem fins lucrativos

.edu.br Educação

.gov.br Governo

.app.br Aplicações

attach_money Custos anuais

.com.br ~R$ 40/ano

.com ~R$ 60/ano

.dev ~R$ 70/ano

.io ~R$ 200/ano

Registro.br é o registrador oficial para domínios .br

Configuração

Registros DNS

dns Tipos de registro

A Record

Aponta domínio para um endereço IPv4

meusite.com → 192.168.1.1

CNAME Record

Aponta domínio para outro domínio (alias)

www.meusite.com → meusite.vercel.app

MX Record

Configura servidores de e-mail

TXT Record

Verificação de domínio, SPF, DKIM

link Conectando domínio na Vercel

1 No projeto Vercel, vá em Settings > Domains

2 Digite seu domínio personalizado

3 A Vercel mostra os registros DNS necessários

4 Configure no painel do seu registrador (Registro.br)

5 Aguarde a propagação do DNS (até 48h)

lightbulb Na prática, costuma levar apenas alguns minutos com Vercel e Cloudflare.

Criptografia

O que é SSL/TLS?

lock Comunicação segura

▸ SSL (Secure Sockets Layer) e TLS (Transport Layer Security)
▸ Criptografa os dados entre navegador e servidor
▸ Impede que terceiros interceptem senhas, dados pessoais, etc
▸ TLS é a versão moderna (SSL é o nome antigo)

compare_arrows HTTP vs HTTPS

lock_open http://

Dados trafegam em texto puro. Qualquer pessoa na rede pode interceptar.

lock https://

Dados criptografados. Seguro para senhas, pagamentos e dados pessoais.

lightbulb Google prioriza sites HTTPS nos resultados de busca (SEO).

Certificados

Como obter HTTPS

verified

Automático (Vercel/Netlify)

Plataformas modernas geram certificado automaticamente via Let's Encrypt.

Gratuito e automático

shield

Let's Encrypt

Autoridade certificadora gratuita e open source. Renova automaticamente a cada 90 dias.

Gratuito (manual)

workspace_premium

Certificados pagos

Oferecem validação estendida (EV) com nome da empresa na barra. Usado por bancos.

R$ 100-2000/ano

Headers de segurança

Security Headers

security Headers importantes

# Força HTTPS
Strict-Transport-Security:
  max-age=31536000

# Previne clickjacking
X-Frame-Options:
  DENY

# Previne sniffing de MIME type
X-Content-Type-Options:
  nosniff

# Controla o que o navegador pode carregar
Content-Security-Policy:
  default-src 'self'

check_circle Por que importam

▸ Protegem contra ataques comuns (XSS, clickjacking)
▸ Vercel e Netlify já configuram os principais automaticamente
▸ Podem ser personalizados no vercel.json
▸ Ferramentas como securityheaders.com verificam seu site

Ameaças

Vulnerabilidades comuns

code XSS

Cross-Site Scripting: injeção de scripts maliciosos em páginas web.

Prevenção: sempre escape dados do usuário antes de exibir no HTML.

database SQL Injection

Injeção de comandos SQL maliciosos através de formulários.

Prevenção: use queries parametrizadas, nunca concatene input do usuário.

person_cancel CSRF

Cross-Site Request Forgery: ações forçadas em nome do usuário.

Prevenção: use tokens CSRF, verifique o header Origin/Referer.

Checklist

Boas práticas

verified Segurança

✓ Sempre use HTTPS
✓ Nunca exponha senhas ou chaves no código
✓ Use variáveis de ambiente para dados sensíveis
✓ Valide inputs no front e no back-end
✓ Mantenha dependências atualizadas (npm audit)
✓ Configure headers de segurança

speed Performance e SEO

✓ Otimize imagens (WebP, tamanho adequado)
✓ Minifique CSS e JavaScript
✓ Use CDN para assets estáticos
✓ Adicione meta tags para SEO
✓ Teste no Google Lighthouse
✓ Design responsivo (mobile-first)

Segurança em APIs

O que é CORS?

shield Cross-Origin Resource Sharing

▸ Mecanismo de segurança do navegador
▸ Controla quais sites podem acessar sua API
▸ Por padrão, navegadores bloqueiam requisições cross-origin
▸ O servidor precisa permitir explicitamente

code Exemplo de configuração

// No servidor (Node.js/Express)
app.use((req, res, next) => {
  res.setHeader(
    'Access-Control-Allow-Origin',
    'https://meusite.com'
  );
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, PUT, DELETE'
  );
  next();
});

warning Evite Access-Control-Allow-Origin: * em APIs com dados sensíveis.

Hora de praticar

Exercício prático

security Investigando segurança na web

Acesse securityheaders.com e teste 3 sites diferentes (um banco, um governo, um blog)
Compare os resultados e anote as diferenças
No DevTools, verifique o certificado SSL de um site (cadeado na barra de URL)
Use nslookup para descobrir os registros DNS de um domínio
No seu projeto na Vercel, acesse Settings > Domains e explore as opções

lightbulb Desafio extra: teste seu site no Google Lighthouse (DevTools > Lighthouse) e busque uma pontuação acima de 90 em todas as categorias.

Próxima aula

Aula 26

Introdução ao Node.js, npm e módulos.

task_alt O que aprendemos hoje

check_circle Estrutura e tipos de domínio (TLDs)
check_circle Registros DNS (A, CNAME, MX, TXT)
check_circle SSL/TLS e a diferença entre HTTP e HTTPS
check_circle Vulnerabilidades comuns (XSS, SQL Injection, CSRF)
check_circle Boas práticas de segurança e CORS

Próxima aula

auto_stories Referência: MDN Web Security