Defendendo-se Contra XSS, CSRF e Mais
Como sabemos, o vasto ecossistema de ferramentas e tecnologias disponíveis online facilita a execução de ataques em websites.
Há vários tutoriais nos quais qualquer indivíduo pode agir em qualquer site e assim realizar um ataque, sendo o mais simples deles os ataques XSS.
Alguns países, como o Brasil, não dedicam bastante atenção à segurança de websites governamentais, o que acaba favorecendo ataques e até mesmo vazamentos de dados, como o antigo ataque que resultou no vazamento de 220 milhões de dados.
Imagem ilustrativa
https://exame.com/tecnologia/vazamento-de-dados-de-220-milhoes-de-brasileiros-nao-aconteceu-da-noite-para-o-dia/
Então neste artigo, exploraremos os desafios comuns de segurança em aplicações Angular e como implementar medidas eficazes para proteger nossos projetos de ataques simples.
1. Cross-Site Scripting (XSS):
O XSS é uma ameaça comum em aplicações web e pode ocorrer quando dados não confiáveis são inseridos diretamente no DOM. Angular oferece defesas robustas contra XSS através da técnica de interpolação segura. Utilizando a interpolação segura, o Angular garante que qualquer código malicioso seja tratado como dados, impedindo sua execução.
// Exemplo sem nenhuma segurança
const userInput = 'html malicioso'; // o usuário pode colocar tags <script> aqui
const Html = `<div>${userInput}</div>`);
// Exemplo de interpolação segura
const userInput = 'Texto seguro';
const Html = this.sanitizer.bypassSecurityTrustHtml(`<div>${userInput}</div>`);
2. Cross-Site Request Forgery (CSRF):
O CSRF ocorre quando um atacante induz um usuário a executar ações indesejadas em uma aplicação na qual o usuário está autenticado. Para mitigar esse risco, Angular utiliza tokens anti-CSRF, geralmente incorporados em formulários.
// Exemplo de token anti-CSRF em Angular
const csrfToken = this.http.get('/api/csrf-token');
this.http.post('/api/sensitive-operation', data, { headers: { 'X-CSRF-Token': csrfToken } });
3. Controle de Acesso:
Garantir que os usuários tenham acesso apenas às partes da aplicação apropriadas é crucial. Angular oferece recursos de roteamento e guarda de rotas para controlar o acesso com base nas permissões do usuário.
// Exemplo de guarda de rota em Angular
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.authService.isAdmin()) {
return true;
} else {
this.router.navigate(['/unauthorized']);
return false;
}
}
4. Autenticação e Autorização:
Implementar um sistema de autenticação seguro é essencial. Angular facilita a integração com diferentes esquemas de autenticação, como OAuth e JWT. Além disso, garantir que as autorizações sejam aplicadas corretamente em todas as camadas da aplicação é fundamental para evitar brechas de segurança.
// Exemplo de autenticação com JWT em Angular
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
this.http.get('/api/secure-data', { headers });
5. Segurança no Backend:
A segurança não é responsabilidade exclusiva do frontend. É crucial implementar práticas seguras no backend, como validação adequada de entrada, prevenção de injeção de SQL e proteção contra ataques de força bruta.
Obrigado por ler!
Referências e outros artigos:
