Os 5 principais recursos JavaScript subutilizados

JavaScript é uma linguagem de programação essencial, mas muitas vezes suas capacidades são pouco exploradas. JS possui uma gama de recursos que podem ser aplicados a um número incontável de casos de uso, ajudando os desenvolvedores a criar código eficiente, reutilizável e adaptável.

Neste artigo, exploraremos os cinco principais recursos JavaScript subutilizados e seus casos de uso. Também forneceremos exemplos de código para mostrar como JS pode ser usado para quase tudo, desde resolver problemas de gerenciamento de datas até funções de encadeamento e até mesmo detectar sites maliciosos.

1. JavaScript Hooking para detectar sites maliciosos

Um recurso interessante do JS é o uso de ganchos como um método eficaz de saber se um site é falso ou não, tudo sem qualquer conhecimento específico de OpSec ou segurança cibernética em geral.

Hooks são funções JS que permitem que um desenvolvedor “se conecte” aos recursos de estado e ciclo de vida da altamente popular biblioteca de desenvolvimento de UI, React. Isso significa que os desenvolvedores podem usar o React sem precisar escrever classes individuais.

No exemplo a seguir, focaremos em páginas da web construídas com componentes estáticos e dinâmicos. Os componentes estáticos são sempre declarados como parte do código-fonte HTML e renderizados pelo navegador ou pelos plug-ins instalados. Enquanto isso, os componentes dinâmicos incluem scripts como JS que modificam documentos HTML adicionando, alterando ou removendo certos elementos, bem como utilizando XMLHttpRequest e objetos semelhantes para interação com o servidor.

Como funciona

Um kit de exploração (um kit de ferramentas usado por cibercriminosos) e sites ou aplicativos da Web maliciosos geralmente dependem de ofuscação para contornar métodos de proteção baseados em assinaturas. JS pode ser usado para desofuscar sites, modificando o código e seus elementos para que possam ser lidos e processados ​​pelo navegador.

Os kits de exploração geralmente contêm grandes pedaços de código para ocultar a exploração e confundir os navegadores da web. Uma vez decodificados por JS, novos elementos de página são adicionados – como novos elementos DIV, novos elementos JS e novos elementos de miniaplicativos Java que carregam o exploit.

Isso significa que os ganchos JS podem ser aplicados a funções de script durante o processo de desofuscação, emitindo alertas se algo incomum for detectado, como a adição de elementos de miniaplicativos Java potencialmente maliciosos.

Para fazer isso, devemos primeiro nos concentrar em conectar os métodos primários de adição de elementos:appendChild, replaceChild e document.write. O quarto método é um pouco mais desafiador; então, em vez disso, o foco deve ser conectar funções específicas, como document.getElementById() ou document.createElement(). Os objetos podem então ser adicionados ao objeto MutationObserver ou podemos usar eventos de mutação e monitorar quaisquer alterações.

Abaixo está um exemplo de função que registra ganchos:

function jsh_hook_function(object, property, pre_h_func, post_h_func) {
    const original = object(property);
    object(property) = function(...args) {
        if (pre_h_func) {
            pre_h_func.apply(this, args);
        }

        const result = original.apply(this, args);

        if (post_h_func) {
            post_h_func.apply(this, (args, result));
        }

        return result;
    };
}

2. Gere relatórios em Node.js

Os relatórios e a documentação são elementos-chave de uma estratégia robusta de segurança cibernética, mas podem ser um processo tedioso e demorado, especialmente quando se trata de informações mais confidenciais, como relatórios de pentesting, avaliações de vulnerabilidades e qualquer outra coisa relacionada à segurança. Jsreport é uma plataforma de relatórios especializada que foi desenvolvida no ambiente de execução JavaScript de código aberto, Node.js. A plataforma tem uma variedade de casos de uso, incluindo conversão de HTML para PDF.

Usando apenas o navegador Chrome, basta instalar o pacote jsreport npm e chamar uma única função. Além do HTML, a plataforma pode converter todos os tipos de mídias, possibilitando a geração de arquivos DOCX em PDFs apenas com JS ou até mesmo planilhas inteiras, incluindo fórmulas. Isso significa que os dados podem ser mantidos em uma única plataforma e convertidos em relatórios sem ferramentas de terceiros – ideal para documentação de segurança cibernética e exportação de relatórios de pentesting para que testes, análises e armazenamento de dados sejam centralizados.

Jsreport não é específico do Google Chrome e é compatível com uma variedade de serviços e tecnologias para impressão. Isso inclui Apache FOP para renderizar arquivos XML.

