Tengo una aplicación React que usa dos servicios de terceros. La aplicación se inició usando react-create-app .
Ambos servicios requieren una clave API.
Una clave se proporciona a través de una etiqueta de secuencia de comandos, como esta:
<script type="text/javascript" src="https://myapi?key=MY_KEY"> </script>La otra clave de API se utiliza en una solicitud. Guardo la clave real en una constante y la uso para formar la solicitud. Me gusta esto:
const MY_OTHER_KEY = 'MY_OTHER_KEY' let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`Los consejos de mejores prácticas de Google sobre el manejo de claves API dicen:
No inserte claves de API directamente en el código
Esto me lleva a mi primera pregunta:
1. ¿Cómo usar variables en index.html ?
En mi archivo index.html , tengo dos etiquetas que se ven así:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> Obviamente, %PUBLIC_URL% es una variable. ¿Cómo puedo agregar una variable %MY_KEY% para evitar incrustar la clave API directamente en mi código?
Para obtener algo como esto:
<script type="text/javascript" src="https://myapi?key=%MY_KEY%"> </script> En relación con esta pregunta, ¿es seguro tener la clave API almacenada en una constante, como hago para MY_OTHER_KEY ?
Google también dice:
No almacene claves API en archivos dentro del árbol fuente de su aplicación
Esto me lleva a mi segunda pregunta:
2. ¿La clave API todavía no termina en el paquete?
Di que hago lo que dice Google y yo
... almacenarlos en variables de entorno o en archivos fuera del árbol de fuentes de su aplicación
Digamos que guardo una clave en un archivo externo. Supongo que ese archivo se leerá en algún momento y su contenido se copiará en el paquete o se hará referencia de alguna otra manera. Al final, ¿la clave no seguirá siendo visible en el paquete, excepto que tal vez sea más difícil de encontrar? ¿Cómo ayuda esto exactamente?
3. ¿Existe una forma canónica de usar claves API en una aplicación de reacción? ¿O depende del desarrollador individual?
Se explica por sí mismo, estoy buscando la forma de reacción de resolver este problema, si es que hay una.
¡Gracias por tu ayuda!
1. ¿Cómo usar variables en index.html?
Respuesta 1: Vaya a Agregar variables de entorno personalizadas para averiguar cómo agregar variables de entorno del tipo que ha mostrado como ejemplo.
2. ¿La clave API todavía no termina en el paquete?
Respuesta 2: incluso cuando tenga su clave ( MY_KEY ) como una variable de entorno en la etiqueta del script, se representará en la página y será visible. Generalmente, estas son claves del navegador y están destinadas a ser utilizadas en el lado del cliente. Estos pueden restringirse proporcionando el encabezado Http Referer en su solicitud. Más información sobre la eficacia de asegurar estas llaves aquí . Sin embargo, no se supone que las claves API (como MY_OTHER_KEY ) se usen en el lado del cliente y no se deben representar en la etiqueta del script ni almacenar en el JS del lado del cliente.
3. ¿Existe una forma canónica de usar claves API en una aplicación de reacción? ¿O depende del desarrollador individual?
Respuesta 3: La forma canónica de usar una clave de API de terceros es que su aplicación del lado del cliente envíe una solicitud a su API de back-end. Su API de back-end luego formatea la solicitud según la API de terceros, agrega la clave y realiza la llamada a la API de terceros. Una vez que recibe la respuesta, puede desempaquetarla y traducirla a objetos de dominio que su aplicación front-end entendería o enviar la respuesta sin procesar a la aplicación front-end. De esta forma, la clave API permanece en el backend y nunca se envía al lado del cliente.