reactjs - react - Usando claves API en una aplicación de reacción

react helmet sync

Question

Tengo una aplicación React que utiliza dos servicios de terceros. La aplicación se inició utilizando react-create-app .

Ambos de estos servicios requieren una clave API.

Una clave se suministra a través de una etiqueta de script, como esta:

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

La otra clave API se utiliza en una solicitud. Almaceno 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}`

Las mejores prácticas de Google sobre el manejo de las claves API dicen:

No incrustar claves API directamente en el código

Esto me lleva a mi primera pregunta:

1. ¿Cómo usar las variables en index.html ?

En mi archivo index.html , tengo dos etiquetas que se parecen a esto:

<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 de API almacenada en una constante, como lo hago para MY_OTHER_KEY ?

Google también dice:

No almacene claves de API en archivos dentro del árbol de origen de su aplicación

Esto me lleva a mi segunda pregunta:

2. ¿La clave de API aún no termina en el paquete?

Di que hago lo que dice Google y yo

... almacénelos en variables de entorno o en archivos fuera del árbol de origen 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 a él de alguna otra manera. Al final, ¿no será la clave aún visible en el paquete, excepto tal vez más difícil de encontrar? ¿Cómo ayuda esto exactamente?

3. ¿Existe una forma canónica de usar las claves API en una aplicación de reacción? ¿O depende del desarrollador individual?

Se explica por sí misma, estoy buscando la manera de reaccionar para resolver este problema, si es que existe.

¡Gracias por tu ayuda!

Answer 1

1. ¿Cómo usar las variables en index.html?

Respuesta 1: consulte Agregar variables de entorno personalizadas para saber cómo agregar variables de entorno del tipo que se muestra como ejemplo.

2. ¿La clave de API aún no termina en el paquete?

Respuesta 2: Incluso cuando tiene su clave ( MY_KEY ) como variable de entorno en la etiqueta de script, se representará en la página y estará visible. En general, estas son las claves del navegador y están destinadas a ser utilizadas en el lado del cliente. Estos pueden ser restringidos al proporcionar el encabezado de Http Referer en su solicitud. Más sobre la eficacia de asegurar estas claves here . Sin embargo, las claves de API (como MY_OTHER_KEY ) no deben utilizarse en el lado del cliente y no deben representarse en la etiqueta de script o almacenarse en el lado del cliente JS.

3. ¿Existe una forma canónica de usar las claves API en una aplicación de reacción? ¿O depende del desarrollador individual?

Respuesta 3: la forma canónica de utilizar una clave de API de terceros es que la aplicación del lado del cliente envíe una solicitud a su API de servidor. Su API de fondo 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 descomprimirla y traducirla en objetos de dominio que su aplicación de interfaz de usuario entendería o enviar la respuesta en bruto a la aplicación de interfaz de usuario. De esta manera, la clave API permanece en el backend y nunca se envía al lado del cliente.