Como funciona

Instale o jsreport npm e chame uma função:

const http = require('http');
const jsreport = require('jsreport');

http.createServer(async (req, res) => {
  try {
    const result = await jsreport.render({
      template: {
        content: '<h1>Hello world</h1>',
        engine: 'handlebars',
        recipe: 'chrome-pdf'
      }
    });

    res.setHeader('Content-Type', 'application/pdf');
    result.stream.pipe(res);
  } catch (e) {
    res.writeHead(500, { 'Content-Type': 'text/plain' });
    res.end(`Error generating PDF: ${e.message}`);
  }
}).listen(1337, '127.0.0.1');

3. Controle o fluxo de execução com geradores

Geradores são um tipo de função que pode ser pausada e retomada, ajudando os desenvolvedores a manter mais controle sobre o fluxo de execução. Os geradores podem ser usados ​​para algoritmos de retrocesso, sequências infinitas e operações assíncronas; além disso, eles também permitem a criação de padrões de iteração do cliente.

É um recurso JavaScript poderoso e versátil que muitas vezes é subutilizado, e muitos desenvolvedores de software perdem a capacidade de ter controle máximo sobre a execução do código.

Como funciona

Aqui está um exemplo de código simples:

function* generatorFunction() {
  yield 'Hello';
  yield 'World';
}

const generator = generatorFunction();
console.log(generator.next().value); // Output: Hello
console.log(generator.next().value); // Output: World

Para especificar uma função geradora, primeiro o geradorFunction deve ser definido usando a sintaxe function*. Em seguida, a palavra-chave yield é usada para pausar a execução da função e retornar um valor. Em seguida, o objeto gerador é criado chamando o geradorFunction, seguido pela chamada do próximo método no gerador para retomar a execução. A propriedade value do objeto retornado também contém o valor produzido.

4. Melhor gerenciamento de datas com temporal

Ao longo dos anos, muitos desenvolvedores reclamaram de recursos inadequados de gerenciamento de datas em JavaScript. Felizmente, o Temporal forneceu uma solução nativa, oferecendo um objeto global padrão para substituir o objeto de data para resolver uma série de problemas. Por exemplo, um problema desconcertante era a má indexação, com meses começando em zero, enquanto os dias começavam em 1.

Com suporte para vários fusos horários e calendários não gregorianos, Temporal é uma solução pronta para uso que possui uma API fácil de usar que simplifica a análise de datas de strings. A natureza imutável (ou seja, não pode ser alterada) dos objetos Temporais também significa que as datas estarão imunes a bugs que causam modificações inesperadas.

Como funciona

Aqui estão vários métodos temporais que os desenvolvedores podem utilizar:

a) PlainDate() – Crie uma data sem hora.

new Temporal.PlainDate(2024, 7, 26);
Temporal.PlainDate.from('2024-07-26');
// both return a PlainDate object that represents 26th July 2024

b) PlainTime() – Crie um horário sem data.

new Temporal.PlainTime(20, 24, 0);
Temporal.PlainTime.from('20:24:00');
// both return a PlainTime object of 20:24

c) PlainMonthDay() – Cria mês e dia mas não atribui ano. Uma função útil para dias que ocorrem na mesma data todos os anos, como o Dia dos Namorados.

const valentinesDay = Temporal.PlainMonthDay.from({ month: 2, day: 14 });

5. Crie código reutilizável com funções de alta ordem

Em JavaScript, as funções são a prioridade, o que permite a criação de funções de alta ordem para estabelecer uma hierarquia de código. Funções de ordem superior transformam uma ou várias funções em argumentos ou podem ser usadas para retornar outra função. Isso fornece uma variedade de recursos, como composição, curry e encadeamento de funções – ajudando, em última análise, os desenvolvedores a criar código simplificado e modular que pode ser facilmente reutilizado em outros projetos.

Como funciona

Vamos considerar o encadeamento de funções como exemplo. Neste caso, o objeto é uma calculadora e, usando o encadeamento de funções, há muitas maneiras de alterar seu estado interno e retornar cada estado modificado sem problemas.

const calculator = {
  value: 0,
  add(num) {
    this.value += num;
    return this;
  },
  subtract(num) {
    this.value -= num;
    return this;
  },
  multiply(num) {
    this.value *= num;
    return this;
  },
  getValue() {
    return this.value;
  },
};

const result = calculator.add(5).subtract(2).multiply(3).getValue();
console.log(result); // Output: 9

A postagem Os 5 principais recursos JavaScript subutilizados apareceu pela primeira vez em The New Stack.