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

Безопасное управление токенами — ключевой аспект при разработке современных веб-приложений. В контексте Quasar Framework важно учитывать, что библиотека сама по себе не обеспечивает встроенного безопасного хранилища для токенов, поэтому разработчик должен применять проверенные методы хранения и защиты данных.


Типы токенов и риски их хранения

Токены доступа (access tokens) и токены обновления (refresh tokens) используются для аутентификации и авторизации пользователей. Основные риски при хранении токенов:

  • XSS-атаки: злоумышленник может выполнить скрипт в браузере и получить доступ к токену.
  • CSRF-атаки: подделка запросов может использовать токен для совершения нежелательных действий.
  • Утечка через локальное хранилище: использование localStorage и sessionStorage делает токен доступным для любого скрипта на странице.

Способы безопасного хранения

1. HTTP-only куки

  • Описание: куки с флагами HttpOnly, Secure и SameSite.
  • Преимущества: защищены от доступа через JavaScript, автоматическая отправка при запросах к серверу.
  • Настройка в Quasar:
import { Cookies } from 'quasar'

Cookies.set('access_token', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'Strict',
  path: '/'
})
  • Особенности: сервер должен корректно обрабатывать куки и проверять их при каждом запросе.

2. Vuex + память приложения

  • Описание: хранение токена в состоянии приложения (Vuex store) без записи в localStorage.
  • Преимущества: токен существует только в оперативной памяти, что снижает риск утечки через XSS.
  • Недостатки: при перезагрузке страницы токен теряется, требуется механизм повторной аутентификации или использования refresh-токена.
// store/auth.js
export const state = () => ({
  token: null
})

export const mutations = {
  setToken(state, token) {
    state.token = token
  },
  clearToken(state) {
    state.token = null
  }
}

3. Шифрование токенов

  • Использование Crypto API: хранение токена в localStorage возможно при его шифровании.
  • Преимущества: даже при компрометации локального хранилища токен остаётся защищённым.
  • Пример:
import CryptoJS from 'crypto-js'

// Шифрование
const encrypted = CryptoJS.AES.encrypt(token, 'секретный_ключ').toString()
localStorage.setItem('token', encrypted)

// Дешифрование
const bytes = CryptoJS.AES.decrypt(localStorage.getItem('token'), 'секретный_ключ')
const decrypted = bytes.toString(CryptoJS.enc.Utf8)
  • Важно: ключ шифрования не должен быть жестко прописан в коде приложения. Лучше хранить его на сервере или генерировать динамически.

Работа с токенами в Quasar через Axios

Для безопасной работы с токенами удобно использовать перехватчики (interceptors):

import axios from 'axios'
import { Cookies } from 'quasar'

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

// Добавление токена к запросу
api.interceptors.request.use(config => {
  const token = Cookies.get('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// Обработка обновления токена при ошибке 401
api.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      // логика обновления токена через refresh-token
    }
    return Promise.reject(error)
  }
)

Полезные рекомендации

  • Минимизация срока жизни токена: access-токены должны иметь короткий срок действия, а refresh-токены — храниться с повышенной защитой.
  • Регулярная проверка токена на сервере: использовать списки отозванных токенов.
  • Изоляция токенов разных приложений: никогда не использовать один и тот же токен для разных фронтендов.
  • Логирование и аудит: фиксировать использование токенов для обнаружения подозрительной активности.

Использование Quasar Plugins для безопасности

Quasar позволяет подключать плагины для упрощения работы с куками и хранилищем:

  • @quasar/quasar-app-extension-cookies — расширенные возможности работы с HTTP-only куки.
  • Quasar Local Storage Plugin — для безопасного хранения конфиденциальных данных с возможностью шифрования.

Безопасное хранение токенов требует комбинированного подхода: правильные куки, ограничение доступа через JavaScript, шифрование и контроль на серверной стороне. Это снижает риск компрометации и повышает общую защищённость приложения.