Quais as boas práticas de segurança para PWAs?
![Quais as boas práticas de segurança para PWAs?](assets/praticas-de-seguranca-pwas/praticas-de-seguranca-pwas.jpg)
Imagine que você desenvolveu uma aplicação web que é uma PWA.
Em um belo dia, os usuários começam a reclamar que seus dados foram roubados ou clonados por algum agente malicioso e esse evento toma proporções enormes e foge ao seu controle. Assustador, não é?
Para proteger os usuários contra esses riscos, é crucial adotar boas práticas de segurança na sua PWA.
Neste artigo, vamos explorar a importância do protocolo HTTPS, entender as nuances do SSL e TLS, e aprender sobre ferramentas que ajudam a proteger as nossas PWAs.
Vamos mergulhar!
HTTPS: o pilar da segurança em PWAs
Antes de falar das boas práticas, vamos entender como ocorre o acesso via HTTP e via HTTPS na sua aplicação.
Acesso via HTTP
Quando um usuário acessa um site via HTTP (Hypertext Transfer Protocol), a comunicação entre o navegador e o servidor ocorre na porta 80 sem qualquer criptografia.
Ou seja, os dados transmitidos podem ser interceptados e lidos por qualquer pessoa que tenha acesso ao tráfego da rede, tornando a conexão vulnerável a ataques, como o man-in-the-middle (veremos mais à frente o que é esse tipo de ataque).
Sem a segurança de criptografia, as informações sensíveis, como senhas e dados pessoais, estão expostas a riscos significativos.
![Diagrama representando o acesso a recursos de páginas web por meio do protocolo HTTP. Do lado esquerdo, o cliente faz a solicitação e por meio do protocolo HTTP (meio do diagrama) com o processo ocorrendo na porta 80. Esses recursos são retornados do servidor mas com uma segurança fraca (lado direito), podendo ser interceptados por qualquer pessoa que possa ter acesso a rede.](assets/praticas-de-seguranca-pwas/diagrama-acesso-recursos-porta-80.jpg)
Acesso via HTTPS
Em contraste, o acesso via HTTPS (HyperText Transfer Protocol Secure, que em tradução livre seria “Protocolo de Transferência de Hipertexto Seguro”) utiliza a porta 443 e o TLS para criptografar a comunicação entre o navegador e o servidor.
Isso protege os dados transmitidos contra interceptação e manipulação por terceiros.
Ao iniciar uma conexão HTTPS, o navegador verifica o certificado SSL/TLS do servidor, assegurando que o site é autêntico e seguro para o usuário.
![Diagrama que representa o acesso a recursos de páginas web por meio do protocolo HTTPS. Do lado esquerdo, o cliente faz a solicitação e por meio do protocolo HTTP (meio do diagrama) com o processo ocorrendo na porta 443. Esses recursos são retornados do servidor (lado direito) mas com segurança, visto que esse protocolo usa criptografia na comunicação entre navegador e servidor.](assets/praticas-de-seguranca-pwas/diagrama-acesso-recursos-porta-443.jpg)
Se quiser se aprofundar sobre o protocolo HTTP, recomendamos conferir este artigo da Akemi Alice, que desbrava esse importante protocolo web. Boa leitura!
Indo direto ao ponto: sem HTTPS, sua PWA está vulnerável.
O HTTPS é essencial, pois criptografa os dados transmitidos entre o navegador do usuário e o servidor, protegendo-os de interceptações maliciosas. Mas por que isso é tão crítico?
No primeiro acesso à sua PWA, todos os dados trafegam pela rede. Sem HTTPS, um hacker pode inserir scripts maliciosos ou redirecionar o usuário a páginas falsas, comprometendo a segurança desde o início.
Além disso, os navegadores mais recentes exigem HTTPS para habilitar funcionalidades como service workers, que são fundamentais para PWAs.
Os Service Workers só podem ser usados localmente (via acesso ao http://localhost), ou por meio de uma conexão segura (via HTTPS). Esta é uma regra da especificação para proteger os usuários de scripts maliciosos que porventura poderiam ser instalados em seu navegador.
A falta de HTTPS é um convite aberto a ataques conhecidos como man-in-the-middle (“homem no meio do caminho”).
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
O que são e como evitar ataques man-in-the-middle?
O que são ataques man-in-the-middle?
Os ataques man-in-the-middle são perigosos. Eles ocorrem quando um atacante intercepta a comunicação entre o usuário e o servidor, e podem roubar dados ou inserir informações falsas.
![Diagrama representando o tipo de ataque conhecido como man-in-the-middle. Do lado esquerdo, mostra o processo onde o usuário solicita recursos do navegador. Ao centro, é mostrado onde um agente malicioso pode inserir informações falsas ou scripts maliciosos para retornar ao cliente e no lado direito os recursos que serão enviados ao navegador pelo servidor.](assets/praticas-de-seguranca-pwas/diagrama-man-in-the-middle.jpg)
Se quiser saber mais sobre o tipo de ataque man-in-the-middle (MitM), como se proteger e como detectar este tipo de ataque, leia este artigo.
Ataques como esse são um pouco assustadores. Como evitá-los? Vamos ver boas práticas a seguir. Como se diz no campo da medicina, “prevenir é o melhor remédio”.
Como evitar ataques a uma aplicação com PWA?
Neste artigo, você verá três boas práticas:
- HTTPS;
- Certificados TLS/SSL;
- Nginx e Ngrok.
Bom, HTTPS, junto com certificados TLS/SSL confiáveis, são a melhor defesa contra ataques do tipo man-in-the-middle. E o que são esses certificados?
São certificados emitidos por autoridades certificadoras (CAs) que garantem que os sites que você acessa são realmente quem dizem ser, evitando que um atacante se disfarce de um servidor legítimo.
Se quiser saber mais sobre o que são e como funcionam as autoridades certificadoras, recomendo acessar este artigo da equipe de suporte da SSL que fala sobre o tema. Boa leitura!
O que são certificados SSL e TLS?
As certificações SSL e TLS são os herois da segurança na web, mas, como em qualquer boa história, eles têm suas vulnerabilidades.
Originalmente, o SSL (Secure Sockets Layer, ou, em tradução livre, “Camada de Sockets Seguros”) foi desenvolvido para proteger as comunicações na internet.
Porém, versões antigas do SSL, como o SSL 3.0, são vulneráveis a ataques como o POODLE, que intercepta dados sensíveis. Por isso, o SSL foi substituído pelo TLS (Transport Layer Security ou “camada de transporte com segurança”), que é mais seguro e eficiente.
Não se preocupe; nenhum cachorro da raça poodle irá atacar a sua aplicação e roubar dados dos seus usuários.
Este é um nome dado a um tipo de ataque muito comum em aplicações que usam um certificado SSL 3.0. Se quiser saber mais sobre o tema e ter certeza que não é nenhum animal fazendo isso, leia este artigo.
![Imagem gerada por inteligência artificial que mostra um cachorrinho da cor branca e da raça Poodle usando um moletom cinza com capuz e óculos com armação quadrada na cor preta. Ele está digitando em um teclado de computador na cor branca e cercado de códigos. Na mesa ainda estão novelos de lã, um monitor com códigos e um mouse na cor branca.](assets/praticas-de-seguranca-pwas/poodle-hacker.jpeg)
A partir de 2020, o TLS 1.3 se tornou o padrão ouro, oferecendo uma camada extra de segurança e desempenho.
Ainda assim, é importante estar ciente das vulnerabilidades, como ataques de downgrade, em que os atacantes forçam a conexão a usar versões mais antigas e menos seguras do TLS.
Outros ataques notáveis incluem o ataque DROWN, que explora servidores que ainda suportam o antigo SSLv2.
Se os certificados têm suas fraquezas, podemos fortalecer o “escudo” que protege os dados com outras ferramentas.
Como assim?
Implementar HTTPS com redirecionamento automático de HTTP para HTTPS no servidor, utilizando ferramentas como Nginx, incrementa a defesa e segurança das conexões. Isso não só protege contra interceptações como também inspira confiança no usuário na aplicação.
Bom, são muitos os tipos de ataques que sua aplicação pode sofrer, caso não possua a devida segurança. Se quiser saber mais sobre outros tipos de ataques de rede e problemas de segurança, dê uma olhada neste artigo da equipe de suporte do SSL.
Nginx e Ngrok: escudo fortalecido contra ataques
O que é Nginx?
A Nginx (se pronuncia é enginex) é uma ferramenta valiosa que pode ser configurada para redirecionar todo o tráfego HTTP para HTTPS, além de aplicar regras de segurança (como desativar versões antigas e vulneráveis de TLS e SSL).
Ao configurar o Nginx corretamente, você pode dormir em paz: todos os dados transmitidos entre o navegador e o servidor ficam sempre criptografados.
O que é Ngrok?
A Ngrok, por outro lado, é uma ferramenta fantástica para desenvolvedores que testam suas aplicações localmente, pois ela cria túneis seguros que expõem seu ambiente de desenvolvimento a um domínio público. Isso permite testar a segurança e funcionalidade da sua PWA em um ambiente real, sem abrir brechas de segurança.
Se você se interessou pelo Nginx e quer mergulhar de cabeça nele, recomendo o curso NGINX: servidor Web, Proxy Reverso e API Gateway com o instrutor Vinicius Dias para você aprofundar seus estudos neste tópico.
Neste curso você aprenderá a trabalhar com o Nginx, configurar um servidor HTTP, trabalhar com proxy reverso e muito mais! Bons estudos.
Conclusão
Erguer barreiras de segurança em suas PWAs é essencial para proteger os dados dos usuários de ataques maliciosos e, consequentemente, a integridade da aplicação.
Neste artigo, aprendemos sobre o protocolo HTTP e HTTPS, entendemos as nuances da certificação SSL e TLS, e a importância de usar ferramentas como Nginx e Ngrok como passos fundamentais para garantir a segurança de suas PWAs. E agora, que tal olhar em nossos outros conteúdos?
Está a fim de aprender sobre validação de formulários em React? Então explore a formação React: bibliotecas para desenvolver formulários. Quer se aprofundar em performance em suas aplicações React? Temos também a formação React: maximizando a performance de aplicações.
Nos vemos por aí, até a próxima!
Referências
- Artigo: HTTP: um guia completo sobre o que é e como funciona o protocolo da web
- Artigo: Qual é a diferença entre HTTP e HTTPS?
- Artigo: Ataque activo de homem no meio (MitM)
- Artigo: O que é uma Autoridade Certificadora (CA)?
- Artigo Perguntas frequentes: ataques de rede e problemas de segurança
- Artigo: Ataque POODLE
- Curso: NGINX: servidor Web, Proxy Reverso e API Gateway
- Formação: React: bibliotecas para desenvolver formulários
- Formação: React: maximizando a performance de aplicações
- Documentação: Nginx
- Documentação: Ngrok