Как скрыть ключи и секреты API в приложении React JS, развернутом в Docker

Question

Я хочу, чтобы ключи и секреты не отображались конечному пользователю в окончательной сборке приложения React. Я нашел способы, предлагающие хранить секреты в файле переменных среды в Docker. Ниже приведен код, который пока не работает. REACT_APP_SOME_API недоступен в React, и я не уверен, что при использовании этого метода секреты будут видны в окончательной сборке, которая мне не нужна.

Package.json в React: -

"scripts": {
     "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
     "docker": "rm -rf dist && webpack --mode production && make docker-run",
     "docker-push": "rm -rf dist && webpack --mode production && make docker-push --"
 },

Makefile: -

docker:
    docker build -t app .

docker-run: docker
    docker run -it --env-file ./config.env -p "80:80" app

docker-push: TAG ?= latest
docker-push: docker
    docker tag $(NAME) $(DOCKER_REPO):$(TAG)
    docker push $(DOCKER_REPO):$(TAG)

config.env: -

REACT_APP_SOME_API=This-should-be-accessible-in-react-app

App.js в приложении React: -

return(
    <>{process.env.REACT_APP_SOME_API}< />//This outputs undefined if console.log
);

Answer 1

Вы никогда не должны помещать ключ API в клиентское приложение. Ключ API предназначен для связи между серверами. Если есть некоторые секреты, вы можете сохранить их в хранилище сеансов, когда пользователь войдет в систему как токен.

Answer 2

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

Как правило, не открывайте ключи API, которые не должны быть доступны конечным пользователям.

Answer 3

Создайте файлы для другой среды, например, в вашей исходной директории, например:

• env.dev
• env.production

Внутри вашей средыфайл определяет разные ключи, такие как:

REACT_APP_SOME_API="http://test.com"

Запустите команду для чтения ключей из другого файла во время выполнения:

"start": "sh -ac '. $(pwd)/env.development; rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090'"

Вы можете получить доступ к ключам внутри приложения с помощью

process.env.REACT_APP_SOME_API

Надеюсь, это поможет.

Answer 4

как в Документация React Приложения React не имеют скрытого кода. Вы должны написать для него бэкэнд (где все скрытые части), который предоставляет открытый интерфейс, который может запрашивать ваше приложение React. Вы можете попытаться запутать код, но не можете его скрыть.

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