Consumação de Dados de uma API-Restfull

[Adejair]

Olá galera, tudo bem? Gostaria da ajuda de vocês, estou com um problema de consumação de dados de uma API Restfull, eu gostaria de saber como vocês trabalham.

Meu Workflow é o seguinte:

• NodeJS
• Pug (Template Engine)
• ExpressJS
• ReactJS
  *Axios

Eu necessito ter um tratamento para o meu sistema de login, eu tenho todos os meus dados que são solicitados por uma APIRestfull, eu gostaria de saber como vocês fazem para poder esconder as rotas e renderizar os dados de vocês na tela. Pois esses dados são muito importantes, então não é interessante que qualquer pessoa possa ver as rotas. Como vocês fazem para esconder essas rotas? como vocês trabalham em relação a isso? Exemplos?

Obrigado desde já :)

[wmsbill]

Se o objetivo é ofuscar os paths do front end, acho que a solução seria colocar algum layer entre o front e as chamadas da API. Essa layer daria uma "enxugada" nos dados que você recebe da REST API específica.

Essa layer pode ser desde um serviço no seu backend quanto uma API SDK.

Pergunta, vc faz navegação HAL ou você sempre sabe o que vc vai chamar?

Espero ter ajudado de alguma forma.

[kazzkiq]

Cara, eu nunca mexi com React, mas em projetos com outros frameworks eu geralmente crio uma espécie de "middleware" em todas as rotas que devem ser protegidas, e verifico se o usuário está logado. Caso ele esteja, eu renderizo a view. Caso contrário, redireciono para a tela de login (lembrando que o login não deve possuir essa verificação, caso contrário seu código vai entrar em loop de redirecionamento).

No Angular existem funcionalidades como o Route guards e funções como ngOnInit e o próprio constructor() da controller que te auxiliam com essas verificações, imagino que no React também existam formas de "interceptar" uma rota antes de ela carregar a view na tela.

Lembrando também que esse tipo de controle no cliente é apenas para fins estéticos, do ponto de vista de segurança, você também deve verificar o acesso no backend toda vez que uma API REST protegida for chamada. Pra API saber que o request veio de fato de alguém autenticado, basta usar algum dos padrões de autenticação como OAuth ou JWT, por exemplo.

[houstondapaz]

Não é possível esconder rotas, você está fazendo uma chamada http, de uma forma ou outra vão conseguir pegar essa sua chamada, seja via devtools ou um fiddler da vida.
O que vc tem q fazer é criar mecanismos de segurança na sua API, como o @kazzkiq disse.

Você pode tentar ofuscar os dados trafegados via uso de HTTPS (obrigatório) e algum tipo de criptografia. Mas lembre-se que mesmo assim existem meios (simples até) de pegar esses dados.

[Adejair]

@wmsbill Obrigado pelo seu comentário, eu sempre sei o que eu vou chamar.

@kazzkiq Ahh sim, eu tenho JWT implementado na minha API, estou fazendo essa validação.

Mas minha dúvida é mais em relação ao seguinte, por exemplo, eu estou no meu client-side.

Um componente React

class Componente extends React.Component {
   ....
   onComponentDidMount() {
       axios.get('/api/meus_dados_secretos/', {token: x, ...} );
   }
   render() {
      renderizarInformações();
   }
}

Quando alguém inspecionar o elemento, esta pessoa vai saber qual a rota e qual a token dela para fazer essa requisição. Meu problema é, eu não quero que futuramente alguém que tenha uma token cadastrada possa usar minha API para roubar os meus dados sabe? Tem alguma forma de eu validar para apenas algum local fazer requisição nessa api? se sim, como?

E se fosse o caso de eu querer criar uma conta no sistema mandando uma requisição do tipo POST com os dados de um formulário meu, se a pessoa inspecionasse o elemento ela saberia quais são os parametros e conseguiria criar várias contas no meu sistema

Gostaria de saber quais são os melhores metódos para fazer isto
Obrigado pelo feedback de todos !

[kazzkiq]

Tem alguma forma de eu validar para apenas algum local fazer requisição nessa api?

Até onde eu sei, não. Com CORS (Access-Control-Allow-Origin, mais especificamente) você pode até tentar criar uma camada extra de proteção contra o uso da sua API fora do seu domínio, mas como essas informações vem do cliente, ainda assim existem formas de burlar os cabeçalhos do request para se passar por um cliente autêntico.

Em outras palavras, se até o Whatsapp sofre de reverse-engineering nas suas APIs, é porque de fato, não existe método 100% eficaz de forçar com que elas sejam apenas usadas apenas por quem você quer. Se o usuário passar os cabeçalhos certos, e tiver um token de autenticação válido, ele vai acessar sua API.

E se fosse o caso de eu querer criar uma conta no sistema mandando uma requisição do tipo POST com os dados de um formulário meu, se a pessoa inspecionasse o elemento ela saberia quais são os parametros e conseguiria criar várias contas no meu sistema

O que você pode fazer é validar e barrar esses comportamentos no servidor da API, e não no cliente. Se você não quer uma pessoa disparando vários POSTs, o correto seria adicionar essa regra no seu backend de forma a limitar os requests de um determinado token por um determinado tempo (ex.: Um usuário logado não pode fazer mais de 5 posts em menos de 1 minuto. Se ele tentar fazer isso, a API retorna um erro informando que ele atingiu o limite, etc)

[bernardodiasc]

O que você pode fazer é validar e barrar esses comportamentos no servidor da API, e não no cliente.

Não precisei implementar nada disso ainda, mas eu faria dessa forma. Coloca uma camada extra e faz seu cliente comunicar com ela, essa camada extra poderia ser um proxy por exemplo, camufla as requisições no cliente e traduz no proxy, e deixa apenas o proxy comunicando com a API nas partes sensitivas.

[ghost]

@Adejair cuidado quando fizer requisição no React. Lembre-se sempre de cancelar a requisição no componentWillUnmount (e qualquer event listenter, observable, promises, etc), senão você corre o risco da requisição completar depois que o componente foi desmontado e tentar atualizar um elemento que não existe mais.

[felipefialho]

@Adejair deu certo?