3

Olá,

Estou desenvolvendo uma aplicação e montando uma tela de registro de usuário, porém estou com uma dúvida se é possível de ocultar os dados que o axios está requisitando para a API. O meu código JavaScript, que implemento pelo EJS está da seguinte forma:

arquivo signup.esj que inclui o JavaScript na página:

<script src="<%= public_path + '/js/wp-signup.js' %>"></script>

arquivo wp-signup.js que é responsável por fazer a requisição POST e gravar os dados no MongoDB:

import axios from 'axios';

class App {
    constructor() {
        this.nameEl = document.getElementById('register-name');
        this.lastnameEl = document.getElementById('register-lastname');
        this.emailEl = document.getElementById('register-email');
        this.passwordEl = document.getElementById('register-password');
        this.agreeEl = document.getElementById('register-agree');

        this.formEl = document.getElementById('register-form');

        this.successMessage = document.getElementById('register-success');

        this.events();
    }

    events() {
        this.formEl.onsubmit = () => this.makePostRequest();
    }

    async makePostRequest() {
        event.preventDefault();

        await axios({
            method: "post",
            url: 'http://localhost:3000/users',
          },
            data: { name: this.nameEl.value, lastname: this.lastnameEl.value, email: this.emailEl.value, password: this.passwordEl.value }
        })
        .then( (response) => {
            this.successMessage.innerHTML = response.data.message;

        })
        .catch( (error) => {
            this.errorMessage.innerHTML = error.response.data.error;
        })
    }
}

new App();

Não há problema com o código, o que eu gostaria de saber é:

Se o usuário acessar a aba de desenvolvedor (F12 no chrome) e ir até

SOURCES > PUBLIC > JS > wp-signup.js 

que é o arquivo onde está o código acima, ele irá ver todo o processo que faço para da verificação até a requisição do POST, além do payload da requisição, há alguma forma de ocultar isto do usuário ? Há uma forma mais aconselhada de fazer este tipo de operação utilizando NodeJS/EJS/JavaScript/MongoDB ?

1
  • você já tentou usar babel para transpilar o seu código? de qualquer forma você pode optar pela via de usar um SPA instead. Commented 4/01/2020 às 2:16

2 Respostas 2

6

É impossível esconder HTML, CSS ou JavaScript do cliente. O máximo que você pode fazer é usar ferramentas de minificação (conforme sugerido pelo @Costamilam) ou obfusfação. Mesmo assim, se o código está no cliente, nenhuma dessas opções é realmente efetiva para esconder o código, já que se uma pessoa realmente quiser ver como funciona o código, ela irá conseguir. No entanto, técnicas como a minificação raramente são usadas como forma de ofuscar o código, mas sim para melhorar a performance de um recurso (na maioria das vezes, JavaScript ou CSS).

Desse modo, não é ideal se preocupar em "esconder" o código utilizado no front-end, já que isso pode ser até um sinal de que há algum problema nele. Você deve focar em torná-lo seguro. Só isso.

Ademais, muitas pessoas buscam "esconder" o código para evitar cópias. No entanto, tudo, com o código ou não, pode ser reproduzido (melhor, inclusive), então também não acho que isso seja uma boa razão para esconder o código.

Obviamente, há casos em que realmente é necessário esconder o código. Como por exemplo, um código do back-end, em que você precisa manter fora do alcance do usuário chaves de APIs, senhas e credenciais de serviços, como do banco de dados. Mas como esse tipo de informação não é utilizada no front-end, você realmente não precisa se preocupar. :)

Vale ressaltar, ainda, que mesmo se fosse possível esconder o código JavaScript que envia os dados ao back-end, ainda sim seria possível verificar o payload dos dados enviados através da aba "Network" das ferramentas do desenvolvedor, que é capaz de analisar qualquer requisição feita pelo seu website.

inserir a descrição da imagem aqui

Capturei a imagem acima a partir da edição desta resposta, analisando uma requisição XHR, na aba "Network" das ferramentas do desenvolvedor. Como você pode ver, é possível inspecionar todo o payload de dados enviados e recebidos, apesar de que na imagem ampliei somente uma pequena parte desses dados por fins de segurança.

Em suma, devemos focar na segurança do seu website, e não em esconder o código do front-end. Usar HTTPS, por exemplo, é infinitamente mais importante que esconder o código, já que um site com HTTP pode ser facilmente "interceptado" por outros usuários na rede.

2
  • 1
    Foi bom focar que, do ponto de vista de segurança, isso é só perda de tempo. Sempre esqueço da palavra "obfuscação" e acabo usando o aportuguesado do ingês uglify
    – Costamilam
    Commented 4/01/2020 às 4:29
  • Exatamente... Eu mesmo já me preocupei muito em "esconder" o código para que as pessoas não fossem copiar (quem nunca né?)... Até que um colega meu me disse que qualquer um sempre poderia copiar, com ou sem o código. Realmente: uma perda de tempo. :-) Commented 4/01/2020 às 4:30
4

Não...

Se você precisa passar todos esses dados do cliente pro servidor afim de cadastrar o usuário (ou fazer qualquer outra coisa), o cliente, em algum momento, vai precisar desses dados, não tem como deixar oculto dele ou remove-los (se remover, o servidor não irá recebe-los)

O mesmo vale pro código JavaScript, o cliente precisa de todo esse código para renderizar a página corretamente e todas as ações do usuário funcionarem como o esperado

Não resolve, mas ajuda...

Você pode minificar e uglyficar, isso o tornará quase ilegível a olhos humanos, mas o computador continuará entendendo como se fosse o original. Isso é aplicado tanto ao código JavaScript, HTML, CSS como ao conteúdo das requisições e respostas, os nomes e valores de cabeçalhos custumizados e o corpo podem ser reduzidos, porém isso implica alterar as partes correspondentes na sua API

Exemplo de minificação e uglyficação de JavaScript:

var button = document.getElementById('myButton');

function createUser() {
    // ...
}

button.addEventListener('click',createUser);

É transformado para:

var a=document.getElementById('myButton');var b=()=>{}a.addEventListener('click',b)

O código HTML e CSS é semelhante

Como pode ver, é removido espaços e quebras de linha, os nomes das variáveis são alterados para ficarem mais curtos, entre outras coisas. O resultado varia de acordo com a ferramenta (Gulp, Grunt, rollup.js, etc) e configurações utilizadas

Na requisição é incomum o uso de cabeçalhos custumizados, mas você pode fazer o mesmo que no nome das variáveis JavaScript, trocando por nomes menores. No corpo, geralmente, se trabalha com o formato JSON no caso das APIs, pode trocar o nome das propriedades do objeto enviado igual ao caso anterior (o equivalente vale aos outros formatos)

Mas ter seu código e os dados trafegados visível ao seu usuário é um problema?

Quantos usuários seus irão procurar o código fonte da aplicação? Quase sempre é nenhum, então não tem porque se preocupar. Além disso, também não tornará seu código mais seguro, se ele é inseguro, isso não irá resolver, apesar de existir a técnica de Segurança por Obscuridade ou security by obscurity, nesse caso, não faria diferença

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .