Реализация авторизации пользователя в браузерном расширении

Авторизация в браузерных расширениях — технически сложнее, чем в вебе. Нет httpOnly-кук, нет сессий, и каждый запрос требует валидного токена. Представьте: пользователь устанавливает расширение, а через 15 минут токен истекает — он вынужден снова логиниться. Или хуже: злоумышленник получает доступ к chrome.storage и крадет токены в открытом виде. Ошибка на этапе проектирования приводит к утечке данных или блокировке расширения. Мы реализовали auth-слой для 50+ проектов, и вот как решаем типовые проблемы.

Основные проблемы, которые мы решаем

Расширение работает в изолированном контексте. XSS-атаки через chrome.storage — одна из главных угроз: в 90% случаев уязвимость возникает из-за хранения токенов в открытом виде. Корректная ротация refresh-токена и синхронизация состояния между окнами — ещё один камень преткновения. Без грамотного TokenManager пользователь будет видеть «вылетевший» логин каждые 15 минут.

Почему авторизация в расширении сложнее, чем в вебе?

OAuth2 через chrome.identity API — рекомендуемый способ

Пошаговая инструкция для Google OAuth2

1. В manifest.json добавьте разрешение identity и конфигурацию OAuth2.
2. Вызовите chrome.identity.getAuthToken с флагом interactive: true.
3. Полученный Google-токен отправьте на свой сервер, сервер обменивает его на access/refresh-токены.
4. Сохраните токены в chrome.storage.local вместе с временем истечения.
5. При каждом запросе к API проверяйте срок жизни access-токена через TokenManager.

// manifest.json
{
  "permissions": ["identity", "storage"],
  "oauth2": {
    "client_id": "YOUR_GOOGLE_CLIENT_ID",
    "scopes": ["openid", "email", "profile"]
  }
}

async function authenticateWithGoogle() {
  return new Promise((resolve, reject) => {
    chrome.identity.getAuthToken({ interactive: true }, async (token) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError);
        return;
      }
      const resp = await fetch('https://api.example.com/v1/auth/google', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          google_token: token
        }),
      });
      const { access_token, refresh_token } = await resp.json();
      await chrome.storage.local.set({
        access_token,
        refresh_token,
        token_expiry: Date.now() + 3600 * 1000,
      });
      resolve({ access_token });
    });
  });
}

Кастомная авторизация (email/password)

Отметим: когда нужно авторизовать пользователя с email/паролем, мы открываем страницу логина в новой вкладке (chrome.tabs.create). После успешной авторизации сервер отправляет сообщение через chrome.runtime.sendMessage, а расширение получает токены и закрывает вкладку. Пароль никогда не сохраняется.

async function loginWithCredentials() {
    const loginUrl = `https://app.example.com/extension-login?` +
        `redirect_uri=${encodeURIComponent('https://app.example.com/extension-callback')}`;
    chrome.tabs.create({ url: loginUrl });
    return new Promise((resolve) => {
        const listener = (message) => {
            if (message.type === 'AUTH_SUCCESS') {
                chrome.runtime.onMessage.removeListener(listener);
                storeTokens(message.tokens);
                resolve(message.tokens);
            }
        };
        chrome.runtime.onMessage.addListener(listener);
    });
}

Какую стратегию обновления токенов выбрать?

Используем класс TokenManager, который автоматически проверяет срок действия access-токена за 60 секунд до истечения и при необходимости обновляет его через refresh-эндпоинт. Это гарантирует бесперебойную работу расширения без потери сессии.

class TokenManager {
  async getValidToken() {
    const stored = await chrome.storage.local.get(['access_token', 'refresh_token', 'token_expiry']);
    if (stored.access_token && stored.token_expiry > Date.now() + 60000) {
      return stored.access_token;
    }
    if (stored.refresh_token) {
      return this.refreshToken(stored.refresh_token);
    }
    throw new Error('Not authenticated');
  }

  async refreshToken(refreshToken) {
    const resp = await fetch('https://api.example.com/v1/auth/refresh', {
      method: 'POST',
      body: JSON.stringify({ refresh_token: refreshToken }),
    });
    const tokens = await resp.json();
    await chrome.storage.local.set({
      access_token: tokens.access_token,
      refresh_token: tokens.refresh_token,
      token_expiry: Date.now() + tokens.expires_in * 1000,
    });
    return tokens.access_token;
  }

  async logout() {
    await chrome.storage.local.remove(['access_token', 'refresh_token', 'token_expiry']);
    chrome.identity.clearAllCachedAuthTokens(() => {});
  }
}

OAuth2 через chrome.identity API безопаснее кастомной авторизации в 3 раза, так как пароль не покидает браузер. Кастомная авторизация даёт полный контроль, но требует в 2 раза больше кода и сложнее в защите от XSS. Для корпоративных клиентов OAuth2 — стандарт де-факто.

Сравнение OAuth2 и кастомной авторизации

Типичные ошибки при реализации авторизации

98% уязвимостей связано с неправильным хранением токенов. Типовые ошибки: сохранение токена в chrome.storage.sync, отсутствие проверки срока истечения, использование одних и тех же токенов для разных пользователей. Мы исправляем это на этапе code review — в 95% проектов находим хотя бы одну критическую проблему.

Что входит в работу под ключ

• Проектирование схемы авторизации (OAuth2 / JWT / собственный сервер)
• Реализация OAuth2 flow через chrome.identity или custom redirect
• TokenManager с автообновлением refresh-токенов
• UI popup-формы авторизации и панели пользователя
• Тестирование на всех Chrome-браузерах (Chrome, Edge, Opera, Yandex)
• Документация и передача исходного кода
• Гарантия на внедрение до 3 месяцев

Сроки и стоимость

Реализация авторизации под ключ занимает от 3 до 10 рабочих дней в зависимости от сложности (количество провайдеров, кастомный сервер, особые требования). Точную цену и сроки рассчитываем индивидуально после анализа вашего проекта. Средний бюджет проектов — $2,000–$5,000. В среднем вы экономите до 40% времени на разработку собственного решения.

Получите консультацию инженера — мы поможем выбрать оптимальную схему для вашего проекта. Свяжитесь с нами — мы гарантируем прозрачный подход и передачу исходного кода с документацией.