Como prevenir ataques XSS (Cross-Site Scripting) em JavaScript

Como evitar injeção de código malicioso em JavaScript?

O Cross-Site Scripting (XSS) é um tipo de vulnerabilidade de segurança que permite a um atacante injetar scripts maliciosos em páginas da web visualizadas por outros usuários. Esses scripts podem ser usados para roubar dados sensíveis, como cookies e informações de login, ou até mesmo para alterar o conteúdo da página. O XSS é uma das vulnerabilidades mais comuns encontradas em aplicações web e pode ser evitado adotando boas práticas de segurança no código JavaScript.

Tipos de ataques XSS

Existem três tipos principais de ataques XSS, que diferem na forma como o script malicioso é injetado e executado:

1. XSS Refletido: O ataque ocorre quando o código malicioso é enviado em uma requisição HTTP (como um parâmetro de URL ou de formulário) e refletido pelo servidor de volta para o navegador sem validação adequada. O código malicioso é executado imediatamente, geralmente sem a vítima perceber.

Exemplo de XSS refletido:

// Parâmetro de URL ou de formulário
let search = location.search;

// Script malicioso injetado
let pesquisa = 'termos de pesquisa <script>alert("Ataque XSS")</script>';

document.body.innerHTML = pesquisa;

Neste caso, o código malicioso é refletido e executado assim que o parâmetro search é processado.

2. XSS Armazenado: O código malicioso é armazenado no servidor, por exemplo, em um banco de dados ou em um sistema de comentários, e depois é exibido para os usuários que acessam a página. Esse tipo de ataque é mais persistente, pois o código malicioso pode ser executado sempre que a página é acessada.

Exemplo de XSS armazenado:

// Entrada do usuário armazenada no banco de dados
let comentario = '<script>alert("Ataque XSS Armazenado")</script>';

// Exibindo o comentário na página
document.getElementById('comentarios').innerHTML = comentario;

Neste caso, o script malicioso será executado toda vez que a página de comentários for acessada, afetando todos os usuários que visualizam o conteúdo armazenado.

3. XSS DOM-based: Este tipo de ataque ocorre quando o código malicioso é injetado no lado do cliente, ou seja, no código JavaScript que manipula o DOM da página. O script malicioso é injetado no navegador do usuário e pode ser executado quando o DOM é modificado.

Exemplo de XSS DOM-based:

let url = location.hash;

// Injeção maliciosa através da URL
let texto = '<script>alert("Ataque XSS DOM")</script>';

document.body.innerHTML = texto;

Neste exemplo, o atacante injeta um código malicioso através da URL, que é processado e executado no lado do cliente.

Como prevenir ataques XSS?

A prevenção de ataques XSS envolve garantir que as entradas de usuários sejam sempre validadas, escapadas e sanitizadas antes de serem usadas em seu código. Aqui estão algumas práticas recomendadas para proteger sua aplicação contra XSS:

1. Escape as entradas de usuários: Escapar caracteres especiais, como <, >, &, ", ', e outros, impede que esses caracteres sejam interpretados como código. Isso garante que qualquer conteúdo inserido pelo usuário seja tratado como texto e não como código executável.

Exemplo de escapatória de entradas de usuários:

function escaparHTML(str) {
  return str.replace(/[<>"']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

let comentario = '<script>alert("Ataque XSS")</script>';
let comentarioEscapado = escaparHTML(comentario);
document.getElementById('comentarios').innerHTML = comentarioEscapado;

Neste exemplo, a função escaparHTML() converte os caracteres especiais em suas representações HTML, garantindo que o código malicioso não seja executado.

2. Usar cabeçalhos de segurança (CSP): A Política de Segurança de Conteúdo (CSP) é uma ferramenta eficaz para prevenir ataques XSS. Ao configurar um cabeçalho CSP, você pode controlar de onde os scripts podem ser carregados, evitando que scripts maliciosos sejam executados.

Exemplo de configuração de CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.exemplo.com;

Esta configuração permite apenas que scripts de fontes confiáveis, como https://apis.exemplo.com, sejam executados.

3. Sanitizar entradas de usuários: Use bibliotecas de sanitização de entradas, como DOMPurify, para remover qualquer conteúdo malicioso inserido pelo usuário antes de exibi-lo na página.

Exemplo de uso do DOMPurify:

let comentario = '<script>alert("Ataque XSS")</script>';
let comentarioSanitizado = DOMPurify.sanitize(comentario);
document.getElementById('comentarios').innerHTML = comentarioSanitizado;

A biblioteca DOMPurify remove as tags e atributos maliciosos de qualquer entrada de usuário, evitando que código malicioso seja executado.

4. Evitar o uso de eval(): A função eval() é muito perigosa porque permite a execução de código JavaScript dinâmico, o que pode ser explorado por atacantes para injetar scripts maliciosos. Evite seu uso sempre que possível.

5. Limitar o acesso aos dados sensíveis: Proteja informações sensíveis, como tokens de autenticação e dados do usuário, para garantir que apenas usuários autorizados possam acessá-los.

Conclusão

Os ataques XSS são uma das vulnerabilidades mais comuns e perigosas em aplicações web. No entanto, com boas práticas de segurança, como escapar entradas de usuários, usar CSP, sanitizar conteúdo e evitar o uso de eval(), você pode proteger sua aplicação contra esses ataques e garantir que seus usuários naveguem de maneira segura. Adotar essas práticas é essencial para o sucesso a longo prazo de suas aplicações web.

Prevenindo ataques XSS em JavaScript com boas práticas de segurança

XSS é um dos ataques mais conhecidos na web e pode ser evitado com medidas de segurança apropriadas. A implementação de técnicas como validação e sanitização de entradas e o uso de CSP pode proteger significativamente a sua aplicação contra ataques XSS. Ao aplicar essas boas práticas, você não apenas melhora a segurança, mas também a confiança dos seus usuários.

Algumas aplicações:

• Utilizar CSP para restringir fontes de scripts e prevenir a execução de código malicioso.
• Escapar todas as entradas de usuários antes de inseri-las no DOM.
• Usar bibliotecas de sanitização como DOMPurify para garantir que o conteúdo dinâmico seja seguro.
• Evitar o uso de eval() e outras funções perigosas que possam ser exploradas por atacantes.

Dicas para quem está começando

• Sempre que possível, use DOMPurify para sanitizar entradas de usuários e impedir que scripts maliciosos sejam executados.
• Evite usar eval() para executar código dinâmico. Prefira alternativas mais seguras como JSON.parse().
• Adote o cabeçalho CSP em seu servidor para aumentar a segurança da sua aplicação.
• Escapar todas as entradas de usuários, especialmente ao trabalhar com dados inseridos no DOM ou HTML.

Compartilhe este tutorial