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
Спасибо большое, что выкладываете огромное количество замечательных материалов!
Было бы здорово, если бы вы прикрепили к курсу также текст уроков, прилагающийся к видео.
Я и другие подписчики, неважно знающие английский, будем очень благодарны!