Advanced React Security Patterns
Узнайте, как защитить свои приложения React для реального мира. Я провел годы, работая в базах кода React, где безопасность является главной заботой. Я также провел почти три года, работая в Auth0, где я многое узнал об аутентификации и безопасности. Я хотел бы научить вас всему, что я знаю, о том, как защитить ваши приложения React, чтобы вам не приходилось тратить все это время на то, чтобы разобраться в этом.
Должен ли я использовать веб-токены JSON или файлы cookie и сессии? Как правильно защитить свои данные? Что произойдет, если пользователи проверят мой код React в браузере?
Как насчет того, когда я делаю приложение с помощью Gatsby или Next?
Как насчет serverless функций?
Как насчет GraphQL ??
Что делать, если я хочу использовать стороннего поставщика аутентификации ?!
ЧТО МНЕ ДЕЛАТЬ?!?
Я научу вас всему, что знаю о безопасности приложений React.
Что в коробке?
Обновление веб-токенов JSON
Приложениям, использующим веб-токены JSON, скорее всего, необходим какой-то способ обновления этих токенов по истечении срока их действия. Поскольку время жизни токена должно быть коротким, и поскольку мы не хотим, чтобы пользователям приходилось возвращаться в наши приложения каждый раз, когда срок действия токена истекает, нам нужен способ получения нового токена по требованию. Способ сделать это - обновить токены.
В этом модуле мы рассмотрим, что такое токены обновления, как они используются для получения новых токенов доступа, где они должны храниться и многое другое.
Переключение на файлы cookie и сессии
Обычно приложения React используют веб-токены JSON для аутентификации. Этот механизм может быть особенно полезен, когда нам нужен доступ к данным из API, которые обслуживаются в доменах, отличных от домена, в котором работает наше приложение React. Однако веб-токены JSON имеют некоторые проблемы. Эти проблемы связаны с тем, что JWT часто используются для замены традиционного пользовательского сеанса, но это не то, для чего они предназначены.
В этом модуле мы расскажем, как полностью защитить наше приложение React и выразить API с помощью файлов cookie и сеансов. Мы также говорим о преимуществах такого подхода.
Сторонние провайдеры аутентификации
В разработке есть поговорка: «Никогда не раскручивай свой собственный крипто». Почему нет? Криптография сложна, тонка, ее легко ошибиться, и есть люди, которые умнее вас и меня, которые уже решили это.
То же самое можно сказать и об аутентификации в целом. Существуют сторонние провайдеры аутентификации, такие как Auth0, которые позволяют очень легко интегрировать аутентификацию в наши приложения, а также действительно безопасны, поскольку безопасность является основным направлением их бизнеса.
В этом модуле мы начнем с разговора о значении, которое предлагает Auth0, и о том, почему вы должны рассмотреть его использование. Затем мы переносим все части аутентификации и авторизации нашего приложения в Auth0.
Аутентификация и авторизация для GraphQL
Аутентификация и авторизация для приложений на основе GraphQL выполняется почти так же, как если бы мы использовали конечные точки JSON. Мы можем либо использовать веб-токены JSON, отправляя их на сервер в заголовке авторизации, либо отправлять файлы cookie и полагаться на сеансы на бэкэнде.
Есть, однако, некоторые важные различия. Самые большие изменения происходят на сервере, где нам нужны новые концепции для проверки подлинности и авторизации, прежде чем наши данные будут разрешены и отправлены обратно клиенту.
В этом модуле мы работаем с версией приложения, полностью основанной на GraphQL. Мы увидим, как отправлять JWT на сервер из Apollo на внешнем интерфейсе, а затем как авторизовать запросы на внутреннем интерфейсе, используя два метода: проверки аутентификации resolver и пользовательские директивы схемы.
Аутентификация и авторизация для GatsbyJS
Приложение Gatsby на самом деле является просто приложением React, поэтому заманчиво думать, что аутентификация и авторизация могут быть выполнены именно так, как это было бы в более «ванильном» приложении React. Фактически, это в основном то же самое, но есть некоторые важные различия из-за того, как Gatsby создает файлы для распространения.
В этом модуле мы применим аутентификацию к маркетинговой странице нашего приложения и посмотрим, как работать с соответствующими частями, чтобы все работало гладко при создании и развертывании сайта Gatsby.
Аутентификация и авторизация для Next.js
Приложения Next.js занимают особое место, когда речь заходит о том, как применять аутентификацию и авторизацию. Как мы должны думать о «вошедшем в систему пользователе» в мире рендеринга на стороне сервера? Как мы можем обслуживать ресурсы для приложения и заполнять части аутентификации во время выполнения?
В этом модуле мы создадим приложение Orbit на Next.js и увидим различные способы применения к нему аутентификации и авторизации.
Безсерверная аутентификация
Бессерверные функции дают нам возможность запускать код по требованию и платить только за то, что мы используем. Безсерверный вариант является привлекательным вариантом, поскольку он дешевле и гораздо более масштабируем, чем традиционное развертывание сервера. Если мы хотим иметь аутентифицированные функции без сервера, мы должны рассмотреть несколько вещей. Как мы управляем логинами и регистрациями? Как мы авторизуем запросы? Где мы храним секреты для проверки токенов?
В этом модуле мы перейдем к бессерверным функциям для нашего API и увидим, как полностью аутентифицировать запросы к ним. Мы будем использовать функции Netlify, которые сами основаны на AWS Lambda.
Интервью с экспертами React
Я сел поболтать с людьми в сообществе React, чтобы узнать их подлинность и безопасность для приложений React. Они делятся советами, хитростями и уроками, извлеченными из их опыта создания безопасных приложений React.
Про Пакет
Полный исходный код для всех модулей
Все 7 модулей
10 интервью с экспертами React, в том числе: Kent C. Dodds, Ben Awad, Eve Porcello, Jason Lengstorf, Kadi Kraman, Dave Ceddia, Chris Sevilleja, Sam Julien, and Christian Nwamba
Последние пять лет я много думал о безопасности приложений. Большая часть этого времени была потрачена на работу в Auth0, где я многое узнал о том, как правильно обращаться с аутентификацией и авторизацией в веб-приложениях, в том числе и в тех, которые созданы с помощью React. Я создаю ReactSecurity, чтобы передать вам свои знания в надежде, что мы все сможем внести вклад в создание более безопасной сети.
Dave Ceddia
Вы не знаете Реакт. Но не из-за отсутствия попыток изучить его! Учебники, книги, курсы, подкасты, посты в блогах ... Вы все их читали или пытались это сделать. Вы следовали за всем этим, и, конечно, это имело хоть какой-то смысл, пока вы усердно воспроизводили каждый шаг, но только когда вы достигли конца, все, что вы якобы выучили, просто ... забылось или превратилось в огромное серое небытие: туман неопределенности...
https://holodeck.run/courses/react-security-fundamemtals/lessons/clusrukwg0017hzwleglh7izb
Спасибо большое, что выкладываете огромное количество замечательных материалов!
Было бы здорово, если бы вы прикрепили к курсу также текст уроков, прилагающийся к видео.
Я и другие подписчики, неважно знающие английский, будем очень благодарны!