Eu tenho um aplicativo React que usa dois serviços de terceiros. O aplicativo foi iniciado usandoreact-create-app.

Ambos os serviços requerem uma chave de API.

Uma chave é fornecida por meio de uma tag de script, assim:

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

A outra chave de API é usada em uma solicitação. Eu guardo a chave real em uma constante e a uso para formar a solicitação. Como isso:

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

Googledicas de melhores práticas no manuseio de chaves de API diz:

Não incorpore chaves de API diretamente no código

Isso me leva à minha primeira pergunta:

1. Como usar variáveis emindex.html?

No meuindex.html arquivo, eu tenho duas tags que se parecem com isso:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Obviamente,%PUBLIC_URL%é uma variável Como posso adicionar uma variável%MY_KEY% para evitar a incorporação da chave da API diretamente no meu código?

Para obter algo assim:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

Relacionado a esta pergunta, é seguro ter a chave da API armazenada em uma constante, como eu faço paraMY_OTHER_KEY?

O Google também diz:

Não armazene chaves de API em arquivos dentro da árvore de origem do aplicativo

Isso me leva à minha segunda pergunta:

2. A chave da API ainda não acaba no pacote?

Digamos que eu faça o que o Google diz e eu

... armazene-os em variáveis de ambiente ou em arquivos fora da árvore de origem do aplicativo

Digamos que eu armazene uma chave em um arquivo externo. Suponho que esse arquivo seja lido em algum momento e seu conteúdo seja copiado no pacote ou referenciado de outra maneira. No final, a chave ainda não estará visível no pacote, exceto talvez mais difícil de encontrar? Como isso ajuda exatamente?

3. Existe uma maneira canônica de usar chaves de API em um aplicativo de reação? Ou depende do desenvolvedor individual?

Auto-explicativo, estou procurando a maneira correta de resolver esse problema, se houver.

Obrigado pela ajuda!