Безпечна комунікація між фронтендом на React та бекендом на Node.js за допомогою RSA шифрування

текст перекладу
У сучасних веб-застосунках безпека чутливих даних, що передаються між клієнтом та сервером, є надзвичайно важливою. Надійним способом досягнення цієї мети є RSA шифрування, широко використовуваний асиметричний алгоритм шифрування. Цей блог проведе вас через реалізацію безпечної комунікації за допомогою React та Node.js, забезпечуючи конфіденційність і захист даних.

Безпечна комунікація між фронтендом на React і бекендом на Node.js за допомогою RSA шифрування

Що таке RSA шифрування?

RSA (Rivest-Shamir-Adleman) шифрування — це асиметричний криптографічний алгоритм, який використовує два ключі:

1. Публічний ключ: використовується для шифрування даних.
2. Приватний ключ: використовується для дешифрування даних.

Цей метод забезпечує, що тільки призначений отримувач (який має приватний ключ) може розшифрувати дані, що робить його дуже безпечним для передачі чутливої інформації.

Чому використовувати RSA в веб-застосунках?

1. Безпека: RSA забезпечує безпечний спосіб передачі чутливих даних, навіть через незахищені канали.
2. Аутентифікація: гарантує, що дані надходять від надійного джерела.
3. Цілісність: запобігає підробці даних під час передачі.
4. Асиметрична перевага: приватний ключ ніколи не залишає сервер, що знижує ризик його компрометації.

Огляд реалізації

Ми створимо систему безпечної комунікації, де:

• Фронтенд на React шифрує тіло запиту за допомогою публічного ключа сервера.
• Бекенд на Node.js дешифрує запит за допомогою приватного ключа, обробляє його і відправляє зашифрований відповідь.
• React додаток дешифрує відповідь для користувача.

Покрокова інструкція

1. Генерація пари RSA ключів

За допомогою Node.js генеруємо пару публічного і приватного ключів для шифрування та дешифрування. Зберігаємо ці ключі надійно, оскільки приватний ключ ніколи не повинен бути розкритий.

2. Реалізація на бекенді (Node.js)

Бекенд надає публічний ключ фронтенду та обробляє зашифровані дані. Ось код:

Налаштування залежностей

Встановіть необхідні пакети:

npm install express body-parser crypto

Пояснення коду

• Публічний ключ (Public Key) Endpoint: надає фронтенду публічний ключ для шифрування.
• Дешифрування: дешифрує вхідні дані за допомогою приватного ключа.
• Шифрування відповіді: шифрує відповідь сервера за допомогою публічного ключа.

const express = require('express');  
const bodyParser = require('body-parser');  
const crypto = require('crypto');  

const app = express();  
app.use(bodyParser.json());  

// Генерація пари RSA ключів  
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', { modulusLength: 2048 });  

app.get('/public-key', (req, res) => {  
 res.send({ publicKey: publicKey.export({ type: 'pkcs1', format: 'pem' }) });  
});  

app.post('/secure-endpoint', (req, res) => {  
 try {  
 const encryptedData = req.body.data;  
 const decryptedData = crypto.privateDecrypt(  
 { key: privateKey, padding: crypto.constants.RSA_PKCS1_PADDING },  
 Buffer.from(encryptedData, 'base64')  
 );  

 const jsonData = JSON.parse(decryptedData.toString());  
 console.log('Дешифровані дані:', jsonData);  

 // Шифрування відповіді  
 const responseData = { message: 'Дані отримані успішно', data: jsonData };  
 const encryptedResponse = crypto.publicEncrypt(  
 { key: publicKey, padding: crypto.constants.RSA_PKCS1_PADDING },  
 Buffer.from(JSON.stringify(responseData))  
 );  

 res.send({ data: encryptedResponse.toString('base64') });  
 } catch (error) {  
 console.error('Помилка дешифрування:', error);  
 res.status(500).send({ error: 'Не вдалося дешифрувати' });  
 }  
});  

app.listen(3000, () => console.log('Сервер працює на порту 3000'));

текст перекладу
Реалізація на фронтенді (React)

React додаток отримує публічний ключ від бекенду, шифрує дані та відправляє їх безпечно.

## Налаштування залежностей

Встановіть Axios для HTTP запитів:

npm install axios
```

Пояснення коду

• Отримання публічного ключа при завантаженні компонента.
• Шифрування тіла запиту за допомогою публічного ключа.
• Дешифрування відповіді сервера для відображення.

import React, { useEffect, useState } from 'react';  
import axios from 'axios';  

const App = () => {  
 const [publicKey, setPublicKey] = useState('');  

 useEffect(() => {  
 axios.get('http://localhost:3000/public-key')  
 .then(response => setPublicKey(response.data.publicKey))  
 .catch(error => console.error('Помилка при отриманні публічного ключа:', error));  
 }, []);  

 const handleSendData = async () => {  
 if (!publicKey) return;  

 const data = { name: 'John Doe', email: '[email protected]' };  
 const crypto = require('crypto'); // Для Node.js або поліфіл для браузера  

 const encryptedData = crypto.publicEncrypt(  
 { key: publicKey, padding: crypto.constants.RSA_PKCS1_PADDING },  
 Buffer.from(JSON.stringify(data))  
 ).toString('base64');  

 try {  
 const response = await axios.post('http://localhost:3000/secure-endpoint', { data: encryptedData });  
 console.log('Зашифровану відповідь:', response.data.data);  
 } catch (error) {  
 console.error('Помилка при відправці даних:', error);  
 }  
 };  

 return (  
   <div>  
     <h1>RSA Encryption Example</h1>  
     <button onClick={handleSendData}>Send Secure Data</button>  
   </div>  
 );  
};  

export default App;

Переваги цього підходу

1. Покращена безпека:

   • Чутливі дані шифруються перед передачею, що робить їх недоступними для атакуючих.
   • Тільки сервер з приватним ключем може розшифрувати дані.

2. Цілісність даних:
   Гарантує, що дані не будуть змінені під час передачі.

3. Простота управління ключами:
   Сервер керує приватним ключем, а публічний ключ безпечно поширюється серед клієнтів.

4. Універсальність:
   RSA сумісний з різними типами та розмірами даних, що робить його надійним рішенням для різноманітних випадків використання.

Кращі практики

1. HTTPS: Завжди використовуйте HTTPS для захисту транспортного шару.
2. Безпечне зберігання ключів: Зберігайте приватний ключ у безпечному місці, наприклад, у змінних середовища або в сервісі керування ключами.
3. Оптимізація використання ключів: Для великих даних використовуйте RSA для шифрування симетричного ключа (наприклад, AES), а дані шифруйте за допомогою симетричного ключа.

Реалізація RSA шифрування між фронтендом на React і бекендом на Node.js підвищує безпеку даних і гарантує цілісність чутливої інформації. Цей підхід ідеально підходить для ситуацій, де потрібен високий рівень безпеки, таких як фінансові додатки, медичні системи та автентифікація користувачів.

Захищайте свої веб-застосунки вже сьогодні за допомогою RSA шифрування і дайте своїм користувачам впевненість, яку вони заслуговують!

Перекладено з: Secure Communication Between React Frontend and Node.js Backend Using RSA Encryption