Exposição de rotas no React

Estou migrando do PHP para o React/Node. Fiz um sistema de autenticação, onde o Front comunica o Back e verifica se o token é válido ou não. O problema é que as rotas do meu sistema estão definidas no Front. Cada rota carrega um componente diferente, uma funcionalidade diferente.

Minha dúvida é se o cliente tem acesso a essas rotas pela ferramenta de desenvolvedor. Pensando em segurança, não faria sentido poder visualizar a configuração de rotas se nem autenticação eu tenho. No PHP, o servidor quem fazia o filtro de rotas e carregava as Views, o cliente não sabia o que tinha atrás da tela de “Login”.

Pensei em jogar o React para o Back e entregar as telas renderizadas para o cliente (SSR), assim como o PHP faz. Mas o que me incomoda é que isso foge um pouco do objetivo do React não? Até onde vi, React é Front.

Dado esse problema, me pergunto se é uma boa prática renderizar o React no Back para não expor os endpoints da aplicação. Independente dos mecanismos de proteção, exibir as urls é uma camada de segurança a menos.

A rota que vc fala é o endpoint do back? ou só a rota normal da url mesmo?

—-

De qualquer forma, toda regra de negócio deve ser feita no back, no front vc só faz as validações mais simples, verifica se e-mail e senha foram preenchidos e etc…

——-

Fora q não tem problema vc “expor” os endpoints do back se colocar uma segurança básica no server (jwt, limitar qtd de requests, cors…), mas já que vc tá com medo dos dados que serão enviados, pode começar a enviar o hash do body pelo React, e reverter esse hash no node, exemplo::

Obrigado pelo retorno Rodrigo :grin:

Rapaz, eu não consegui nem dormir com essa dúvida martelando na minha cabeça.

Na pergunta, me refiro as rotas do Front. Quando buildo o React, todo meu código é compilado e gera um bundle. Isso faz com que a configuração de rotas seja levada junto não? Digo, o cliente pode visualizar se fuçar um pouco.

Até o momento, desenvolvi apenas REACT com SPA, o “react-router-dom” está responsável por vigiar as requisições e carregar os componentes.

No seu ponto de vista, contanto que os endpoints do back estejam seguros, não tem problema as rotas serem expostas? Sim, a lógica estará toda no Back, mas na minha cabeça, não seria difícil alterar o JS para acessar uma rota privada do react-router-dom e, mesmo que a página não retorne nada, devido a falta do token de autenticação, seria uma brecha para estudar os recursos mais básicos da aplicação.

Tudo isso dentro do contexto SPA. Estou ciente que o SSR resolve o problema, mas ao mesmo tempo, adotar o React para o Back dificulta a interação com os componentes, foge um pouco da ideia.

As componentes são montados pelo routes/index.js, segue imagem:
IMG-20230806-WA0000

Meu nome é Abner.


Entendi… Vc pode usar o GENERATE_SOURCEMAP=false na hora de fazer o build. Isso vai fazer com que o source de fato não seja buildado.

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}