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.

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

CAPTCHA

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

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:
    • Memória (Store)
    • 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.
  • Guarda de Rota CanLoad

  

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

A primeira muralha! Segurança no front end! v2

By Alvaro Camillo Neto

A primeira muralha! Segurança no front end! v2

Segurança não deve ser apenas uma preocupação do desenvolvedor back-end ou infra. Ela deve ser uma preocupação de todos! Vamos aprender juntos algumas práticas e técnicas para proteger o seu front-end utilizando o framework Angular. Nessa apresentação mostrarei técnicas e ferramentas para o desenvolvedor front-end. Utilizarei o Angular para os exemplos mais as lições podem ser aplicadas para qualquer framework atual.

  • 1,313