Aerolitos, Permissionamento e Segurança no Front-end com Vuejs.

Palestra feita no TDC 2021, fornecendo uma visão geral sobre como estamos lidando com a camada de segurança em nosso backoffice usando JWT, além dos superpoderes do Vue.js para garantir de forma escalável e otimizada como podemos lidar com permissionamento de forma transparente.

Transcript

1. Permissionamento e Segurança no front-end com Vue.js Cristofer Sousa Engineer Front-end
2. { name: 'Cristofer Sousa', isDad: true, area: 'Front-End Developer', company: { name: 'Sinch Latam', squad: 'Sparta', }, comunnity: Opensanca, social: { twitter: '@cristofersousa', linkedin: 'cristofersousa', site: 'cristofersousa.github.io', }, }; Hellow!
3. Sparta é o time responsável pelo desenvolvimento, manutenção e evolução da plataforma core da Sinch Latam. Desde mensagens SMS, até conversas de chatbot de whatsapp. A plataforma core é o broker de mensagens, responsável de receber as solicitações de envio e enviar para o terceiro responsável de fazer chegar a mensagem, seja ele operadora de SMS, seja o Facebook, seja qualquer outro canal. Resumindo: Tudo bruxão e bruxonas (temos duas spartanas no times e vamos aumentar! )
4. Faça parte do time! Latam.sinch.com/careers @sinch.latam linkedin.com/sinch medium.com/wearesinch
5. Agenda 01 Web Tradicional vs Single Page Applications 02 JSON Web Token 03 Cookie vs LocalStorage 04 Access Control List 05 Conclusão
6. O que é segurança no front-end?
7. Geralmente as pessoas estão muito familiarizadas com a abordagem tradicional de autenticação e gerenciamento de sessão de usuários em um ambiente de servidor. WebApp tradicionais
8. Diagrama Em uma aplicação tradicional o servidor e o banco de dados validam as credencias do usuário e as incluem na tabela de sessões.
9. API 1. Uma API é stateless(não orientada a estado), ou seja, não temos conceito de sessões de usuário. 2. A lógica da aplicação é entregue completa ao navegador, portanto não é possível limitar a exposição do código.
10. Single Page Applications Se o cliente(navegador) possui todos os recursos disponíveis, e sabemos que a API não trabalha com conceito de sessões, precisamos fazer uma tratativa na nossa WebApp, para controlarmos no front-end a sessão do usuário, com isso toda responsabilidade de autorização e autenticação a determinado recurso provido pelo servidor fica a critério do front-end.
11. Uma maneira bastante eficiente de manter os dados do usuário no próprio navegador para gerir a sessão é empregar o JSON Web Token(JWT)
12. Diagrama Uma maneira bastante eficiente de manter os dados do usuário no próprio navegador para gerir a sessão é empregar o JSON Web Token(JWT)
13. Um JWT é usado para transportar dados, comumente entre API no servidor e a SPA no navegador. Um JWT pode também ser usado pelo servidor que gerou o token para autenticar um usuário, quando é devolvido como resposta a uma solicitação subsequente.
16. Para minimizar o período de tempo que um invasor pode lançar ataques em sessões ativas e sequestrá-los, é obrigatório definir tempos limite de expiração para cada sessão, estabelecendo por quanto tempo uma sessão permanecerá ativa. A expiração de sessão insuficiente pelo aplicativo da web aumenta a exposição de outros ataques baseados em sessão, pois para o invasor ser capaz de reutilizar um ID de sessão válido e sequestrar a sessão associada, ele ainda deve estar ativo. Referência: Session Expiration - OWASP
17. Considerando o retorno da API com token, começa de fato a responsabilidade no front-end sobre a parte de segurança, onde iremos armazená-lo? Podemos deixar em memória?
18. Cookie ou LocalStorage
21. Precisamos informar em nossas rotas, quais o usuário possui livre acesso e quais necessitam de credenciais. Podemos usar facilmente um navigation guard em nossas rotas, da qual ele valida se tem o acesso antes de redireciona-lo para a rota requisitada.
23. ACL - Lista de Controle de Acessos
24. ACL - Lista de Controle de Acessos
25. ACL - Lista de Controle de Acessos
29. Sapien in monti palavris i pareci latim, mas tu tem alguma duvidis? console.log('Helpisss, ajuda Mussaim!');
30. twitter @cristofersousa www cristofersousa.github.io email cristofer.sousa@sinch.com Obrigado