Где хранить токены: Локальное хранилище или куки? Безопасное хранение JWT на клиенте / Хабр

Хранение токенов в локальном хранилище браузера обеспечивает постоянство при обновлении страниц и на вкладках браузера, однако, если злоумышленник может запустить JavaScript в SPA с помощью атаки межсайтового скриптинга (XSS), он может получить токены, хранящиеся в локальном хранилище. Уязвимость, ведущая к успешной атаке XSS, может быть либо в исходном коде SPA, либо в любом стороннем коде JavaScript (например, bootstrap, jQuery или Google Analytics), включенном в SPA.

Чтобы снизить риски безопасности, если ваш SPA использует неявные (мы рекомендуем вместо этого использовать поток кода авторизации с PKCE) или гибридные потоки, вы можете уменьшить абсолютное время истечения срока действия токена.Это снижает влияние отраженной XSS-атаки (но не постоянной). Чтобы сократить время истечения срока, перейдите на панель инструментов > API> Настройки> Срок действия токена для потоков браузера (секунды) .

Уменьшите количество стороннего кода JavaScript, включенного из источника за пределами вашего домена, до минимально необходимого (например, ссылок на jQuery, Bootstrap, Google Analytics и т. Д.). Сокращение количества стороннего кода JS снижает вероятность уязвимости XSS. Выполнение проверки целостности субресурсов (SRI) в сторонних сценариях (где это возможно) для проверки того, что извлеченные ресурсы доставляются без неожиданных манипуляций, также является более безопасным.

Руководство для каждой модели развертывания

Next.js — это минималистичный фреймворк для создания одностраничных приложений JavaScript простым, но настраиваемым способом. Фреймворк ориентирован на производительность и готовую поддержку рендеринга на стороне сервера (SSR). Витрина Next.js подтверждает успех фреймворка, который большие и малые компании используют для создания своих приложений, включая Netflix, Scale.ai, Marvel, Jet и даже Auth0.

Если вы новичок в Next.js и хотите узнать, как использовать этот фреймворк для создания приложений Jamstack с полным стеком, ознакомьтесь с видео-плейлистом Джеймса Куика, приведенным ниже:

Предоставление решения для поддержки аутентификации в Next.js была одной из самых востребованных функций платформы. Но почему так?

Разве мы не можем использовать какой-либо из инструментов, которые мы так долго использовали в React и Node.js, например, паспорт или auth0.js ? Или новые, такие как Auth0 React SDK или Express OpenID Connect?

Next.js стирает грань между внешним и внутренним интерфейсом, делая существующую экосистему неоптимальной, если вы хотите использовать Next.js в полной мере.

Одним из примеров является Passport, который зависит от доступности Express.И хотя технически вы можете использовать Express в своем приложении Next.js, все улучшения производительности исчезнут. Если вы хотите оптимизировать для быстрого холодного запуска и повысить надежность и масштабируемость вашего приложения, вам необходимо перейти на модель бессерверного развертывания.

Существуют разные способы создания и развертывания приложений Next.js. В этом сообщении блога мы рассмотрим эти варианты использования Next.js, объясним их архитектуру и определим стратегию, которую вы можете использовать для реализации аутентификации для каждого из них.

Что означает аутентификация для Next.js?

При создании приложения Next.js аутентификация может потребоваться в следующих случаях:

• При доступе к странице: «Мои счета»

• При доступе к маршруту API Next.js: / api / my / invoices

• Когда ваше приложение вызывает API, размещенный вне вашего приложения Next.js, от имени пользователя: с www.mycompany.com на выставление счетов .mycompany.com/api

Теперь, когда мы понимаем, где и когда нашему приложению может потребоваться аутентификация, давайте рассмотрим стратегии аутентификации, которые вы можете реализовать для различных моделей развертывания Next.js.

Next.js Подход к статическому сайту

Next.js позволяет создавать автономные статические приложения без необходимости в сервере Node.js. Вы можете запустить команду next build && next export , чтобы сгенерировать файлы HTML для каждой страницы, которая ее поддерживает.Вы можете использовать этот сгенерированный вывод для развертывания своего сайта в любой службе статического хостинга, такой как Vercel, Amazon S3 или Netlify.

Вы можете использовать этот метод для создания полных веб-сайтов в виде статических сайтов, таких как общедоступная главная страница компании или когда вы создаете «панель администратора». Сгенерированный HTML может быть оболочкой вашего приложения — подумайте об этой оболочке как о верхнем и нижнем колонтитулах вашего приложения. Панель управления Vercel — один из лучших примеров того, как это может выглядеть:

