Segurança no Consumo de API em Aplicações React

Introdução

Quando usamos React para criar sites, ele se comunica com servidores para obter informações. Essas informações vêm de APIs, que são como mensageiros que trazem dados para o nosso site. É importante que essa comunicação seja segura, como um super-herói protegendo uma cidade e para isso há algumas ferramentas para melhorar essa segurança.

Importância da Segurança em Aplicações Web

Imagina se alguém pega seus dados e faz bagunça com elas. Na internet, isso pode acontecer se não tivermos cuidado. A segurança impede que pessoas más roubem informações ou façam coisas ruins nos nossos sites.

Exemplos Práticos e Demonstrações

Vamos ver como podemos proteger nossos pedidos de dados em React.

Autenticação com JWT

Os tokens JWT são como carteirinhas que provam quem você é. Ao configurar Axios, uma biblioteca que ajuda a fazer pedidos HTTP, podemos adicionar automaticamente esses tokens em cada pedido, garantindo que apenas pessoas autorizadas acessem certas informações.

import axios from 'axios';

const api = axios.create({
 baseURL: 'https://suaapi.com',
});

api.interceptors.request.use(
 config => {
const token = localStorage.getItem('token');
if (token) {
 config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
 },
 error => Promise.reject(error)
);

export default api;

Configuração de Interceptadores com Axios

Os interceptadores são como guardas que verificam cada pedido e resposta. Eles ajudam a lidar com erros, como redirecionar para a página de login se o usuário não estiver autorizado.

api.interceptors.response.use(
 response => response,
 error => {
if (error.response.status === 401) {
 // Redirecionar para login ou renovar token
}
return Promise.reject(error);
 }
);

Proteção Contra CSRF

Tokens CSRF são códigos especiais que evitam que outras pessoas façam pedidos em seu nome sem sua permissão. Ao adicionar esses tokens em cada pedido, garantimos que somente você possa fazer mudanças importantes.

api.interceptors.request.use(
 config => {
const csrfToken = getCsrfToken(); // Função para obter token CSRF
if (csrfToken) {
 config.headers['X-CSRF-Token'] = csrfToken;
}
return config;
 },
 error => Promise.reject(error)
);

Tratamento Seguro de Erros

Quando algo dá errado, é importante mostrar mensagens amigáveis para o usuário e registrar os detalhes técnicos para os desenvolvedores. Isso ajuda a resolver problemas sem assustar os usuários.

api.interceptors.response.use(
 response => response,
 error => {
if (error.response) {
 alert(`Erro: ${error.response.status} - ${error.response.data.message}`);
} else {
 alert('Erro desconhecido');
}
return Promise.reject(error);
 }
);

Rate Limiting

Rate limiting é como colocar uma velocidade máxima para os pedidos, prevenindo que um número excessivo de pedidos sobrecarregue o servidor. Isso ajuda a manter o site funcionando bem para todos.

import rateLimit from 'axios-rate-limit';

const rateLimitedApi = rateLimit(api, { maxRequests: 5, perMilliseconds: 1000 });

export default rateLimitedApi;

Conclusão

Curtiu o conteúdo? Ele foi gerado por inteligência artificial e revisado por um ser humano!

Se quiser se conectar comigo me siga no Linkedin.

Fontes de Produção:

Ilustrações da capa: gerada pela lexica.art

Conteúdo gerado por: ChatGPT com revisões humana.

#React #API #Segurança #Frontend