A primeira muralha!

Segurança no front end!

alvarocamillont.dev

alvarocamillont.dev

Alvaro Camillo

alvarocamillont.dev

alvarocamillont.dev

Introdução

alvarocamillont

alvarocamillont.dev

Single Page Applications

X

Multi Page Applications

alvarocamillont.dev

Multi Page Applications

  • Aplicações tradicionais
  • Servidor entrega o html

alvarocamillont.dev

Single Page Applications

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

alvarocamillont

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.

alvarocamillont.dev

Registro do Usuário

alvarocamillont.dev

Sua aplicação precisa de todos esses dados?

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

alvarocamillont.dev

alvarocamillont.dev

Força da senha

alvarocamillont.dev

CAPTCHA

alvarocamillont.dev

Login

alvarocamillont.dev

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

alvarocamillont.dev

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

alvarocamillont.dev

Contrate

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

alvarocamillont.dev

Acesso

alvarocamillont.dev

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.

alvarocamillont.dev

Cookie

Atributos importantes:

  • Expire
  • HttpOnly
  • Secure

  

alvarocamillont.dev

Sessão

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

alvarocamillont.dev

JWT

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

alvarocamillont.dev

JWT

  • Não insira informações sensíveis no payload.
  • Armazenamento:
    • Memória (Store)
    • Cookie
      • Cuidado com o limite 4kb.

  

alvarocamillont.dev

Route Guard

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

  

alvarocamillont.dev

Reforçando as defesas

alvarocamillont.dev

HTTPS

alvarocamillont.dev

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.

alvarocamillont.dev

Cross-Site Request Forgery (CSRF)

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

alvarocamillont.dev

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

alvarocamillont.dev

Cross-Site Scripting (XSS)

alvarocamillont.dev

Cross-Site Scripting (XSS)

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

alvarocamillont.dev

Conclusão

alvarocamillont.dev

O usuário

alvarocamillont.dev

Segurança é um processo

alvarocamillont.dev

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

alvarocamillont.dev

Fontes