DEV Community

Felippe Regazio
Felippe Regazio

Posted on • Updated on

10 Dicas de Segurança para Projetos Front End

1. Evite guardar tokens JWT (ou tokens importantes) na local storage

A LS é vulneravel a ataques XSS. O ideal é setar tokens num Http Only Signed Cookie, ou procurar outros meios de sessão afim de evitar a local storage pra guardar informações sensiveis.

Referencia de leitura para o item 1:

Here's why storing JWT in local host storage is a great mistake:
https://medium.com/kanlanc/heres-why-storing-jwt-in-local-storage-is-a-great-mistake-df01dad90f9e

2. Dados que serao interpretados como objetos ou HTML devem ser sanitizados e/ou escapados

Qualquer input/output vindo de wysiwyg, rich editor, markdown editor por exemplo. Isso evita ataque XSS (e roubo de tokens da storage rs)

Referencia de leitura para o item 2:

Dont sanitize, do escape!
https://benhoyt.com/writings/dont-sanitize-do-escape/

3. Validações de input devem ocorrer no front e no backend

Jamais uma validação critica ou de regra de negocio deve ser front only. Ex: input de email valida se a str é email? Valide no front e no back. No front pra evitar request desnecessária, no back pra evitar ataques ao DB.

Referencia de leitura sobre o item 3:

What is No-SQL Injection
https://www.invicti.com/blog/web-security/what-is-nosql-injection/

4. Não trafegue informações sensiveis via query param na URL

Exemplo: https://yoursite.com?token={important_token} - Se um atacante estiver assistindo o trafego da vitima ou fazendo sniffing, esse token nao sera criptografado e sera exposto numa conexão http-only. Caso vc esteja em uma conexao SSL, a query string estará resguardada na body, porem ainda sim estará exposta em server logs, historico do browser e JS history object num possivel XSS.

Referencia de leitura sobre o item 4:

Session token in URL - Vulnerability
https://www.acunetix.com/blog/web-security-zone/session-token-in-url-vulnerability/

5. Evite retornar/consumir um Array JSON diretamente via API

Tipo:

RESPONSE: "[{ ... }]"

Juro, isso expoe uma vulnerabilidade chamada "Primitive Object Override Attack" em que um atacante faz override de metodos de arrays. Pra saber mais, leia o link abaixo

Referencia de leitura sobre o item 5

Why Facebook's API starts with a for loop?
https://dev.to/antogarand/why-facebooks-api-starts-with-a-for-loop-1eob

Essa issue ja foi completamente corrigida em todos os browsers modernos há alguns anos. Vc nao precisa se preocupar com isso a menos que ofereça suporte para "old browsers"

6. Evite setar innerHTML diretamente em elementos no DOM

Evite muito setar innerHTML no codigo principalmente se o valor passou por algum input de usuario. Se precisar, procure sanitizar ou escapar o conteudo. Sempre que possivel, prefira utilizar innerText/textContent.

Referencia de leitura sobre o item 6:

DOM Manipulation and the dangers of innerHTML
https://betterprogramming.pub/dom-manipulation-the-dangers-of-innerhtml-602f4119d905

7. Evite permitir ao usuario fazer o input de URL ou load de SVG

Por ex: usuario inputar url a ser usado numa tag IMG. Diversos ataques podem acontecer, desde XSS via SVG ou PDF, ou Sniffing ao apontar o GET pra uma URL maliciosa
Referencia de leitura sobre o item 7 (embora fale sobre svg, a dinamica pra outros artefatos eh parecida: algo vem junto seja via request ou binary).

Do you allow user to load SVG? You have XSS
https://research.securitum.com/do-you-allow-to-load-svg-files-you-have-xss/

8. Utilize noreferrer e noopener para links cross-origin (de outro dominio)

Quando vc abre uma nova aba, a depender do contexto o browser pode enviar o objeto window da anterior para o novo endereço, permitindo assim umas bizarrices, vide link abaixo.
Referencia de leitura sobre o item 8:

External anchors and the rel noopener
https://web.dev/external-anchors-use-rel-noopener/

9. Adicione a Header "X-Frame-Options: DENY" ao seu front se possivel

Isso evita que pessoas embedem seu serviço num iframe e pratiquem ataques como "click highjack" em que um site é posto num iframe, e uma div eh inserida por cima pra interceptar o comportamento.

Referencia de leitura sobre o item 9:

Application Security: Clickjacking Attack
https://www.imperva.com/learn/application-security/clickjacking/

10. Essa é a mais simples de todas

Procure manter as dependencias atualizadas e ficar esperto com as vulnerabilidades que sao reportadas em pacotes NPM.

Oldest comments (3)

Collapse
 
brunot profile image
Bruno

Ótimas dicas!!

Collapse
 
diegoosan profile image
Diego Santos

Muito top!!!

Collapse
 
lucasm profile image
Lucas Menezes

Bom demais !