https://telegram.me/JSlang

Спасибо!

чтобы когда пользователь заходил на апп уже залогиненый у него сразу инфа была кто он (например в выпадающем верхнем меню)

У тебя же spa, на весь цикл жизни приложения 1 запрос на сервер для получения данных пользователя

Зачем экономить на спичках?

я имел в виду когда я открываю в другой вкладке

мне нужно инициализироваться же

сейчас у меня в хедере есть кнопки, если пользователь аутентифицировался то там логаут

если нет, то логин и регистрация

я возьму из localStorage начальное значение и подгружу актуальное сразу

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

у него нету сессии

только куки

бекенд только рест сервис

На беке права пользователя не чекаются чтоли?

на беке пользователь каждый раз авторизуется по токену

ок, если токен станет невалиден по какой-то причине (сброс пароля и т.п.), на фронте все станет плохо

он может редактировать только свою инфу

ок, если токен станет невалиден по какой-то причине (сброс пароля и т.п.), на фронте все станет плохо

нужно редиректить на логин если что-то не так с токеном

но токен не зависит от пароля

это JWT токен

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

так тормозить будет, я сначала рисую старую и потом запрашиваю новую и обновляю

мне кажется это не критично

у кук мне кажется есть один плюс

допустим у меня 2 вкладки открыто

и во второй у меня уже другой токен

в теории это все интересно, но на практике куча лишнего кода и потенциальных багов. зачем усложнять себе жизнь и тем, кто будет потом это поддерживать? нормальное апи должно ответить в районе 50мс, этоу задержку очень сложно заметить, зато все сильно упростится. чем проще код, тем лучше

тогда если я в 1 вкладке буду слать запросы

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

Не переусложняй

Запрашивай и всё

это я про токен уже говорил)

если токен в куке хранить

а не в localStorage

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

и тем самым создавать csrf-уязвимость

хм, но ведь значение токена и так могут взять из заголовков

в чем уязвимость?

куки доступны только клиенту, плюс с заголовками secure, httpOnly их никто не изменит и не прочитает

Вадим ты для таких целей куки или локалстраж используешь?

куки доступны только клиенту, плюс с заголовками secure, httpOnly их никто не изменит и не прочитает

в этом и суть атаки csrf, что для ее проведения не нужно читать кук https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0

так мы csrf токен все равно в куках храним

значит толку в нем — 0 ?

то есть, например, злоумышленник размещает у себя на сайте картинку у которой в src прописан адрес в rest-серверу с параметрами перевода денег на свой акк. полькователь открывает сайт, браузер автоматически отправлет запрос на этот адрес и все куки вместе с ним

Для таких операций сервисы выдают одноразовые токены

например, в django rest csrf-токен действительно отправляется в куке, но только при запросе к серверу этот токен должен быть продублирован в заголовке X-CSRFToken чтобы запрос выполнился. сервер просто проверяет, соотвествие токенов

POST запрос не сделаешь картинкой

можно сделать скрытую form с кнопкой "смотреть котиков"

это режется проверкой откуда запрос пришел

если речь идет о rest-сервере, у него может быть неограниченное число клиентов с разными хостами, поэтому таких проверок по умолчинию нигде нет. хотя прикрутить конечно можно

у таких серверов почти всегда есть white-list

да, конечно это все можно решить, обойти, настроить вайт-листы и написать кучу кода, но зачем на это тратить время, когда можно просто не хранить токен в куке?

если хранить токен в сессии, то прийдется хранить сессионные куки))

можно просто хранить его в localStorage

Спасибо Георгий, убедил :)

https://pbs.twimg.com/media/CqOwE9EWgAA9rp7.jpg:large

Impossibru

Парни, открыл HTML гитхаба и там в конце такие строки: <script crossorigin="anonymous" integrity="sha256-ZVMF...0zr4=" src="https://assets-cdn.github.com/assets/frameworks-655305f0453f424f8dab87dc1ae0e385e5982f72f7e2ce14eb1a9c229174cebe.js"></script> <script async="async" crossorigin="anonymous" integrity="sha256-WyYTflB...tR0=" src="https://assets-cdn.github.com/assets/github-5b26137e505956beabe3500d02fe0cbfcfc914b7054613b4b38812c765d5b51d.js"></script> Что происходит? Что это за crossorigin? Что за integrity? Зачем?

https://developer.mozilla.org/ru/docs/Web/HTML/Element/script

