Скрытие ключей API в настройке JS

Я создаю простой пользовательский интерфейс с настройкой HTML+CSS+JS, который использует сторонний API, для которого требуется ключ, и я хотел бы сохранить ключ в файле, который я могу gitignore и доступ из моего файла Javascript. Я не собираюсь развертывать этот проект, я просто хочу иметь возможность отправить его на GitHub без временного удаления переменной перед каждым коммитом.

Все ответы, которые я нашел, связаны с настройками с Node.js, React/Webpack или другими настройками сервера, но у меня нет сервера или транспилятора, и я не хочу добавлять кучу ошибок и конфигураций только для этого, Есть способ сделать это? Я пытался сохранить его в отдельном файле JS и импортировать / экспортировать, но либо я не мог получить правильный синтаксис, либо то, что я пытался, нуждался в транспортере. Каждое изменение попытки приводило к синтаксической ошибке или неопределенной переменной.

Ключевая информация:

  1. Это проект, запускаемый полностью локально - как, просто открытие index.html в моем браузере - так что я не думаю, что мне нужно беспокоиться о ключе, выставляемом в клиенте.
  2. Моя установка в основном включает в себя index.html, main.js, а также style.css,
  3. Я хочу перенести проект на GitHub, поэтому я хочу сохранить ключ API в качестве переменной в файле, отдельном от main.js что я могу добавить к .gitignore но доступ в main.js,
  4. Я сохраняю это настолько простым, насколько это возможно, без фреймворков и т. Д. Если это не очень просто и легко, я не хочу добавлять библиотеки только для того, чтобы это работало.

1 ответ

Решение

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

Конкретная реализация будет зависеть от того, какого провайдера без сервера вы используете, но, например, AWS Lambda позволяет вам настроить env vars:

https://docs.aws.amazon.com/lambda/latest/dg/env_variables.html

и вы можете использовать службу управления ключами или хранилище параметров в зависимости от ваших предпочтений и требований:

https://aws.amazon.com/blogs/mt/the-right-way-to-store-secrets-using-parameter-store/


Оставляя вышеупомянутое на месте, на случай, если люди найдут это, посмотрев на тег Serverless. Обновления ниже на основе обновленного вопроса.

Итак, если я правильно понимаю обновленный вопрос, вы хотите проверить весь свой код для git, кроме ключа API, обслуживать файлы только в локальной файловой системе и иметь эту локальную копию для доступа к ключу API.

Простейшим способом сделать это было бы просто иметь другой файл.js, который определяет переменную (и), о которой идет речь:

// config.js
var config = { // this should be const instead if you're using ES6 standards
  apiKey : '123456789XYZ'
}

Затем в index.html есть еще один скрипт-тег, который вызывает его перед любыми скриптами, которым требуется конфигурация, например:

  <script src='./config.js'></script>
  <script src='./main.js'></script>
</body>

В main.js вы сможете ссылаться на переменную config для использования, и аналогичным образом вы можете.gitignore 'config.js'.

Если вы используете MVC, попробуйте написать на php variabel. Чем открыть в скрипте javasript с помощью echo ...

Другие вопросы по тегам