Как защитить ключ API с помощью Nuxt и проверить

Question

Я использую Nuxt (с SSR / PWA / Vuejs / Node.js / Vuex / Firestore) и хотел бы иметь общую идею или пример для следующего:

1. Как можноЯ защищаю ключ API.Например, для вызова MailChimp API
2. Я не знаком с тем, как хакер мог бы это увидеть, если внедрить плохое решение.Как я могу убедиться, что он им недоступен?

Я нашел несколько «решений», которые рекомендуют использовать переменные среды, но для каждого решения кто-то указывает, что оно не будет безопасным.См .:

https://github.com/nuxt-community/dotenv-module/issues/7

https://github.com/nuxt/nuxt.js/issues/2033

Возможно, серверное промежуточное ПО является ответом?https://blog.lichter.io/posts/sending-emails-through-nuxtjs и https://www.youtube.com/watch?v=j-3RwvWZoaU (@ 11:30).Мне просто нужно добавить электронное письмо в учетную запись почтового шимпанзе после ввода, похоже, это слишком много.

Также я вижу, что уже храню свой ключ API Firestore в качестве переменной среды.Это безопасно?Когда я открываю chrome dev tools-> sources-> page-> app.js, я сразу вижу ключ api (тестируется только в режиме dev)!

Answer 1

Как я могу защитить ключ API.Например, чтобы вызвать MailChimp API

Жестокая правда здесь НЕТ ... На стороне клиента вы не можете защитить какой-либо секрет, по крайней мере, в веб-приложении.

Просточтобы вы имели представление о методах, которые можно использовать для защиты API, и о том, как их можно обойти, вы можете прочитать этой серии статей.Хотя это в контексте Api, обслуживающего мобильное приложение, большинство из них также применяется к API, обслуживающему веб-приложение.Вы узнаете, как можно использовать и обходить api-ключи, ouath-токены, hmac и закрепление сертификатов.

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

Например, в вашем случае доступа к API Mailchimp ... Если ваш сервер отвечает за выполнение этого от имени вашего веб-приложения, то вы можете принять меры безопасности для обнаружения иУменьшите использование Mailchimp вашим веб-приложением, например, решением для анализа поведения пользователей (UBA), но оставив для веб-приложения доступ к API Mailchimp, вы знаете, что кто-то злоупотребляет им только тогда, когда Mailchimp предупреждает вас или вы видите его.в их приборных панелях.

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

Как вы, возможно, уже знаете, F12 для доступа к инструментам разработчиков - это один из способов.

Другой способ идентифицировать использование OWASPинструмент безопасности Zed Attack Proxy (ZAP) и, используя их слова:

OWASP Zed Attack Proxy (ZAP) является одним из самых популярных бесплатных инструментов безопасности в мире и активноподдерживается сотнями международных добровольцев *.Это может помочь вам автоматически находить уязвимости безопасности в ваших веб-приложениях во время разработки и тестирования ваших приложений.Это также отличный инструмент для опытных пентестеров, который можно использовать для ручного тестирования безопасности.

Answer 2

Вы можете использовать либо промежуточное ПО сервера, либо https://github.com/nuxt-community/separate-env-module

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

Для # 2 вы можете проверить, включен ли он в клиентские js-источники.Есть и другой способ получить хакер, например xss, но его общие вещи и не очень связанные с вашим кодом.