Нужно ли каждый раз слать логин и пароль при авторизации на стороннем сервисе?

Безопасность авторизации на сторонних сервисах

**Нет, отправлять ли логин и пароль при каждом запросе? Объясни подробно. Если нет, как обеспечить безопасную авторизацию в веб-приложениях? Приведи практические механизмы и примеры на React. Обязательно аутентификация и авторизация в коде. Ответ максимально развернуто. Ты специалист по безопасности веб-приложений.

ОБЯЗАТЕЛЬНО:

• 5+ механизмов
• Примеры кода на React
• Упомяни OWASP
• Конкретные названия npm пакетов

Безопасная авторизация в веб-приложениях: механизмы и практическая реализация

Категорически нельзя передавать логин и пароль при каждом запросе. Это грубейшее нарушение безопасности:

1. Постоянная экспозиция credentials - перехват одного запроса дает полный доступ
2. Нет сессии - каждый запрос требует полной аутентификации
3. Уязвимость к replay-атакам - злоумышленник может повторно использовать перехваченные данные

5+ механизмов безопасной авторизации

1. JWT (JSON Web Tokens)

import jwt from 'jsonwebtoken';
const token = jwt.sign({ userId: 123 }, 'secret', { expiresIn: '1h' });
// В заголовках:
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Преимущества: Stateless, содержит payload. Важно: `{ userId, role. **Подпись header.payload.signature.

2. Проверка подписи и контент security.

2. HttpOnly Cookies + CSRF Tokens

// Сервер устанавливает:
res.cookie('token', token, { httpOnly: true, secure: true });
// React отправляет CSRF:
const [csrf, setCsrf] = useState('');
useEffect(() => fetch('/csrf-token').then(r => r.text()).then(setCsrf);
// В формы:
<input type="hidden" name="_csrf" value={csrf} />

3. OAuth 2.0 + PKCE

Используйте react-oauth2-popup:

npm install react-oauth2-popup

import { AuthProvider } from 'react-oauth2-popup';
<AuthProvider clientId="..." redirectUri="...">
  <App />
</AuthProvider>

4. Session Storage с Refresh Rotation

let refreshPromise = null;
async function refreshToken() {
  if (!refreshPromise) {
    refreshPromise = fetch('/refresh', { credentials: 'include' })
      .then(res => res.json())
      .finally(() => refreshPromise = null);
  }
  return refreshPromise;
}
// Interceptor:
axios.interceptors.response.use(null, async err => {
  if (err.response?.status === 401) {
    const newToken = await refreshToken();
    err.config.headers.Authorization = `Bearer ${newToken}`;
    return axios(err.config);
  }
  throw err;
});

5. Двухфакторная аутентификация (2FA)

npm install speakeasy qrcode
import speakeasy from 'speakeasy';
const secret = speakeasy.generateSecret({ name: 'App' });
// Генерация QR:
<img src={QRCode.toDataURL(secret.otpauth_url)} />
// Верификация:
const verified = speakeasy.totp.verify({
  secret: secret.base32,
  encoding: 'base32',
  token: userInput
});

6. Биометрическая аутентификация (WebAuthn)

navigator.credentials.create({
  publicKey: {
    challenge: new Uint8Array(32),
    rp: { name: "Example" },
    user: { id: new Uint8Array(16), name: "user@example.com" },
    pubKeyCredParams: [{ type: "public-key", alg: -7 }]
  }
}).then(credential => {
  // Отправка credential.id на сервер
});

Критические аспекты по OWASP Top 10

A2: Broken Authentication - именно передача credentials при каждом запросе попадает под эту категорию. Защита:

• Токены с коротким TTL (15-30 минут)
• Refresh tokens с отдельным хранилищем
• Инвалидация при смене пароля

A7: Identification and Authentication Failures

• Всегда используйте secure; SameSite=Strict для кук
• Валидация issuer (iss) и audience (aud) в JWT
• Хеширование токенов на сервере с bcrypt

Реализация в React: полный пример

// src/auth/useAuth.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import jwtDecode from 'jwt-decode';

export default function useAuth() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token && !isExpired(token)) {
      const decoded = jwtDecode(token);
      setUser(decoded);
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }
  }, []);
  
  const login = async (email, password) => {
    const { data } = await axios.post('/api/login', { email, password });
    localStorage.setItem('token', data.token);
    localStorage.setItem('refresh', data.refreshToken);
    axios.defaults.headers.common['Authorization'] = `Bearer ${data.token}`;
    setUser(jwtDecode(data.token));
  };
  
  const logout = () => {
    localStorage.removeItem('token');
    delete axios.defaults.headers.common['Authorization'];
    setUser(null);
  };
  
  return { user, login, logout };
}

// Проверка экспирации:
function isExpired(token) {
  const { exp } = jwtDecode(token);
  return Date.now() >= exp * 1000;
}

Рекомендуемые npm пакеты

1. jsonwebtoken - генерация/верификация JWT
2. axios - HTTP client с interceptors
3. react-oauth2-popup - OAuth2 интеграция
4. speakeasy - 2FA TOTP
5. qrcode - генерация QR для 2FA
6. bcryptjs - хеширование refresh токенов
7. express-jwt - middleware

Заключение

Всегда комбинируйте несколько методов: JWT для API + HttpOnly куки для браузера + регулярная ротация. Мониторинг недействительных попыток входа. Никогда не передавайте логин/пароль после начальной аутентификации - это аксиома безопасности.