Как хранить секретные ключи в VueJs
Я собираюсь развернуть свой личный блог, построенный на VueJS, который будет размещаться и предоставляться веб-сервером, написанным на Go. Сообщения в блоге хранятся и управляются CMS (ButterCMS), и я получаю нужный мне контент через fetch API.
При тестировании и сборке я всегда запускаю его локально, чтобы иметь возможность жестко запрограммировать секретный ключ CMS, но, конечно, я не могу развернуть его таким образом. Мне нужно где-то хранить секретный ключ, и я видел несколько статей, предлагающих сохранить его в файле .env в корневом каталоге проекта, а затем прочитать их через process.env.<key>.
Хотя этот подход широко объясняется в Интернете, я также нашел много источников, где этот метод вообще не рекомендуется (также в документации Vue).
Итак, как я собираюсь это сделать? Где и как мне хранить секретные ключи?
Большое спасибо!
Ответы 1
Во-первых, если у вас статический веб-сайт с некоторым контентом, поступающим из CMS, вам следует использовать NuxtJS, а не подход, основанный только на SPA, из соображений производительности и SEO.
У вас есть несколько способов скрыть что-то, что вы делаете во внешнем интерфейсе. Некоторые токены могут даже предназначаться для публичного размещения , насчет вашего конкретно не уверен.
Но если вы используете Nuxt, проще всего использовать SSG для создания проекта и использовать данный токен во время сборки. Таким образом, после развертывания ваши пользователи будут видеть только окончательно сгенерированный проект, а не промежуточный процесс (без необходимости иметь какой-либо токен).
Это, конечно, предполагает, что у вас нет вызовов во время выполнения, использующих этот токен. Но я действительно не понимаю, зачем вам это делать, во-первых.
Если вас не волнует наличие какого-либо автоматического CI/CD, вы можете даже поработать над своим проектом, собрать его локально и отправить со всеми статическими ресурсами на платформу по вашему выбору.
Возвращаясь к вашим вопросам, использование переменных env вполне нормально. Важная часть — знать, в каком контексте вы находитесь, чтобы конфиденциальное не было раскрыто, хотя вы думаете, что оно будет конфиденциальным.
В VueJS у вас не так уж много способов что-либо скрыть. Но вы можете использовать свой сервер Go в качестве промежуточного программного обеспечения или любой другой облачной функции для этой цели (запутывая токен, позволяя серверу промежуточного программного обеспечения выполнять работу и отправлять результат обратно в ваше приложение).
Это именно то, о чем я подумал, а также о подходе, который я использую для Google Recaptcha: получить промежуточное программное обеспечение и позволить ему выполнить свою работу. Тем не менее, я надеялся, что внутри фреймворка есть какая-то «хитрость», о которой я не знал (все еще изучаю Vue), но я думаю, что в конце концов это просто еще один фреймворк. Большое спасибо! PS: Спасибо также за совет по NuxtJS, я обязательно узнаю больше!
@NicolaM94, возможно, вы могли бы использовать трюк со сборкой с Vite, но интерфейсная среда во время выполнения может сделать только очень много, ха-ха. VueJS предназначен только для того, чтобы помочь вам управлять своим пользовательским интерфейсом с помощью состояния, никаких безопасных и надежных махинаций здесь не рекомендуется.
Да, обычно я больше работаю со структурами данных и анализом данных, этот небольшой блог должен был стать забавным побочным проектом, чтобы я мог также научиться создавать некоторые интерфейсы (возможно, когда-нибудь), а также некоторые другие приложения самостоятельно. Ужасная идея хахахаха
@NicolaM94 это хороший способ всегда узнавать что-то новое! Конечно, это может быть довольно сложно, но ты хотя бы появишься. Кроме того, безголовая CMS не всегда является самым безболезненным подходом. Возможно, когда-нибудь попробуйте это: content.nuxt.com
Вы не можете. Все, что загружается на клиентскую сторону, не является секретом.