Парни, открыл HTML гитхаба и там в конце такие строки: <script crossorigin="anonymous" integrity="sha256-ZVMF...0zr4=" src="https://assets-cdn.github.com/assets/frameworks-655305f0453f424f8dab87dc1ae0e385e5982f72f7e2ce14eb1a9c229174cebe.js"></script> <script async="async" crossorigin="anonymous" integrity="sha256-WyYTflB...tR0=" src="https://assets-cdn.github.com/assets/github-5b26137e505956beabe3500d02fe0cbfcfc914b7054613b4b38812c765d5b51d.js"></script> Что происходит? Что это за crossorigin? Что за integrity? Зачем?

integrity - метод для безопасной загрузки данных с cdn, чтобы третим лицам нельзя было подменить запрашиваемый файл, Crossorigin = anonymous - это указание на то, что надо делать CORS запрос без указания данных пользователя https://www.srihash.org/

Котаны, а расскажите, как вы пользуетесь вебпаком в изоморфных приложениях? Импортите ли цсс из модулей? Используете в модулях относительные пути или резолв? Компилите ли тесты вебпаком? Компилите ли экпресс-аппу вебпаком?

integrity - метод для безопасной загрузки данных с cdn, чтобы третим лицам нельзя было подменить запрашиваемый файл, Crossorigin = anonymous - это указание на то, что надо делать CORS запрос без указания данных пользователя https://www.srihash.org/

Спасибо :) ?

Котаны, а расскажите, как вы пользуетесь вебпаком в изоморфных приложениях? Импортите ли цсс из модулей? Используете в модулях относительные пути или резолв? Компилите ли тесты вебпаком? Компилите ли экпресс-аппу вебпаком?

На одном из проектов во время сборки собираются critical-css для каждого сочетания "раздел - клиент" (ie8, tesla, mobile, other).

ERROR: S client not available

а некритикалы отдельно лежат?

На одном из проектов во время сборки собираются critical-css для каждого сочетания "раздел - клиент" (ie8, tesla, mobile, other).

А каким образом определяете что css является critical?

Котаны, а расскажите, как вы пользуетесь вебпаком в изоморфных приложениях? Импортите ли цсс из модулей? Используете в модулях относительные пути или резолв? Компилите ли тесты вебпаком? Компилите ли экпресс-аппу вебпаком?

А зачем экспресс через вебпак прогонять?

например, чтобы работали резолвы внутри импортов, и импорты цсс и файлов нормально воспринимались

например, чтобы работали резолвы внутри импортов, и импорты цсс и файлов нормально воспринимались

Импорты css можно глушить

Или все таки стили нужно инлайнить?

Вот как при изомопрфе автоматом определять critical css без фантома и запуска сервера было бы интересно узнать

ручками, наверное

https://github.com/kriasoft/isomorphic-style-loader/ или так...

In the second half of 2017, the Chrome Web Store will no longer show Chrome apps on Windows, Mac, and Linux, but will continue to surface extensions and themes. In early 2018, users on these platforms will no longer be able to load Chrome apps. http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html

о, еще вопрос - у вас для сервера и клиента два разных конфига или один с разными ентри?

или еще как?

В смысле? вебпаковских?

да

два разных конфига

для серверного нужны дополнительные настройки

городить if-ы не вариант

а зачем иметь вебпак для сервера?

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

типа реквайра стилей и картинок

два разных конфига

а есть какой-нить воркэраунд, чтобы вотчер не компилил оба бандла при изменениях, или от этого не уйдешь?

а почему он не должен компилить оба?

сервер тоже должен быть консистентным

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

делаешь билд и на сервере работаешь с билдом

а почему он не должен компилить оба?

Время сэкономить, бандлы-то на 90% похожи

так он и не компилирует все, там же инкрементальная сборк

Вот как при изомопрфе автоматом определять critical css без фантома и запуска сервера было бы интересно узнать

не оч понятно, как это "изомопрфе и без запуска сервера". в контексте веб-приложения изомформное же как раз и подразумевает, что твой апп отрендериться на сервере. а к вопросу о critcal path – из решений мне нравится подход jss – https://github.com/cssinjs/jss/blob/master/docs/ssr.md который по умолчанию подразумевает рендеринг только необходимых стилей

Это значит что на сервере стили мы уже не трогаем. Все собрано заранее вебпаком

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

Графику кстати можно вынести отдельным модулем, и там уже все прекомпилить

https://twitter.com/left_pad/status/765915185479581696

https://github.com/airbnb/react-dates

Да нормальный календарик для тревела)