A primeira muralha!

Segurança no front end!

Alvaro Camillo

Introdução

Single Page Applications

X

Multi Page Applications

Multi Page Applications

  • Aplicações tradicionais
  • Servidor entrega o html

Single Page Applications

  • Experiência de um aplicativo nativo
  • Página é manipulada no navegador
  • Servidor entrega os dados (API)

Os riscos do Front-End

  • Multi page possui formas consolidadas de invasão
  • SPAs necessitam que todo o código da interface seja carregado no navegador.

Devemos preparar e proteger o máximo a nossa interface

Porém ela é a primeira defesa, não a única.

Registro do Usuário

Sua aplicação precisa de todos esses dados?

  1. Mínimo Atrito
  2. Menor exposição
  3. LGPD e GDPR

Força da senha

Força da senha

Formulários semânticos

  • Utilize corretamente as tags html.
    • Coloque o type correto no campo.
  • Acessibilidade
  • Ferramentas de Vault de senhas.

CAPTCHA

Armazenamento de Senha

  • NUNCA armazene a senha em texto no banco.
  • Sempre grave a senha em hash e salt.
  • Utilize a implementação do seu backend (Argon2 é a melhor segundo OWASP)

Login

Não ajude o invasor

  • Não informe quais campos, usuário ou senha estão errados.
  • Cuidado com o console log.
  • Retorne o código HTTP correto (401)

Controle as tentativas

  • Realize um bloqueio de senha após n tentativas.
  • Realize um bloqueio por tempo, de preferência aleatório
  • Não confie apenas em CAPTCHAS

Contrate

Em casos de conflitos de priorização, considere o uso de algum serviço como OKTA, Auth0,AWS ou Azure

Acesso

Cookie

  • Arquivo de texto
  • Salvo a partir de um acesso a um site
  • Tamanho máximo de 4 Kb
  • Após recebido pelo navegador, ele anexa a toda requisição subsequente.

Cookie

Atributos importantes:

  • Expire
  • HttpOnly
  • Secure

  

Sessão

  • Identificador da conexão
  • Criado a partir de um acesso a um site
  • Armazenado no servidor

JWT

  • Objeto JavaScript
  • Representado através de uma string Base64
  • Auto assinado

JWT

  • Não insira informações sensíveis no payload.
  • Armazenamento:
    • LocalStorage
    • Cookie
      • Cuidado com o limite 4kb.

  

  • Serviço que implementa uma interface de controle rota.
  • Não garante segurança.
    • Cuide da segurança da API.

  

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate {

constructor(public auth: AuthService, public router: Router) {}

    canActivate(): boolean {
        if (!this.auth.isAuthenticated()) {
            this.router.navigate(['login']);
            return false;
        }
            return true;
        }
}

Reforçando as defesas

HTTPS

Cross-Site Request Forgery (CSRF)

  • Explora a confiança do site no navegador do usuário.
  • O invasor pode utilizar criando:
    • Sites
    • E-mail
    • Formulários ocultos.

Cross-Site Request Forgery (CSRF)

@NgModule({
    ...
    imports: [
    ...
        HttpClientXsrfModule.withOptions({
            cookieName: 'csrf-token',
            headerName: 'csrf-token'
        })
    ],
    ...
    bootstrap: [AppComponent]
})

Cross-Site Scripting (XSS)

  • Execução de código malicioso no front-end
  • O invasor pode utilizar :
    • Dependências maliciosas
    • Campos de input sem tratamento

Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS)

  • O Angular realiza a sanitização dos templates.
  • Proteja também o Back-End.

Conclusão

O usuário

Segurança é um processo

  • Segurança é tão fundamental quanto testes!
  • Deve começar na concepção do projeto.
  • Testes internos
  • Testes externos

Fontes