A primeira muralha!

Segurança no front end!

alvarocamillont.dev

Alvaro Camillo

Desenvolvedor
TOTVS
Pai do Mario e Gabriel
Games
alvarocamillont.dev
npx alvarocamillont

alvarocamillont.dev

Introdução

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

Devemos preparar e proteger o máximo a nossa interface

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

alvarocamillont.dev

Registro do Usuário

alvarocamillont.dev

Sua aplicação precisa de todos esses dados?

Mínimo Atrito
Menor exposição
LGPD e GDPR

alvarocamillont.dev

Força da senha

alvarocamillont.dev

Força da senha

alvarocamillont.dev

Formulários semânticos

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

alvarocamillont.dev

CAPTCHA

alvarocamillont.dev

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)

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 (401)

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:
- LocalStorage
- 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.

alvarocamillont.dev

Route Guard

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;
        }
}

alvarocamillont.dev

Reforçando as defesas

alvarocamillont.dev

HTTPS

USE SEMPRE
Let's Encrypty

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