Файлы cookie исчезают при обновлении страницы
Я развернул свой интерфейс sveltekit и серверную часть Python flask на Vercel. На локальном хосте они работали нормально, однако, когда я его развернул, файлы cookie не были постоянными.
Когда я вхожу в систему, файлы cookie остаются на месте, однако, когда я обновляю свою страницу, файлы cookie удаляются. Я установил максимальный возраст на 3 дня, но он исчезает при обновлении. Я просто не мог этого понять.
Мой домен внешнего интерфейса был: time-master-frontend.vercel.app
Мой внутренний домен был: time-master-backend.vercel.app
Это потому, что они оба относятся к разным доменам? Потому что моя другая производственная сборка (на Windows IIS Server) тоже имеет два отдельных поддомена, но они оба работают...
Вот скриншот:
Как вы можете видеть, он устанавливает файл cookie, но при обновлении файл cookie исчезает, и, конечно же, во всех моих запросах есть credentials: include.
Это отлично работает на локальном хосте, но я не знаю, что произошло после развертывания...
Любая ваша помощь будет оценена по достоинству. Спасибо
Ответы 1
Немного посмотрев, я узнал, что vercel.com — это публичный суффикс. Это означает, что если URL-адрес example.vercel.app, то example здесь не поддомен!
Это совершенно другой домен, потому что vercel.app — это расширение домена. Точно так же, как многие сайты имеют расширение домена, например: myuniversity.edu.in или product.co.uk и так далее...
Причина, по которой такие компании, как Vercel или Render, делают это, заключается в том, что на Vercel размещены тысячи веб-сайтов, и поэтому по умолчанию все они будут обмениваться файлами cookie друг с другом, даже если они не собираются этого делать. Вот почему, чтобы решить эту проблему с суперкуки, они создали .vercel.app как публичный суффикс, чтобы этого не произошло.
Итак, в заключение отметим, что example.vercel.app — это то же самое, что и example.com, то есть оба они являются совершенно разными доменами. И два разных домена не могут совместно использовать файлы cookie друг с другом, поэтому они должны быть субдоменом или одним и тем же доменом.
Вы также можете обратиться к этому посту от Vercel.
Каков риск обмена файлами cookie?
Ну, вот в чем дело. Предположим, вы создали сайт с именем bank.vercel.app, и пользователь вошел на него, а файлы cookie сайта сохраняются на верхнем уровне, то есть .vercel.app, что означает, что если я создаю сайт типа malicious.vercel.app, и все, что делает бедный пользователь, это просто нажимает на кнопку ссылку на вредоносный сайт, и бум, вредоносный сайт может прочитать его файлы cookie для входа, которые были сохранены с bank.vercel.app, потому что он тоже размещен в домене .vercel.app.
Теперь мошенники могут легко войти на банковский счет нескольких пользователей на вашем сайте. Как это безумие!
Вот почему Vercel сделал .vercel.app общедоступным суффиксом, чтобы файлы cookie вашего сайта не были скомпрометированы другими пользователями домена Vercel.
Решение
Ну, есть два способа справиться с этой ситуацией:
Метод 1:
Отправьте токен JWT через свой backend в текстовом ответе в формате JSON при входе в систему, чтобы ваш frontend мог легко прочитать токен в нем.
Теперь на стороне frontend сохраните полученный файл cookie с помощью document.cookie, и с этого момента при каждом отправке запроса просто прикрепите сохраненный файл cookie к заголовку авторизации, а затем отправьте запрос на сервер.
Теперь, что касается backend, вам нужно настроить код промежуточного программного обеспечения так, чтобы он проверял заголовок авторизации входящего запроса для проверки и чтения файлов cookie вместо чтения файлов cookie браузера, как это было раньше...
Метод 2:
Лучшим способом было бы купить доменное имя, и тогда у вас фактически будут одни и те же домены или поддомены, или вы также можете разместить оба frontend и backend в одном стеке. То есть, используя SvelteKit или NextJS в качестве полного стека, вы никогда не столкнетесь с этой проблемой.
Делай все, что хочешь, главное убедиться, что ты на том же доменном имени.