10 Dicas de Segurança para Projetos Front End

← ← ←   5/2/2022, 6:27:16 PM | Posted by: Felippe Regazio

---

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: Post Link

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! Post Link

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 Post Link

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 Post Link

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? Post Link

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 Post Link

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 Post Link

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 Post Link

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 Post Link

10. Essa é a mais simples de todas

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