Секреты Github для файлов Vanilla JS
Я создаю статический веб-сайт, HTML, CSS и Vanilla JS. Я дошел до того, что мне приходится использовать MailChamp для отправки электронных писем клиенту всякий раз, когда происходит отправка формы. Не так сложно, в документации очень понятно, как выполнять вызов API. Но мне нужно отправлять API_KEY с каждым запросом. Что является проблемой. Я не хочу сохранять этот секретный ключ в коде. Я добавил его в качестве секрета в репозиторий github. Но я не уверен, как я могу получить к нему доступ в файлах Vanilla JS. Я попробовал следующее,
Process.env.API_KEY и API_KEY
Я получаю эту ошибку, sendEmail.js:1 Uncaught ReferenceError: process is not defined
Что имеет смысл, потому что это статический сайт. Но я не могу думать ни о каком другом пути. Если бы это был процесс узла, это было бы очень просто :/
Допустим, я создаю конечную точку API и сервер, на котором я могу безопасно сохранить API_KEY, как мне аутентифицировать запрос, поступающий с внешнего/статического веб-сайта? Предполагая, что я не могу безопасно сохранить токен на стороне клиента.
@esqew ну да и нет, я уже знал, что невозможно защитить ключ в клиентском браузере. Я надеялся узнать, есть ли возможность заставить MailChamp позаботиться об этом без внутреннего сервера.
Как ваша почтовая служба сможет определить, за какую подписку выставлять счет, если вам не нужно будет предоставлять аутентификационную информацию для каждого звонка...? Кроме того, что такое «MailChamp»? Я не знаю ни одного такого сервиса, поэтому не могу точно сказать, поддержали бы они такой дизайн. Не могли бы вы связать их документацию или другой вспомогательный материал? Или вы имеете в виду «MailChimp»?
Извините, я постоянно ошибаюсь в их написании. Да, это MailChimp
В любом случае, мой вопрос остается в силе: как ваша почтовая служба могла знать, кому выставлять счета, если не за передачу такого рода учетных данных?
@esqew, добавив их <script> на HTML-страницу?
Сценарий, на который вы намекаете, предоставляет стандартную функциональность для вызова их API. Каждый пользователь MailChimp использует одну и ту же копию. Он не должен включать ваши личные строки аутентификации на основе токенов. Без них API, принимающий вызовы, не смог бы никого отличить друг от друга.
Запрос веб-API содержит источник?! Таким образом, вы регистрируете свой веб-URL
Если вы говорите о заголовке Referer, его можно очень легко подделать злонамеренными или некомпетентными деятелями. Что может помешать мне или кому-либо еще изменить мои собственные вызовы на ту же конечную точку, отправить измененный Referer, чтобы не платить за запрос самому и не передавать вам огромный счет?
Возможно, вы правы, но я надеялся, что об этом можно позаботиться с помощью SSL-соединения или чего-то в этом роде.
Это сильно выходит за рамки темы исходной предпосылки вопроса, поэтому я кратко отвечу на ваш последний комментарий: SSL обеспечивает только сквозное шифрование. Это не мешает кому-либо изменять или создавать свои собственные запросы для использования дизайна, такого как тот, который вы предлагаете. Короче говоря, вам понадобится промежуточный сервер для передачи этих запросов, чтобы вы не передавали свои секретные ключи конечным пользователям.
@esqew В глубине души я уже знал это. Но я надеялся избежать запуска внутреннего API для такой небольшой задачи. Ненавижу признавать, но это единственный способ :/ Цените свое время!
@esqew Я обновил свой вопрос, мне было интересно, могу ли я получить ваш вклад.
Ответы 1
Невозможно сделать это так, как вы хотите, то есть с чистым интерфейсом (FE), потому что это будет означать, что вам нужно отправить им свои секреты. Все, что вы отправляете на внешний интерфейс, всегда будет доступно вашим пользователям, так что это небезопасно. Что вам нужно, так это back-end (BE), какой-то сервер, который будет получать асинхронный вызов от FE, подключаться к внешнему API и делать все, что вы хотите, а затем отправлять какое-то подтверждение на FE, что процесс прошел успешно. Теперь BE будет знать ваши секреты, и это нормально, потому что вы контролируете его, и пользователи не будут иметь к нему прямого доступа.
Теперь вам не всегда нужно полноценное приложение для этого, некоторые люди делают вещи с такими платформами, как Firebase, которые могут обрабатывать аутентификацию пользователей, например, для вас.
@hafiz-temuri, пожалуйста, примите мой ответ, если он вам помог :)
Можно ли получать электронные письма при отправке формы без использования службы или динамического языка, такого как PHP? Если браузер может выполнять вызов API, почему бы не отправить электронное письмо?! Из-за спама по электронной почте? Которые получают каждый день.
@HafizTemuri Можете ли вы представить, что любой произвольный веб-сайт, на который вы только что зашли, может указать вашему браузеру отправлять электронные письма от вашего имени? Если бы элементарное вредоносное ПО могло отправлять электронные письма, как вы? Браузеры не являются почтовыми клиентами, и на то есть веские причины.
@esqew Разве не так работает мошенничество по электронной почте, они притворяются кем-то другим.
@HafizTemuri На самом деле совсем нет. Есть много методов, которые спамеры электронной почты использовали с течением времени, но отправка электронной почты от имени другого пользователя с помощью вызова любого метода, определенного в стандарте JavaScript, не была одним из них. Потому что эта функциональность никогда не была частью стандарта.
Хорошо, допустим, я создаю конечную точку, как мне создать токен для защиты вызова от внешнего интерфейса к внутреннему? Предполагая, что я не могу сохранить токен во внешнем интерфейсе, как мне аутентифицировать запрос, поступающий из внешнего интерфейса?
Запрос будет происходить с внутренней стороны. Серверная часть проверит данные, полученные от FE, и сама выполнит вызов API. Все это время ключ API есть только у BE.
Да, но тогда любой может вызвать эту внутреннюю конечную точку. Как мне авторизовать вызов, исходящий от внешнего интерфейса, без входа пользователя?
Вы не можете без входа пользователя. Вам нужно как-то различать людей, которые являются вашими пользователями и незнакомцами. stackoverflow.com/questions/47841937/…
Привет @hafiz-temuri, пожалуйста, прими мой вопрос, если он был полезен :)
Отвечает ли это на ваш вопрос? Как скрыть ключ API в клиентском Javascript