После того, как «оболочка» будет обслужена, клиентская сторона вызовет необходимые API-интерфейсы (несущие информацию о пользователе), извлечет данные для конкретного пользователя. content, и обновите страницу:

Эта модель имеет ряд преимуществ, когда речь идет о хостинге.Сайты статического хостинга (такие как Vercel, Amazon S3, Azure Blob Storage, Netlify и другие) проверены на практике, недороги, но, что более важно, они очень быстрые и хорошо работают с CDN.

Одна вещь, которая будет несколько отличаться, — это то, как мы обрабатываем аутентификацию. Модель, в которой доступен сервер, может обрабатывать взаимодействие с Auth0 и создавать сеанс, но в этой модели у нас нет серверной части. Вся работа происходит во внешнем интерфейсе:

1. Ваш статический сайт перенаправляет ваших пользователей на Auth0 для входа в систему.
2. Когда ваши пользователи успешно входят в систему, Auth0 перенаправляет их на ваш статический сайт.
3. Ваш статический сайт выполняет обмен кодом с Auth0 для получения идентификатора пользователя id_token и access_token , которые он хранит в памяти.

Если для вашего варианта использования требуется динамический контент или пользовательский контент, вам также потребуется развернуть что-то еще, например API. Этот API не будет работать как часть вашего статического хостинга. Для ее развертывания вы будете использовать такую ​​платформу, как AWS Lambda, Heroku или Now.Ваш статический сайт (на стороне клиента) будет использовать access_token для безопасных вызовов этого API напрямую, получения динамического контента и обогащения статической страницы, обслуживаемой платформой хостинга.

Эта архитектура аналогична тому, как вы можете создать любое одностраничное приложение, в котором приложение не имеет фактического «бэкэнда», а вместо этого вызывает один или несколько API. В сообществе вы найдете множество примеров того, как войти в этот тип приложения:

Например, с auth0-react это так же просто, как настроить ваше приложение следующим образом:

 
импортировать {Auth0Provider} из '@ auth0 / auth0-response';

экспорт класса по умолчанию Root extends App {
  оказывать () {
    const {Component, pageProps} = это.реквизит;
    возвращение (
      
          <Компонент {... pageProps} />
      
    );
  }
}  

Затем вы можете использовать React Hooks для получения информации профиля пользователя и запроса токена доступа для безопасных вызовов ваших API. Ваш статический сайт Next.js отправляет access_token в заголовках авторизации ваших вызовов API, что в следующем примере выполняется с помощью ловушки useSWR:

  import {useAuth0} from '@ auth0 / auth0-response';
импортировать useSWR из swr;

экспортировать функцию по умолчанию MyShows () {
  const {
    Пользователь,
    isAuthenticated,
    isLoading,
    getAccessTokenSilently,
  } = useAuth0 ();

  const {данные, ошибка} = useSWR (
    isLoading || ! isAuthenticated? null: '/ api / my / shows',
    async (url) => {
      const accessToken = await getAccessTokenSilently ({
        аудитория: 'https: // api / tv-show',
        объем: 'читать: показывает',
      });
      const res = await fetch (url, {
        заголовки: {
          авторизация: `Bearer $ {accessToken}`,
        },
      });
      вернуть res.json ();
    }
  );

  if (isLoading) {
    return 
 Загрузка информации о пользователе ... 
;
  }

  if (! isAuthenticated) {
    return 
 Вы должны сначала войти в систему, чтобы получить доступ к своим подпискам. 
;
  }

  if (error) {
    return 
 При загрузке подписок произошла ошибка. 
;
  }

  if (! data) {
    возвращение (
      

         
 Подписки на {user.email} 
 
        
 Загрузка подписок ... 
      
    );
  }
  возвращение (
    

       
 Подписки для {пользователя.электронная почта} 
 
      
 Вы подписаны в общей сложности на шоу {data.length} ... 
    
  );
}  

Посетите Практическое введение Next.js, чтобы узнать, как использовать среду Next.js для создания приложений React.

Что именно здесь происходит за кулисами?

При использовании auth0-spa-js пользователь войдет в систему, используя предоставление кода авторизации с PKCE. На высоком уровне ваше приложение Next.js перенаправляет пользователя на Auth0 для входа в систему.Auth0 будет обрабатывать всю необходимую логику аутентификации и авторизации (регистрация, вход, MFA, согласие и т. Д.). После того, как пользователи завершат процесс аутентификации с помощью Auth0, Auth0 перенаправляет их в ваше приложение с кодом авторизации в строке запроса.

Клиентская сторона обменивает этот код на id_token и, необязательно, на access_token (1,2) . Вы можете использовать access_token для вызова вашего API. Когда access_token истечет, тот же поток повторится снова под крышками с использованием